Télécharger en tant que PDF, PPTX
![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](https://image.slidesharecdn.com/aymenloukil-seocampdaylorraine-181022080939/75/Quick-wins-pour-accelerer-son-site-web-seo-camp-day-lorraine-2018-23-2048.jpg)
![Critical
[Above the fold]
Non critical
[Below the fold]
@LoukilAymen](https://image.slidesharecdn.com/aymenloukil-seocampdaylorraine-181022080939/75/Quick-wins-pour-accelerer-son-site-web-seo-camp-day-lorraine-2018-29-2048.jpg)
Téléchargé parAymen Loukil
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Le document propose des stratégies pour améliorer la performance d'un site web, en soulignant l'importance d'une culture de performance et en fixant des budgets spécifiques. Il aborde des techniques telles que la compression, l'utilisation de nouveaux formats d'image comme le WebP, et l'optimisation du chargement des ressources. Enfin, il encourage l'utilisation d'outils de mesure de performance pour suivre les progrès et rester compétitif.
Contenu connexe
Similaire à Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
- 1. 1#seocamp @LoukilAymen Quick-wins pouraccélérer son site web
- 2. ça me rappelledes choses et vous ? Business Etude Design Développement Oh.. C’est lent !! @LoukilAymen
- 3. “Notre nouveau brandingc’est 7 polices ! C’est un vrai travail artistique” - DA @LoukilAymen
- 4. @LoukilAymen “Il nous fautun carrousel pour améliorer la conversion !!” - Rockstar Designer
- 5. @LoukilAymen “J’ai trouvé etintégré 3 modules npm JS pour faire les facettes et les filtres !!” - Web developer
- 6. @LoukilAymen “Il faut yaller ! La nouvelle version du site doit être prête jeudi prochain pour le salon...” - CEO / Co-founder
- 8. 1-La performance commeculture Le site doit être rapide. @LoukilAymen Business Etude Design Développement
- 9. Fixer un Budgetde performance @LoukilAymen
- 10. Consommation du budgetde performance 600Kb max, 35 requêtes, 300kb de JS
- 11.
- 12. 2-Avant d’installer unplugin/ 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.
- 14. La performance impactéepar 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 sizeCompressed size (divided by 4) @LoukilAymen
- 18. 5-Compression Gzip - JamaisGzipper un éléments déjà compressé - Compresser des éléments très petits ou grands => overhead ! @LoukilAymen
- 19.
- 20.
- 21. 7-Osez le nouveauformat WebP 30% moins volumineux que JPEG et PNG https://developers.google.com/speed/webp/ @LoukilAymen
- 22.
- 23. Solution : Switcherentre 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 cachenavigateur Réduit le nombre de ressources à télécharger à partir de la deuxième visite @LoukilAymen
- 25. 9- Passez enHTTP/2 https://fr.slideshare.net/TomAnthony/an-introduction-to-http2-for-seos @tomanthonyseo @LoukilAymen
- 26. 10-Accélérer la résolutionDNS <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 enplace un CDN
- 28. 12-CSS - bonnespratiques - 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] Noncritical [Below the fold] @LoukilAymen
- 30. 13-Critical CSS https://jonassebastianohlsson.com/criticalpathcssgenerator/ Copier etl’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 chargementJavaScript @LoukilAymen
- 32. Vous en faitesquoi ? @LoukilAymen
- 33. 15-Prefetcher la pagesuivante <link rel="prefetch" href="/ma-page-suivante.html" as=”html”> @LoukilAymen
- 34. 16- Stratégie dechargement des polices @LoukilAymen Ouvre ton CSS, CTRL+F “font-face”, ajouter : font-display:optional;
- 35. Aéroport de Houstonet les bagages @LoukilAymen
- 36. Aéroport de Houstonet 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 surperformance perçue Animées : +6% plus rapide Animées et accélérées : +12% plus rapide @LoukilAymen
- 38. 18-Equipez vous avecdes outils / KPI @LoukilAymen
- 39. 19-Exploiter les donnéesCruX https://github.com/AymenLoukil/Chrome-user-experience-report-queries @ab80 @LoukilAymen
- 40.
- 41. Positionnez vous parrapport aux autres https://www.aymen-loukil.com/blog/top-sites-ecommerce-performance-2018/
- 42. Suivre l’évolution dansle temps
- 43. 20 - Commencezmaintenant ! @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 AUXSPONSORS