Make your website faster, and greener at the same time!

 

When it comes to websites, faster is better.

1. When your website is faster, your customers have better experiences, and spend more money. [1]

2. Improving your website efficiency can also boost your Google ranking. [2]

3. Faster websites are more efficient websites. More efficient websites are better for the planet.

So, here are a few tricks for speeding up your site.

 

Use images intentionally, and always compress them.

Compared to text, images take a lot more resource to load; an average image is equivalent to more than 6000 words, or around 8 pages of text.[3] Using a lot of images can slow down your web page considerably, especially on mobile devices with slow networks. So consider each image carefully, they are more than just decoration.

Before uploading images to your website or CMS, run them through a compression tool like Short Pixel, Tiny PNG, or ImageOptim. (There are also plenty of plugins that compress images when you upload them to your site.)

There are many other ways of cleverly reducing image size, including: reducing the height & width, blurring unnecessary parts of the image, and making them greyscale. You can see a rough guide to size hierarchy below.

Finally, make sure you're using the right file format. For photographs, your best bet is usually a JPEG. For simple images that use blocks of colour, use PNGs or GIFs. And for animations, use MP4s.

(There are other, newer file types for images, like WEBP and AVIF that deliver better compression, but they don't work on all browsers, so you should check that they will work on your users’ devices before switching.)

 

What about videos?

Videos are lots of images strung together, so it isn’t surprising that video files are many times larger than images.

Like images, they should be used selectively.  You could also consider replacing videos with animations, which can be compressed to a fraction of the size with minimal quality loss.

Where you must include videos, we recommend you use embedded players, like YouTube or Vimeo, combined with lazy loading to deliver the most efficient on-page experience. While a browser's built-in player may be more light-weight, using a large-scale video service like YouTube lets you take advantage of their network scale and compression algorithms.

Finally, avoid auto-playing videos when your page loads. You will lose the benefit of lazy loading (and therefore increase your load time & page weight), and you may annoy your users who might not want to watch the video.

 

Optimise your type files

Just like everything else you load on a web page, font files take up precious space. And just like everything else, they can be optimized for performance. [4]  Here are a ways to reduce the size / impact of your typefaces:

1. Use a system font over a custom font. This means that you let your user’s device determine the typeface on your web-page. You have less control over the look and feel, but it means there is no type file to load, so your page can be ultra lightweight.

2. If using a custom font, limit the number of custom fonts & font weights you use. More fonts to load = more page weight = longer load time.

3. If using a custom font host it yourself, don’t use an external provider like Adobe Fonts to load it. With externally hosted fonts, your web page may have to make several calls to the provider before loading the type, and that takes time!

4. Use the right file type (likely WOFF2), and remove unnecessary glyphs with FontSquirrel.

 

Implement lazy loading

When you load a web page, you only see the top to start with. As you scroll, you see the rest. When your computer loads a web page, it loads the whole thing all at once. 

Pages with a lot of content can take a long time to load, but every additional tenth of a second sends users packing [1]. This can be particularly frustrating if a browser takes time to load an image at the bottom of a page, where only a fraction of users will ever scroll. 

The solution? Load page elements as a user scrolls to them, AKA "lazy loading". This means users can interact with your page more quickly, and you only load the things you need.

There are a variety of ways to implement this technique, and it can be applied to images, videos, and even JavaScript (though that gets a bit more technical). 

 

To conclude:

Faster webpages are better for your customers, better for your business, and better for the planet.

You can improve your page speed by optimizing your images, videos, and typefaces, and using lazy loading.

Since customers are increasingly looking to businesses to be greener, there is even more reason to improve your digital real-estate. In the wake of Monday’s stark report on climate change from the IPCC, I expect that trend to accelerate.

 

References:

[1] https://blog.optimizely.com/2016/07/13/how-does-page-load-time-impact-engagement/

[2] https://developers.google.com/search/blog/2020/05/evaluating-page-experience

[3] We used Assuming the image is 38KB, which is pretty small.

[4] Tom & Josh from Wholegrain Digital have written an excellent article about font optimisation specifically. https://www.wholegraindigital.com/blog/performant-web-fonts/

Special thanks this week go to Chris Butterworth and Scott Evans from the ClimateAction.Tech Slack group for their thoughts on using embedded vs native video players.

Header illustration by designer Leah Simpson.