Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

391 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Marketing
  • Als Erste(r) kommentieren

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

×