The truth is that these page speed articles are great for helping identify areas you might have missed. But they don’t understand the context of your website, so they can’t deliver on all of their promises.
Unpicking the page speed myth
This isn’t to say that page speed isn’t important. After all, no-one wants to wait a long time for your website to load. But rather than focusing on “page speed”, which doesn’t tell the whole story, it’s better to focus on “Time To Interactive” or TTI, which can sometimes be called “perceived page speed”.
TTI is how quickly a user can start interacting with a website. This means that, if a user can see the product information clearly and use the most important functionality of that page within half a second, but the rest of the content takes 20 seconds to fully load, you’re doing well.
Should you compress images?
Nearly everything written online will tell you to compress and resize your images. It’s definitely a quick way to reduce your TTI, but it’s not always appropriate. If you’re running a blog about drain pipe installations, having standard definition images might be absolutely fine.
But what if you’re showcasing high-end artwork? Portfolio pieces? Photography? You’re going to want these to look their best, which means you’ll have to upload images five times the size needed for a standard computer in order for them to look good on an Apple iMac with a 5k screen, for instance.
But having such large images means large files to download, making your TTI longer. So what can you do?
You can still run lossless compression on these images to remove any extra data. For example, metadata such as “This photo was taken by a Canon 5D” increases the file size without adding any value.
Additionally there are systems that run “lossless compression” by analysing the colours and the image itself, and adjusting accordingly. One of the leading tools offering this is TinyPNG (they have a JPG version too). TinyPNG has an API and Web app, so you can do them on the fly as you write content, or hook it up to your CMS to automatically optimise them. Even better, TinyPNG offers 500 free compressions a month!
Optimising your images isn’t enough, though, which is why you should then adopt a process called “lazy loading”. This is the process of only loading images when they appear on the user’s screen.
This means if you have 10 high resolution images on the page, they will only load when the user starts to interact with them. It’s the simplest way to quickly reduce page load time while maintaining high-quality imagery.
You can go even further by providing a much smaller version of the original image, blown up so it’s blurry, which is then replaced by the full resolution version once it loads, giving users the impression of a faster page load.
There are other techniques you can mix in that let you serve different images for different screen sizes and resolutions, but this can involve a lot of work. So although it’s recommended you try and invest in this, it will not get you the same TTI as focusing on lazy loading.
Image file formats
In addition to lazy loading, a key skill to have as a designer, developer or content manager is the ability to know which file format you should use and when.
When to PNG
When your image contains transparency, is not a square/rectangle and contains bitmap data e.g. a cut out of a head shot.
- Pros: Transparency, high quality
- Cons: Larger file sizes
When to JPG
When your image contains purely bitmap data e.g. a photo of a sunny beach.
- Pros: High quality, potentially small file sizes
- Cons: No transparency
When to GIF
When you need a tiny animation or have a limited colour pallet, e.g. 10 colours or less.
- Pros: Supports animation, small file size
- Cons: Basic transparency, large file sizes if too many colours are used.
When to SVG
When your image contains no bitmap data or contains text you want indexed by search engines.
- Pros: Supports animation, tiny file size, transparency, completely scalable, can be changed via CSS, text can be indexed by search engines
- Cons: No bitmap data
When to WEBP
When you want smaller file sizes than PNG, JPG, or GIF. Unfortunately, WEBP is a new format that isn’t supported by all browsers, including Internet Explorer and Safari.
- Pros: Supports animation, small file size, transparency, could replace PNG, JPG, and GIF
- Cons: Not supported by all browsers
Below you can see the exact same image, just saved in different formats with lossless compression applied - You can see the big differences between them, so make sure you pick wisely.
More to come
By optimising the images on your website, you could see some immediate improvements to your TTI. In the second part of this series, we’ll be looking at how server optimisations can reduce your TTI even further.