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.

Brighton SEO - Site Speed for Content Marketers

10 501 vues

Publié le

Slide deck from my Brighton SEO presentation on 22nd April 2016.

Publié dans : Technologie

Brighton SEO - Site Speed for Content Marketers

  1. 1. Site Speed for Content Marketers Tom Bennet. Senior SEO Consultant. tom@builtvisible.com tomcbennet
  2. 2. Why does site speed matter?
  3. 3. Just ask your users…
  4. 4. Every 1 second of improvement = Up to a 2% conversion increase. Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/ Source: https://www.thinkwithgoogle.com/articles/speed-is-key-optimize-your-mobile-experience.html Reduced page load time by 2.2 seconds = Downloads increased by 15.4% (10 million+ downloads per year)
  5. 5. Today we're including a new signal in our search ranking algorithms: site speed. Like us, our users place a lot of value in speed. We use a variety of sources to determine the speed of a site relative to other sites. (April 2010) Source: https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
  6. 6. What can I do about it?
  7. 7. “80-90% of the end-user response time is spent on the frontend. Start there.” - Steve Souders
  8. 8. Page Size Source: http://httparchive.org/interesting.php Total: 2.3mb
  9. 9. (Almost) Live Demo
  10. 10. Yahoo YSlow + Google PageSpeed rulesets
  11. 11. Images
  12. 12. 680px 1024px JPEG, 95% 680px 1024px PNG
  13. 13. Original Image Optimization
  14. 14. 1) Format & Compression– JPEG for photos, PNG for images with fewer colours / transparency. Balance file size & aesthetics. 2) Dimensions – What is the maximum width and height at which the image will be displayed? 3) Replacements – “The fastest HTTP request is the one not made.” Aim to use fonts for text, vector graphics for logos and shapes, and CSS effects (shadows, gradients, etc.) wherever possible. Images: Things to Consider Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
  15. 15. Fonts
  16. 16. Icon Font (93kb – 166kb) Inline SVG (~1kb)
  17. 17. Read more: https://css-tricks.com/icon-fonts-vs-svg/
  18. 18. Original Image Optimization Font Optimization
  19. 19. Fonts: Things to Consider Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization 1) Typefaces, Weights, Styles – How many are necessary? Weigh aesthetics against added requests. 2) Hosting – By using externally hosted fonts (such as Google Fonts or Typekit), there is a greater chance your visitor will already have the file cached.
  20. 20. Scripts & Stylesheets
  21. 21. jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8. 253kb 84kb
  22. 22. Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding- and-transfer
  23. 23. Original Image Optimization Font Optimization Script Minification
  24. 24. Scripts: Things to Consider 1) Unnecessary scripts – Clunky social sharing plugins, etc. 2) Minify + concatenate – Make this a part of your build process. Don’t use development versions of scripts on live site. 3) Caching – Calling popular scripts like jQuery from a CDN increases chances of caching. 4) Placement – Investigate your critical rendering path. Read more: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with- javascript
  25. 25. Gzip
  26. 26. Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize- encoding-and-transfer#text-compression-with-gzip Instructions - Apache, Nginx, IIS. bootstrap-3.1.1.min.css 98 KB gzip 17 KB 83% saving
  27. 27. Original Image Optimization Font Optimization Script Minification Gzip
  28. 28. What about mobile?
  29. 29. 1024px640px 1920px
  30. 30. Read more: https://builtvisible.com/responsive-images-for-busy-people-a-quick-primer/ WordPress: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/ Responsive images with srcset
  31. 31. Original version Optimized version Mobile version (responsive images)
  32. 32. Challenges
  33. 33. “Performance more often comes down to a cultural challenge, rather than simply a technical one.” - Lara Hogan On culture: http://designingforperformance.com/changing-culture/
  34. 34. Prefetch / prerender – Do your users follow predictable navigation paths?
  35. 35. Tip of the iceberg…
  36. 36. Thank you. Tom Bennet. Senior SEO Consultant. tom@builtvisible.com tomcbennet