Post on 16-Apr-2017
Site Speed for Content Marketers
Tom Bennet. Senior SEO Consultant. tom@builtvisible.com tomcbennet
Why does site speed matter?
Just ask your users…
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)
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
What can I do about it?
“80-90% of the end-user response time is spent on the frontend. Start there.”
- Steve Souders
Page Size
Source: http://httparchive.org/interesting.php
Total: 2.3mb
(Almost) Live Demo
Yahoo YSlow + Google PageSpeed rulesets
Images
680px
1024px
JPEG, 95%
680px
1024px
PNG
Original
Image Optimizati
on
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
Fonts
Icon Font (93kb – 166kb)
Inline SVG(~1kb)
Read more: https://css-tricks.com/icon-fonts-vs-svg/
Original
Image Optimizati
on
Font Optimizati
on
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.
Scripts & Stylesheets
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.
253kb
84kb
Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer
Original
Image Optimizati
on
Font Optimizati
on
Script Minificatio
n
Scripts: Things to Consider1) 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
Gzip
Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text-compression-with-gzipInstructions - Apache, Nginx, IIS.
bootstrap-3.1.1.min.css
98 KB gzip 17 KB
83% saving
Original
Image Optimizati
on
Font Optimizati
on
Script Minificatio
n
Gzip
What about mobile?
1024px
640px1920px
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
Original version
Optimized version
Mobile version
(responsive
images)
Challenges
“Performance more often comes down to a cultural challenge, rather than simply a technical one.”
- Lara Hogan
On culture: http://designingforperformance.com/changing-culture/
Prefetch / prerender – Do your users follow predictable navigation paths?
Tip of the iceberg…
Thank you.
Tom Bennet. Senior SEO Consultant. tom@builtvisible.com tomcbennet