En naviguant sur le web, personne n'aime attendre ! Les utilisateurs sont frustrés au delà de 3s et ont tendance de quitter votre site voire même ne plus y revenir s'il est lent. Google, n'arrête pas d'appuyer sur l'importance de la vitesse de chargement des sites et l'intègre même dans les facteurs de son algorithme. Vous souhaitez vous démarquez des autres dans ce web lent (50% des sites internet se chargent en 15s en 2018) ? Satisfaire vos utilisateurs avec une expérience fluide, plaire à Google et voir un impact positif sur vos KPIs (CA, taux de rebond, positionnement SEO) ? Je partagerai avec vous des techniques actionnables et méthodologies pour booster la performance de votre site (web et mobile).
12. @LoukilAymen #tuniseo
#TUNISEO
Pour qui : Quelle connexion ?
France 14 Mbps
Denmark 24.41 Mbps
Japan 22 Mbps
Belgique 20 Mbps
Suisse 18.5 Mbps
State of Mobile Networks https://opensignal.com
USA 12.5 Mbps
Une page web en moyenne : 3.6Mb*
3.6 Mb
14 Mbps
= 25s
16s(Japan)
13. @LoukilAymen #tuniseo
#TUNISEO
Pour qui : Quel matériel ?
4s sur un iPhone 8 (800€) Vs 14s sur un Motorolla G4 (200€)
https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
37. @LoukilAymen #tuniseo
• Corréler les métriques perf IT avec métrique perf business
• Enrichir synthétique par RUM
• Segmenter par type de page (listing, checkout, product, editorial)
• Afficher les mesures dans les locaux (#fierté #succès)
• Jamais arrêter la mesure
Mesure de performance
60. @LoukilAymen #tuniseo
1. Installer CasperJS : http://casperjs.org/ (Node.js)
2. Télécharger ce script :
https://github.com/ibrennan/automation/tree/master/content/critical-css
3. >casperjs app.js pour l’exécuter
4. Répondre aux questions
5. Copier le code CSS sorti et le coller en inline avant l’inclusion des fichiers de
style
Prioriser le CSS critique
76. @LoukilAymen #tuniseo
Take aways pour une meilleure performance web
• Culture de performance (Équipes multi skills, #perfmatters)
• Less is more
• Chargement intelligent des scripts (preload, async, defer)
• Prioriser le CSS critique
• Auditer les ressources externes
• Chargement intelligent des fonts (Font-display)
• Mettre en cache les éléments statiques
• Viser 30% d’amélioration !