Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Quick-wins pour accélérer son site web - seo camp day lorraine 2018

377 vues

Publié le

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.

Publié dans : Marketing
  • Soyez le premier à commenter

Quick-wins pour accélérer son site web - seo camp day lorraine 2018

  1. 1. 1#seocamp @LoukilAymen Quick-wins pour accélérer son site web
  2. 2. ça me rappelle des choses et vous ? Business Etude Design Développement Oh.. C’est lent !! @LoukilAymen
  3. 3. “Notre nouveau branding c’est 7 polices ! C’est un vrai travail artistique” - DA @LoukilAymen
  4. 4. @LoukilAymen “Il nous faut un carrousel pour améliorer la conversion !!” - Rockstar Designer
  5. 5. @LoukilAymen “J’ai trouvé et intégré 3 modules npm JS pour faire les facettes et les filtres !!” - Web developer
  6. 6. @LoukilAymen “Il faut y aller ! La nouvelle version du site doit être prête jeudi prochain pour le salon...” - CEO / Co-founder
  7. 7. 1-La performance comme culture Le site doit être rapide. @LoukilAymen Business Etude Design Développement
  8. 8. Fixer un Budget de performance @LoukilAymen
  9. 9. Consommation du budget de performance 600Kb max, 35 requêtes, 300kb de JS
  10. 10. Budget Global IMAGES CSS JavaScript Nombre de requêtes
  11. 11. 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
  12. 12. @LoukilAymen
  13. 13. La performance impactée par Serveur Connexion Images Polices CSS JavaScript Scripts 3rd party HTML @LoukilAymen
  14. 14. 3-Less is more - Code coverage Console Chrome > Audits > Coverage @LoukilAymen
  15. 15. 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
  16. 16. 5-Compression Gzip Original size Compressed size (divided by 4) @LoukilAymen
  17. 17. 5-Compression Gzip - Jamais Gzipper un éléments déjà compressé - Compresser des éléments très petits ou grands => overhead ! @LoukilAymen
  18. 18. 6-Compression d’images https://imageoptim.com https://compressjpeg.com/ https://saerasoft.com/caesium/ @LoukilAymen
  19. 19. @LoukilAymen
  20. 20. 7-Osez le nouveau format WebP 30% moins volumineux que JPEG et PNG https://developers.google.com/speed/webp/ @LoukilAymen
  21. 21. Compatibilité navigateurs réduite https://caniuse.com/#feat=webp @LoukilAymen
  22. 22. 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
  23. 23. 8-Mise en cache navigateur Réduit le nombre de ressources à télécharger à partir de la deuxième visite @LoukilAymen
  24. 24. 9- Passez en HTTP/2 https://fr.slideshare.net/TomAnthony/an-introduction-to-http2-for-seos @tomanthonyseo @LoukilAymen
  25. 25. 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
  26. 26. 11- Mettre en place un CDN
  27. 27. 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
  28. 28. Critical [Above the fold] Non critical [Below the fold] @LoukilAymen
  29. 29. 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
  30. 30. 14-Stratégies de chargement JavaScript @LoukilAymen
  31. 31. Vous en faites quoi ? @LoukilAymen
  32. 32. 15-Prefetcher la page suivante <link rel="prefetch" href="/ma-page-suivante.html" as=”html”> @LoukilAymen
  33. 33. 16- Stratégie de chargement des polices @LoukilAymen Ouvre ton CSS, CTRL+F “font-face”, ajouter : font-display:optional;
  34. 34. Aéroport de Houston et les bagages @LoukilAymen
  35. 35. 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
  36. 36. 17- Jouer sur performance perçue Animées : +6% plus rapide Animées et accélérées : +12% plus rapide @LoukilAymen
  37. 37. 18-Equipez vous avec des outils / KPI @LoukilAymen
  38. 38. 19-Exploiter les données CruX https://github.com/AymenLoukil/Chrome-user-experience-report-queries @ab80 @LoukilAymen
  39. 39. Benchmarker, comparer @LoukilAymen
  40. 40. Positionnez vous par rapport aux autres https://www.aymen-loukil.com/blog/top-sites-ecommerce-performance-2018/
  41. 41. Suivre l’évolution dans le temps
  42. 42. 20 - Commencez maintenant ! @LoukilAymen
  43. 43. Aymen Loukil #TechnicalSEO #entrepreneur #speaker #ex-dev https://www.aymen-loukil.com @LoukilAymen
  44. 44. #seocamp 45 Question Mug ● ● ● On prefetch quoi ? Pourquoi ?
  45. 45. #seocamp 46 MERCI AUX SPONSORS

×