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.

Site speed for content marketers

404 views

Published on

The longer the time it takes to load your site, the smaller the chances are that people will stick around to view your content. Tom Bennet takes us through a detailed series of updates you can make to improve your site's speed and retain more customers for longer.

Published in: Technology
  • Be the first to comment

Site speed for content marketers

  1. 1. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Site Speed for Content Marketers Tom Bennet | Head of Product Development | tom@builtvisible.com
  2. 2. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Why does site speed matter? Tom Bennet | Head of Product Development | tom@builtvisible.com
  3. 3. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Just ask your users… Tom Bennet | Head of Product Development | tom@builtvisible.com
  4. 4. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Every 1 second of improvement = Up to a 2% conversion increase. Reduced page load time by 2.2 seconds = Downloads increased by 15.4% (10 million+ downloads per year) Source: https://www.thinkwithgoogle.com/articles/speed-is-key-optimize-your-mobile-experience.html Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
  5. 5. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com 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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential What can I do about it? Tom Bennet | Head of Product Development | tom@builtvisible.com
  7. 7. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential “80 – 90% of the end-user response time is spent on the frontend. Start there.” - Steve Souders Tom Bennet | Head of Product Development | tom@builtvisible.com
  8. 8. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Page Size Total: 2.3mb
  9. 9. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential (Almost) Live Demo Tom Bennet | Head of Product Development | tom@builtvisible.com
  10. 10. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  11. 11. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  12. 12. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Yahoo YSlow + Google PageSpeed rulesets
  13. 13. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  14. 14. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Images Tom Bennet | Head of Product Development | tom@builtvisible.com
  15. 15. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  16. 16. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com 680px 1024px JPEG, 95% 680px 1024px PNG
  17. 17. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Original version Image optimization
  18. 18. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Images: things to consider 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. Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image- optimization
  19. 19. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Fonts Tom Bennet | Head of Product Development | tom@builtvisible.com
  20. 20. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  21. 21. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  22. 22. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  23. 23. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Icon Font (93kb – 166kb) Inline SVG (~1kb)
  24. 24. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Read more: https://css-tricks.com/icon-fonts-vs-svg/
  25. 25. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Original version Image optimization Font optimization
  26. 26. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Fonts: things to consider 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.
  27. 27. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Scripts & Stylesheets Tom Bennet | Head of Product Development | tom@builtvisible.com
  28. 28. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  29. 29. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8. 253kb 84kb
  30. 30. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content- efficiency/optimize-encoding-and-transfer
  31. 31. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Original version Image optimization Font optimization Script minification
  32. 32. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com 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. Scripts: things to consider Read more: https://developers.google.com/web/fundamentals/performance/critical- rendering-path/adding-interactivity-with-javascript
  33. 33. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Gzip Tom Bennet | Head of Product Development | tom@builtvisible.com
  34. 34. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com bootstrap-3.1.1.min.css 98 KB gzip 17 KB 83% saving Read more: https://developers.google.com/web/fundamentals/performance/optimizing- content-efficiency/optimize-encoding-and-transfer#text-compression-with-gzip Instructions: Apache | Nginx | IIS
  35. 35. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Original version Image optimization Font optimization Script minification Gzip
  36. 36. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com
  37. 37. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential What about mobile? Tom Bennet | Head of Product Development | tom@builtvisible.com
  38. 38. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com 640px 1024px 1920px
  39. 39. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Responsive images with srcset 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/
  40. 40. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Original version Optimized version Mobile version (responsive images)
  41. 41. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Challenges Tom Bennet | Head of Product Development | tom@builtvisible.com
  42. 42. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential “Performance more often comes down to a cultural challenge, rather than simply a technical one.” - Laura Hogan Tom Bennet | Head of Product Development | tom@builtvisible.com On culture: http://designforperformance.com/changing-culture/
  43. 43. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Prefetch / prerender – Do your users follow predictable navigation paths?
  44. 44. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tip of the iceberg… Tom Bennet | Head of Product Development | tom@builtvisible.com
  45. 45. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential Tom Bennet | Head of Product Development | tom@builtvisible.com Thanks!

×