Why Your Website Is Slow: Image Load Performance
Your website is slow, and you’re wondering why. Slow-loading images could be the problem. Here’s how to find out if it’s what’s ailing you – and your website visitors!
Convinced it’s not your images? Check out our other posts: Why Your Website is Slow: Poor JavaScript Performance and Why Your Website is Slow: Poor First/Last Byte Performance.
Images make a web page. There, we said it.
Being website performance freaks, as we all are at Yottaa, we sometimes wish webpages still looked (and performed) more like this – the first webpage in the history of the web. (It loads in about .5 seconds). But we’re not that crazy. We know that effective webpages have to look great, and images play a huge role in that.
We also know that images play an equally big role in degrading performance. As you increase the number and size of images on your webpages, load time increases.
If you’re struggling with slow website performance, your collection of images could be one of the biggest contributing factors. Here’s how to find out if it is.
How do I know if slow-loading images are a problem?
To find out if slow-loading images are dragging down your site, run a website performance test at WebPageTest.org. Just plug in the URL for your home page and hit “Test” – that simple! The results of a performance test will tell you everything you need to know about the content on that webpage, including how fast each individual asset (such as a single image) downloads and renders. Consider also running separate tests for any other highly trafficked webpages, or pages that you know have more images than others. If you run an eCommerce website, your catalog pages may have more images than your home page – those would be good pages to test.
What to look for in page speed test results.
The most basic stats when looking at image load performance are the totals for how many images are on the page, and how heavy (i.e. how many bytes) the images are in aggregate. Each factors into performance. More individual images means more trips back and forth to the server, and each trip takes time. More weight means the browser takes longer to process the images once they arrive, slowing down the rendering process.
To see your image totals, look to the “Content Complexity” section of the test results summary.
To make sense of these numbers, you’ll want to compare what you see in the summary to averages from across the entire Internet. In a test of tens of thousands of websites, we’ve found that the averages for number and weight of images are as follows:
Where does your website land for image count and total image size?
- If your site’s image totals are around the median, you will absolutely benefit from image optimization, but there could be other bottlenecks doing more to slow down your website.
- If your numbers are higher than the median, optimizing images should be a big priority. They’re probably slowing down your website considerably.
- If have more than 68 images (or more than 1,476,038 bytes) you?re in the dubious company of the bottom 10 percent of all sites on the web for images. If this is the case, optimizing your images will vastly improve your page load time.
Examining images up close: Case-by-case image optimization.
Whatever you found in aggregate, there is more opportunity for investigating image performance. Even if your site is in a top percentile for images, taking a look at individual images can point out some major problems, ones that are often easy to fix.
Each summary page in WebPageTest.org includes a waterfall chart. This shows the download process of the page, including every asset on the page in the order they downloaded, and how long each took to download (represented by the bars in the right side column). If you have a particularly complex page, it may help to sort the chart by asset type, so you can see .png, .jpg or .gif images separate from the clutter.As you peruse the images on your page, look for longer bars, which indicate a long load time for the asset. If one sticks out from the rest, it should be investigated.
When you find an image that sticks out, click on the line in the waterfall to see more information about it. If you’re not sure which image it is, the link will open it.
Looking at the metrics for the asset download reveal if the problem is on the backend or the front end. A long Waiting Time, or long Time to First Byte, indicate a slow web server. A long Time to Last Byte means it’s taking the browser a long time to process and render the image, meaning that the image itself is large.
You found your website problem areas. Now what?
If slow-loading images seem to be a problem for performance on your site, you’re in luck. There are numerous and well-documented techniques to improve image optimization. Here are a few of the ways you can optimize your image performance. (Click the links for more info).
- Get rid of images! Ask yourself: “Is this image crucial to the user experience of my site? If not, why is it there?
- Make sure your images are the right size. Believe it or not, many pages load huge images that only display in a tiny pixel window. Resizing the images to fit the display size can save a ton of page weight and speed up load time.
- Lossless compression: This is a no-brainer. In this form of compression, your images stay the same quality, but get a little smaller in file size. This is accomplished by saving images with the right compression setting in Photoshop, or using online image compression tools.
- Lossy compression: This means trading some image quality for A TON of compression. Don’t be too quick to dismiss the idea of lowering quality: images on the web often don’t actually display at the max resolution they’re able to, meaning you can afford to lop off some of pixels and the visitor won’t see any difference. After lossy compression, images have a fraction of their original weight.
- Sprites and Data URIs: these are methods of trimming down the number of individual images on the page by either grouping small images together into a single image (a sprite) or embedding images into an HTML document (via Data URl).
If you choose to experiment with any these techniques, be sure to perform some extra baseline tests – that way you can see exactly how much faster you’ve made your site!
Not convinced? Check out our image optimization experiment
We wanted to see for ourselves how much faster we could speed up a website doing basic, manual image optimization. (Our Yottaa Site Optimizer product does a full battery of image optimization automatically, and we already know how well that works). In the test we took a website that was fully optimized, except for the images. After resizing the images to fit their display size, and doing a reasonable level of lossy compression, the page load time went from 6 seconds to 1.8 seconds! Click here to read the whole post on the test.
