Tom started his presentation with a question:
“Does site speed matter?”
Well, he said, just ask your audience. Slow speeds are annoying at best, restrictive at worst.
Walmart found for every 1 second of improvement, their website conversion rate increased by 2%.
Google added site speed to its algorithm in 2010. It doesn’t measure against a concrete benchmark; rather, your site is compared to your competitors all the time, so you need to be working on your site speed all the time to stay ahead.
“What can I do about it?”
Steve Sounders, head performance engineer at Google, said 80% of user response time happens on the front end of your site. Take a look at http://httparchive.org/interesting.php suggests that images are a big drain on site speed.
Of course, we as content marketers often want to include imagery and interactive content into our content pieces. For this reason, we need to be aware of site speed more than anyone else.
Tom provided a (almost) live example of this is progress by creating a typical blog post page with images and copy. It was scored an F on page speed with a load time of 3.9 seconds. He uses GTMetrix to text site speed.
So Tom started his example with his images.
Improving Your Images
As he uploaded them, Tom’s source file is much larger than the maximum size the image will be shown on his site. The images have been saved at 95% quality which is overkill for the web, causing a huge file size.
Another image has been saved as a PNG, which is a loss less format and the file size on that is very large too. Far better to use compressed jpgs.
Once this has been done, Tom’s example site load time comes down by over 1 second.
Things to consider with images:
- Format and compression – use jpegs for photos, PNG for images with fewer colours and transparency. Balance file size and aesthetics. Try Tiny PNG to optimise your PNGs
- Dimensions – don’t upload anything larger than your can use
- Replacements – much faster than loading an image is not to load an image at all, using vector graphics perhaps for logos and shapes, and CSS effects for shadows, gradients and so on, which have a very low performance overhead
Fonts
Like a lot of content marketers, Tom has used Google fonts for his example. A common mistake is to save all of the weights and styles of that font, which slows your site down. You only need to serve the weights and styles that are relevant to your page.
Font Awesome is a very useful icon database, made up of vector icons which can be resized and reused across your site. The benefits are clear; you can drop in the entire library of 600 or so icons into your site and access any of them anywhere on your site.
However, if you do this, this slows your site load time because it’s having to load all those icons for the sake of just two or three that you’re actually using. An alternative to this is to use SVGs, which require much less code and no additional requests. Check out http://css-tricks.com/css-fonts-vs-svg for more information.
Things to consider with fonts:
- Typefaces, weights and styles – how many are necessary? Weigh aesthetics against added requirements
- Hosting – by using externally hosted fonts such as Google Fonts or Typekit, your users only need to cache that font once for all sites which use it
Jquery
Use of minification (the process of stripping out all the unnecessary data) and concatonation (joining all the requests together) should be part of your standard build process.
This will help to reduce your page weight and your load time, and bring down the number of requests required.
Things to consider with scripts:
- Unnecessary scripts e.g. clunky social plugins
- Make minification and concatonation a part of your build process
- Use popular scripts like jQuery from CDN to increase the chances of your user having already cached that content
- Placement – investigate your critical rendering path
Gzip
A back end consideration but such an easy win, you’d be foolish not to use it.
Gzip compresses your website files algorithmically and opens them up at the other end, reducing load time.
When we enable Gzip on our server, we can bring the size of the files down significantly. Gzip is, according to Tom, one of the best improvements you can make to ensure the file types that benefit from compression are being compressed.
With this enabled, you can reduce your page weight and load time, through these simple steps – causing no notable difference to the user experience, other than a faster site.
What about mobile?
Any discussion of site speed would be incomplete without mobile. You’re dealing with different screen sizes, network capabilities and so on.
Using responsive images with srcset (now supported in WordPress 4.4) to give the server the option of which image to render based on the device.
Challenges You’ll Face
Lara Hogan wrote about this at length in her book ‘designing for performance’. Successful implementation of site speed improvements require everyone in the business to know its importance and how they can make a difference – it’s more of a cultural change than anything else.
You can then look out for opportunities like prefetech and prerender, by spotting trends in user behaviour.
Of course, this is just the tip of the iceberg and there’s lots more to learn about site speed. It’s possible to make huge gains just by being aware of the opportunities therein.
