20 quick wins to improve your website speed
•
2 likes•1,038 views
In this decks i provide you some quick wins to speed up your website to satisfy your users and Googlebot.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 20 quick wins to improve your website speed
Similar to 20 quick wins to improve your website speed (20)
More from Aymen Loukil
More from Aymen Loukil (13)
Recently uploaded
Recently uploaded (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