20 quick wins to improve your website speed
•
2 gostaram•1,038 visualizações
In this decks i provide you some quick wins to speed up your website to satisfy your users and Googlebot.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a 20 quick wins to improve your website speed
Semelhante a 20 quick wins to improve your website speed (20)
Mais de Aymen Loukil
Mais de Aymen Loukil (13)
Último
Último (20)
20 quick wins to improve your website speed
- 1. 1#seocamp @LoukilAymen Quick-wins to speed up your website
- 2. That Business Study Design Development Oh wait it is f*** slow @LoukilAymen
- 3. “Our new branding is 7 custom font ! It will rock ! ” - Designer @LoukilAymen
- 4. @LoukilAymen “We should implement a slider to increase our conversion !!” - Rockstar Designer
- 5. @LoukilAymen “I found and integrated 3 NPM useful packages for sorting feature !!” - Web developer
- 6. @LoukilAymen “We must accelerate! The new version of the site must be ready next Thursday for the investors...” - CEO / Co-founder
- 8. 1-Web performance as a culture It must be fast. @LoukilAymen Business Study Design Development
- 9. Fix a performance Budget @LoukilAymen
- 10. Our budget consumption quota 600Kb max, 35 request, 300kb of JavaScript
- 11. Global performance budget IMAGES CSS JavaScript Number of requests
- 12. 2-Before install a new add-on / lib ● It loads many scripts ? ● It increases the DB queries number ? ● It make calls to external APIs ? ● It makes complex operations ? ● Il explodes our web performance budget ? @LoukilAymen
- 13. @LoukilAymen
- 14. web performance could be impacted by Server Network Images Fonts CSS JavaScript 3rd party scripts HTML @LoukilAymen
- 15. 3-Less is more - Code coverage Chrome Console > Audits > Coverage @LoukilAymen
- 16. 4-Avoid 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-Gzip compression Original size Compressed size (divided by 4) @LoukilAymen
- 18. 5- Gzip compression - Never Gzip an already compressed asset - Don’t Gzip tiny or big files => overhead ! @LoukilAymen
- 20. @LoukilAymen
- 21. 7-Try new images formats WebP 30% less size then JPEG et PNG https://developers.google.com/speed/webp/ @LoukilAymen
- 23. Solution : Switch between WEBP and classic formats .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-Expire headers cache Reduce the number of requests starting from the second visit @LoukilAymen
- 25. 9- Switch to HTTP/2 https://fr.slideshare.net/TomAnthony/an-introduction-to-http2-for-seos @tomanthonyseo @LoukilAymen
- 26. 10-Speedup DNS resolution <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="//my-lovely-CDN"> In the <head> </head> @LoukilAymen
- 27. 11- Set up a CDN
- 28. 12-CSS - best practices - Fewer lines is better ! - Minify the code (https://cssminifier.com/) - don’t @import - Delete unused code (Yeah man the old carousel..) - No style in HTML tags - Inline your critical CSS <style> … here </style> - Preload the non critical CSS <link rel=”preload” href=”non-critical-css.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/ Copy + paste inline <head> 8686 characters sur 183755 MVP : Critical for standard resolution 1280X1024 Better : Many critical css files (1 per resolution) @LoukilAymen
- 32. Useful for what ? @LoukilAymen
- 33. 15-Prefetch the Next page ! <link rel="prefetch" href="/my-next-page.html" as=”html”> @LoukilAymen
- 34. 16- Custom fonts loading strategies @LoukilAymen Open your CSS, CTRL+F “font-face”, add: font-display:optional; (or Fallback)
- 35. Houston Airport and luggage delivery @LoukilAymen
- 36. Houston Airport and luggage delivery 1- Walk 1 minute and wait for 7 minutes => many customers claims 2- Take the elevator, walk for 6 minutes and wait for 2 minutes => 0 claims @LoukilAymen
- 37. 17- Perceived performance Animated : +6% faster Animated and accelerated: +12% faster @LoukilAymen
- 39. 19-Exploit the RUM data (CrUX) https://github.com/AymenLoukil/Chrome-user-experience-report-queries @ab80 @LoukilAymen Check queries
- 41. Competitive edge on performance https://www.aymen-loukil.com/blog/top-sites-ecommerce-performance-2018/
- 42. Follow the evolution in time
- 43. 20 - Optimize now ! @LoukilAymen
- 44. Aymen Loukil #TechnicalSEO #entrepreneur #speaker #ex-dev https://www.aymen-loukil.com @LoukilAymen