Más contenido relacionado La actualidad más candente (20) Similar a Site speed for content marketers (20) Site speed for content marketers1. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Site Speed for Content
Marketers
Tom Bennet | Head of Product Development | tom@builtvisible.com
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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Just ask your users…
Tom Bennet | Head of Product Development | tom@builtvisible.com
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. © 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. © 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. © 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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Page Size
Total: 2.3mb
9. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
(Almost) Live Demo
Tom Bennet | Head of Product Development | tom@builtvisible.com
10. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
11. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
14. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Images
Tom Bennet | Head of Product Development | tom@builtvisible.com
15. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Original version
Image optimization
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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Fonts
Tom Bennet | Head of Product Development | tom@builtvisible.com
20. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
21. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
22. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
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. © 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. © 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. © 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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Scripts & Stylesheets
Tom Bennet | Head of Product Development | tom@builtvisible.com
28. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
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. © 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. © 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. © 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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Gzip
Tom Bennet | Head of Product Development | tom@builtvisible.com
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. © 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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
37. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
What about mobile?
Tom Bennet | Head of Product Development | tom@builtvisible.com
38. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
640px 1024px 1920px
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. © 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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Challenges
Tom Bennet | Head of Product Development | tom@builtvisible.com
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. © 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. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tip of the iceberg…
Tom Bennet | Head of Product Development | tom@builtvisible.com
45. © Copyright 2017 Builtvisible. All rights reserved. Private and Confidential
Tom Bennet | Head of Product Development | tom@builtvisible.com
Thanks!