Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
1#seocamp @LoukilAymen
Quick-wins to speed up your website
That
Business Study Design Development
Oh wait it is f*** slow
@LoukilAymen
“Our new branding is 7 custom font ! It
will rock ! ” - Designer
@LoukilAymen
@LoukilAymen
“We should implement a slider to
increase our conversion !!” - Rockstar Designer
@LoukilAymen
“I found and integrated 3 NPM useful
packages for sorting feature !!” - Web
developer
@LoukilAymen
“We must accelerate! The new version
of the site must be ready next Thursday
for the investors...” - CEO / Co...
1-Web performance as a culture
It must be fast.
@LoukilAymen
Business Study Design Development
Fix a performance Budget
@LoukilAymen
Our budget consumption quota
600Kb max, 35 request, 300kb of JavaScript
Global performance budget
IMAGES
CSS
JavaScript
Number of requests
2-Before install a new add-on / lib
● It loads many scripts ?
● It increases the DB queries number ?
● It make calls to ex...
@LoukilAymen
web performance could be impacted by
Server
Network
Images
Fonts
CSS
JavaScript
3rd party scripts
HTML
@LoukilAymen
3-Less is more - Code coverage
Chrome Console > Audits > Coverage
@LoukilAymen
4-Avoid redirections
site.com => m.site.com/home
site.com => www.site.com => https://www.site.com
site.com => www.example....
5-Gzip compression
Original size Compressed size
(divided by 4)
@LoukilAymen
5- Gzip compression
- Never Gzip an already compressed asset
- Don’t Gzip tiny or big files => overhead !
@LoukilAymen
6-Images compression
https://imageoptim.com
https://compressjpeg.com/
https://saerasoft.com/caesium/
@LoukilAymen
@LoukilAymen
7-Try new images formats WebP
30% less size then JPEG et PNG
https://developers.google.com/speed/webp/
@LoukilAymen
Reduced browser support
https://caniuse.com/#feat=webp
@LoukilAymen
Solution : Switch between WEBP and classic formats
.htaccess
RewriteEngine On
RewriteBase /
# Le navigateur supporte il le...
8-Expire headers cache
Reduce the number of requests starting from the second visit
@LoukilAymen
9- Switch to HTTP/2
https://fr.slideshare.net/TomAnthony/an-introduction-to-http2-for-seos
@tomanthonyseo
@LoukilAymen
10-Speedup DNS resolution
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.goo...
11- Set up a CDN
12-CSS - best practices
- Fewer lines is better !
- Minify the code (https://cssminifier.com/)
- don’t @import
- Delete un...
Critical
[Above the fold]
Non critical
[Below the fold]
@LoukilAymen
13-Critical CSS
https://jonassebastianohlsson.com/criticalpathcssgenerator/
Copy + paste inline <head>
8686 characters sur...
14-Javascript loading strategies
@LoukilAymen
Useful for what ?
@LoukilAymen
15-Prefetch the Next page !
<link rel="prefetch" href="/my-next-page.html" as=”html”>
@LoukilAymen
16- Custom fonts loading strategies
@LoukilAymen
Open your CSS, CTRL+F “font-face”, add: font-display:optional; (or Fallba...
Houston Airport and luggage delivery
@LoukilAymen
Houston Airport and luggage delivery
1- Walk 1 minute and wait for 7 minutes => many customers claims
2- Take the elevator...
17- Perceived performance
Animated : +6% faster
Animated and accelerated:
+12% faster
@LoukilAymen
18-Tools and KPIS
@LoukilAymen
19-Exploit the RUM data (CrUX)
https://github.com/AymenLoukil/Chrome-user-experience-report-queries
@ab80
@LoukilAymen
Che...
Benchmark, compare
@LoukilAymen
Competitive edge on performance
https://www.aymen-loukil.com/blog/top-sites-ecommerce-performance-2018/
Follow the evolution in time
20 - Optimize now !
@LoukilAymen
Aymen Loukil
#TechnicalSEO #entrepreneur #speaker #ex-dev
https://www.aymen-loukil.com @LoukilAymen
20 quick wins to improve your website speed
Prochain SlideShare
Chargement dans…5
×

20 quick wins to improve your website speed

737 vues

Publié le

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

Publié dans : Marketing
  • Soyez le premier à commenter

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

×