Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

20 quick wins to improve your website speed

701 visualizaciones

Publicado el

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

Publicado en: Marketing
  • Sé el primero en comentar

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

×