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.

Brighton SEO - Site Speed for Content Marketers

9,864 views

Published on

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

Published in: Technology

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

×