https://www.authoritas.com/brightonseo/ Tom Bennet – BrightonSEO April 2016: Site Speed for content Marketers

1. Site Speed for Content Marketers
Tom Bennet. Senior SEO Consultant.
tom@builtvisible.com tomcbennet

2. Why does site speed matter?

3. Just ask your users…

4. Every 1 second of improvement
=
Up to a 2% conversion increase.
Source: Radware. State of the Union: Ecommerce Page Speed & Web Performance [2015]
Reduced page load time by 2.2 seconds
=
Downloads increased by 15.4%
(10 million+ downloads per year)

5. “57% of consumers will abandon a page
that takes longer than 3 seconds to load.”
Source: Radware. State of the Union: Ecommerce Page Speed & Web Performance [2015]

6. 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

7. What can I do about it?

8. “80-90% of the end-user response time
is spent on the frontend. Start there.”
- Steve Souders

9. Waterfall Diagrams
Source: http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

10. Page Size
Source: http://httparchive.org/interesting.php
Total: 2.3mb

11. (Almost) Live Demo

14. YSlow + Google PageSpeed rulesets

16. Images

18. 680px
1024px
JPEG, 95%
680px
1024px
PNG

19. Original
Image
Optimization

20. 1) Appropriate format – JPEG for photos, PNG-8 or PNG-24 for
images with fewer colours / transparency.
2) Compression – Balance file size & aesthics. Also try out
services like smush.it and TinyPNG.
3) Dimensions – What is the maximum width and height at which
the image will be displayed?
4) 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

21. Fonts

26. Icon Font
(93kb – 166kb)
Inline SVG
(~1kb)
Read more: https://css-tricks.com/icon-fonts-vs-svg/

27. Read more: https://css-tricks.com/icon-fonts-vs-svg/

28. Original
Image
Optimization
Font
Optimization

29. Fonts: Things to Consider
Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
1) How many? – Which typefaces are necessary? Weigh
aesthetics against added requests.
2) Fonts & Weights – How many different styles do you need?
3) Hosting – By using externally hosted fonts (such as Google fonts
or Typekit), there is a greater chance your visitor will already
have the required file cached.

30. Scripts & Stylesheets

32. jQuery 2.x has the same API as jQuery 1.x,
but does not support Internet Explorer 6, 7, or 8.
253kb
84kb

33. Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-
and-transfer

34. Original
Image
Optimization
Font
Optimization
Script
Minification

35. 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

36. Gzip

37. Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-
encoding-and-transfer?hl=en#text-compression-with-gzip
bootstrap-3.1.1.min.css
98 KB gzip 17 KB
83% saving

38. Original
Image
Optimization
Font
Optimization
Script
Minification
Gzip

39. Gzip: Things to Consider
1) Implement it! Huge gains for text-based files.
2) Instructions - Apache, Nginx, IIS. Alternatively, check out
HTML5 boilerplate config files.

41. What about mobile?

42. 680px
1920px
JPEG

43. 1024px640px 1920px

44. 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

45. Original
version
Optimized
version
Mobile
version
(responsive
images)

46. Mobile Considerations
1) Mobile first – Mobile is the primary means of accessing the
internet for millions of people.
2) Selectively load resources – Responsive images, but also
selective use of fonts.
3) Live testing - Emulate / test mobile devices and connection
speed. Ensure that only the required content is being loaded at
each breakpoint.

47. Workflow

48. “Performance more often comes down to a cultural
challenge, rather than simply a technical one.”
- Lara Hogan
On culture: http://designingforperformance.com/changing-culture/

49. Prefetch / prerender – Do your users follow
predictable navigation paths?

50. Tip of the iceberg…

51. Thank you.
Tom Bennet. Senior SEO Consultant.
tom@builtvisible.com tomcbennet