Quick-wins pour accélérer son site web - seo camp day lorraine 2018
•
1 j'aime•743 vues
Mes slides du SEO Campday Lorraine 2018. Quick-wins pratiques pour accélérer le temps de chargement de votre site afin de satisfaire Google et ses utilisateurs et impacter positivement les KPIs.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Similaire à Quick-wins pour accélérer son site web - seo camp day lorraine 2018 (20)
Plus de Aymen Loukil
Plus de Aymen Loukil (10)
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
- 1. 1#seocamp @LoukilAymen Quick-wins pour accélérer son site web
- 2. ça me rappelle des choses et vous ? Business Etude Design Développement Oh.. C’est lent !! @LoukilAymen
- 3. “Notre nouveau branding c’est 7 polices ! C’est un vrai travail artistique” - DA @LoukilAymen
- 4. @LoukilAymen “Il nous faut un carrousel pour améliorer la conversion !!” - Rockstar Designer
- 5. @LoukilAymen “J’ai trouvé et intégré 3 modules npm JS pour faire les facettes et les filtres !!” - Web developer
- 6. @LoukilAymen “Il faut y aller ! La nouvelle version du site doit être prête jeudi prochain pour le salon...” - CEO / Co-founder
- 8. 1-La performance comme culture Le site doit être rapide. @LoukilAymen Business Etude Design Développement
- 9. Fixer un Budget de performance @LoukilAymen
- 10. Consommation du budget de performance 600Kb max, 35 requêtes, 300kb de JS
- 11. Budget Global IMAGES CSS JavaScript Nombre de requêtes
- 12. 2-Avant d’installer un plugin/ librairie ● Il charge plusieurs scripts ? ● Il augmente le nombre de requêtes BDD/page ? ● Il fait des appels à des APIs externes ? ● Il fait des opérations complexes ? ● Il explose notre budget de performance ? @LoukilAymen
- 13. @LoukilAymen
- 14. La performance impactée par Serveur Connexion Images Polices CSS JavaScript Scripts 3rd party HTML @LoukilAymen
- 15. 3-Less is more - Code coverage Console Chrome > Audits > Coverage @LoukilAymen
- 16. 4-Eviter les redirections site.com => m.site.com/home site.com => www.site.com => https://www.site.com site.com => www.example.com => www.example.com/mobile @LoukilAymen
- 17. 5-Compression Gzip Original size Compressed size (divided by 4) @LoukilAymen
- 18. 5-Compression Gzip - Jamais Gzipper un éléments déjà compressé - Compresser des éléments très petits ou grands => overhead ! @LoukilAymen
- 20. @LoukilAymen
- 21. 7-Osez le nouveau format WebP 30% moins volumineux que JPEG et PNG https://developers.google.com/speed/webp/ @LoukilAymen
- 23. Solution : Switcher entre WebP et PNG .htaccess RewriteEngine On RewriteBase / # Le navigateur supporte il le WebP RewriteCond %{HTTP_USER_AGENT} Chrome [OR] # Est ce PSI RewriteCond %{HTTP_USER_AGENT} "Google Page Speed Insights" [OR] # Ce navigateur supporte le WebP RewriteCond %{HTTP_ACCEPT} image/webp [OR] # On a une version Webp RewriteCond %{DOCUMENT_ROOT}/$1.webp -f # On envoie l’image Webp RewriteRule (.+).(?:jpe?g|png)$ $1.webp [NC,T=image/webp,E=webp,L] Header append Vary Accept env=REDIRECT_webp @LoukilAymen
- 24. 8-Mise en cache navigateur Réduit le nombre de ressources à télécharger à partir de la deuxième visite @LoukilAymen
- 25. 9- Passez en HTTP/2 https://fr.slideshare.net/TomAnthony/an-introduction-to-http2-for-seos @tomanthonyseo @LoukilAymen
- 26. 10-Accélérer la résolution DNS <link rel="dns-prefetch" href="//fonts.googleapis.com"> <link rel="dns-prefetch" href="//www.google-analytics.com"> <link rel="dns-prefetch" href="//www.youtube.com"> -- -- -- <link rel="dns-prefetch" href="//mon-cher-CDN"> Dans le <head> </head> @LoukilAymen
- 27. 11- Mettre en place un CDN
- 28. 12-CSS - bonnes pratiques - Moins de lignes c’est mieux - Minifier le code (https://cssminifier.com/) - pas de @import - Supprimer le code non utilisé (Eh oui l’ancien carousel) - Pas de style dans les balises HTML - Mettre en inline le critical CSS <style> … ici </style> - Mettre en preload le non critical <link rel=”preload” href=”mon-css-non-critique.css” as=”style” onload=”this.rel=’stylesheet’” /> @LoukilAymen
- 29. Critical [Above the fold] Non critical [Below the fold] @LoukilAymen
- 30. 13-Critical CSS https://jonassebastianohlsson.com/criticalpathcssgenerator/ Copier et l’insérer en inline dans le <head> 8686 characters sur 183755 Le Minimum : Critical pour 1280X1024 Le mieux : Plusieurs fichiers critical css (1 par résolution) @LoukilAymen
- 31. 14-Stratégies de chargement JavaScript @LoukilAymen
- 32. Vous en faites quoi ? @LoukilAymen
- 33. 15-Prefetcher la page suivante <link rel="prefetch" href="/ma-page-suivante.html" as=”html”> @LoukilAymen
- 34. 16- Stratégie de chargement des polices @LoukilAymen Ouvre ton CSS, CTRL+F “font-face”, ajouter : font-display:optional;
- 35. Aéroport de Houston et les bagages @LoukilAymen
- 36. Aéroport de Houston et les bagages 1- Marcher 1 minute et attendre 7 minutes 2- Prendre l'ascenseur, marcher 6 minutes et attendre 2 minutes @LoukilAymen
- 37. 17- Jouer sur performance perçue Animées : +6% plus rapide Animées et accélérées : +12% plus rapide @LoukilAymen
- 38. 18-Equipez vous avec des outils / KPI @LoukilAymen
- 39. 19-Exploiter les données CruX https://github.com/AymenLoukil/Chrome-user-experience-report-queries @ab80 @LoukilAymen
- 41. Positionnez vous par rapport aux autres https://www.aymen-loukil.com/blog/top-sites-ecommerce-performance-2018/
- 42. Suivre l’évolution dans le temps
- 43. 20 - Commencez maintenant ! @LoukilAymen
- 44. Aymen Loukil #TechnicalSEO #entrepreneur #speaker #ex-dev https://www.aymen-loukil.com @LoukilAymen
- 45. #seocamp 45 Question Mug ● ● ● On prefetch quoi ? Pourquoi ?
- 46. #seocamp 46 MERCI AUX SPONSORS