Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20 quick wins to improve your website speed

621 views

Published on

In this decks i provide you some quick wins to speed up your website to satisfy your users and Googlebot.

Published in: Marketing
  • Be the first to comment

20 quick wins to improve your website speed

  1. 1. 1#seocamp @LoukilAymen Quick-wins to speed up your website
  2. 2. That Business Study Design Development Oh wait it is f*** slow @LoukilAymen
  3. 3. “Our new branding is 7 custom font ! It will rock ! ” - Designer @LoukilAymen
  4. 4. @LoukilAymen “We should implement a slider to increase our conversion !!” - Rockstar Designer
  5. 5. @LoukilAymen “I found and integrated 3 NPM useful packages for sorting feature !!” - Web developer
  6. 6. @LoukilAymen “We must accelerate! The new version of the site must be ready next Thursday for the investors...” - CEO / Co-founder
  7. 7. 1-Web performance as a culture It must be fast. @LoukilAymen Business Study Design Development
  8. 8. Fix a performance Budget @LoukilAymen
  9. 9. Our budget consumption quota 600Kb max, 35 request, 300kb of JavaScript
  10. 10. Global performance budget IMAGES CSS JavaScript Number of requests
  11. 11. 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
  12. 12. @LoukilAymen
  13. 13. web performance could be impacted by Server Network Images Fonts CSS JavaScript 3rd party scripts HTML @LoukilAymen
  14. 14. 3-Less is more - Code coverage Chrome Console > Audits > Coverage @LoukilAymen
  15. 15. 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
  16. 16. 5-Gzip compression Original size Compressed size (divided by 4) @LoukilAymen
  17. 17. 5- Gzip compression - Never Gzip an already compressed asset - Don’t Gzip tiny or big files => overhead ! @LoukilAymen
  18. 18. 6-Images compression https://imageoptim.com https://compressjpeg.com/ https://saerasoft.com/caesium/ @LoukilAymen
  19. 19. @LoukilAymen
  20. 20. 7-Try new images formats WebP 30% less size then JPEG et PNG https://developers.google.com/speed/webp/ @LoukilAymen
  21. 21. Reduced browser support https://caniuse.com/#feat=webp @LoukilAymen
  22. 22. 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
  23. 23. 8-Expire headers cache Reduce the number of requests starting from the second visit @LoukilAymen
  24. 24. 9- Switch to HTTP/2 https://fr.slideshare.net/TomAnthony/an-introduction-to-http2-for-seos @tomanthonyseo @LoukilAymen
  25. 25. 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
  26. 26. 11- Set up a CDN
  27. 27. 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
  28. 28. Critical [Above the fold] Non critical [Below the fold] @LoukilAymen
  29. 29. 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
  30. 30. 14-Javascript loading strategies @LoukilAymen
  31. 31. Useful for what ? @LoukilAymen
  32. 32. 15-Prefetch the Next page ! <link rel="prefetch" href="/my-next-page.html" as=”html”> @LoukilAymen
  33. 33. 16- Custom fonts loading strategies @LoukilAymen Open your CSS, CTRL+F “font-face”, add: font-display:optional; (or Fallback)
  34. 34. Houston Airport and luggage delivery @LoukilAymen
  35. 35. 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
  36. 36. 17- Perceived performance Animated : +6% faster Animated and accelerated: +12% faster @LoukilAymen
  37. 37. 18-Tools and KPIS @LoukilAymen
  38. 38. 19-Exploit the RUM data (CrUX) https://github.com/AymenLoukil/Chrome-user-experience-report-queries @ab80 @LoukilAymen Check queries
  39. 39. Benchmark, compare @LoukilAymen
  40. 40. Competitive edge on performance https://www.aymen-loukil.com/blog/top-sites-ecommerce-performance-2018/
  41. 41. Follow the evolution in time
  42. 42. 20 - Optimize now ! @LoukilAymen
  43. 43. Aymen Loukil #TechnicalSEO #entrepreneur #speaker #ex-dev https://www.aymen-loukil.com @LoukilAymen

×