In web analytics, bounce rate is one of the key performance metrics: basically, it shows how many visitors enter your website but then leave (that’s what’s known as “bounce”) as a proportion of the total visitor traffic. In eCommerce and beyond, high bounce rates mean less conversion and ultimately less revenue.
Generally, bounce rate is positively correlated with page load times: the longer it takes to load a page, the higher the chance that the visitor will bounce. Here, the quality and speed of images becomes crucial. Interestingly, images play a central role in reducing the bounce rate. According to Machmetrics, as of late December 2019, the average load time for mobile websites was 11.4 seconds. At the same time, Google’s recommended best practice is to have it below 3 seconds. Google analysts also estimated how page load times correlate with the bounce rate, and the result is stunning:
The proportion of bounce rate increase with different page load times
Generally, the faster the site, the more conversions you get, and the smaller the bounce rate. Faster images also make for a better UX, and help search engines rank you higher.
Right, but what exactly is loading there for as long as 11 seconds? The best answer is “stuff.” There are factors specific to each case, but we know that roughly up to two-thirds of that stuff is represented by images. Since our example was about mobile retail, graphic elements would include favicons, backgrounds, logos, product images, etc.
Basically, optimizing image content gets you about 70% of your site load speed issues resolved. This article will help you master images with Uploadcare CDN and get up to a 9x decrease in image load time.
Before we begin, let’s discuss a couple of tools to measure image load times.
Icons of tools for measuring image performance
For measuring site load speed locally, we’d recommend using Chrome DevTools.
Tools like Pingdom are a great fit for in-depth load speed analysis.
To see which pages our traffic goes to, we use Google Analytics. It’s also helpful when you need to figure out your bounce rates.
You can also use a tool we built to analyze and optimize image performance called PageDetox. Many pages out there suffer from un- or under-optimized images, and the first step to optimization is processing them with a CDN.
A CDN, or Content Delivery Network, is a large group of servers deployed in many locations across the world. It’s built in such a way that each file can be delivered via any data center on the network. Based on your clients’ locations, the CDN picks servers and uses them to deliver content. Simply put, the closer the server, the better.
An outer-space view of the Earth showing electronic communications networks
Uploadcare partners with Akamai for superior coverage. With its 288K servers, images are delivered at optimal speeds, anywhere. Basically, an image CDN is a concept where an image processing center is paired with a delivery network. All the examples we give in this article work via our CDN.
How do they work? Let’s get our hands dirty. Take an image:
A pineapple in a field
Sized at 3.4 MB, this 5330x3553px JPEG image loads in 1.74 seconds on an LTE-enabled connection. The pic is already delivered via CDN. If you take a look at its URL, you’ll notice there’s a UUID (universally unique identifier):
Taking control over output image dimensions also means managing image sizes. Uploadcare supports a variety of image processing operations with which you can implement a number of diverse transformations, from changing image geometry to pixel manipulations.
The operations are applied to images by simply modifying their URLs. For instance, to put the image in a predesigned layout where its width should not exceed 960 px, simply change the pineapple image URL as follows:
We’ve adjusted the width of our pineapple image, thus making its file size drop to 88.5 KB. It now takes about 318 ms to load the image when measuring locally. That’s almost a 5.5x load time improvement.
Having adapted the image size, there are still plenty of ways of optimizing it further. Consider using the format and qualityCDN API operations. You can also select proper output formats automatically, including WebP.
This also works by modifying the image URL. Let’s get back to our pineapple example:
After the format manipulations, the image size has decreased to 67.7 KB and the loading time has now dropped to 211 ms, showing an 8.3x improvement. But let’s double check: Google Chrome console reports Resource interpreted as Document but transferred with MIME type image/WebP: it worked.
The next step would be improving the image quality:
The size and page load time went down to 36.8 KB in 196 ms. That’s about 8.9x faster than loading the original pineapple. It’s useful to know that when using WebP, visual quality degrades to a lesser extent than image size. Quality hacks can be applied when you aren’t just adjusting to viewing environments, but also accounting for network performance.
Three devices with different screen and viewport sizes
An 8.9x improvement is not the end of the story though. Usually, we design for a whole set of resolutions, screens, and devices, not just laptops. That means you want your layout to adjust to users’ viewing conditions. Nowadays this is a pretty common expectation: for instance, the RICG community is helping developers do it.
We’ve already discussed the step-by-step process of building better responsive images in our recent post. Long story short, here’s what you want to get:
You can find the complete interactive example on Codepen. The code ensures every client gets proper images based on their screen size and orientation. Also, for srcset, you might want to use images resized via CDN: that way you can upload just a single large image and downscale and even crop it as needed.
There’s also another useful hack, even though it’s not about direct image manipulations. Before starting to download resources from a website, your browser needs to translate its domain name to an IP address. Only then will the browser be able to download any content. Of course, this takes time.
You can explicitly tell your browser an address to get all the resources from, thus helping resolve the domain name issue as quickly as possible. Simply add this to the <head> section of your page:
<linkrel="dns-prefetch"href="//ucarecdn.com">
Then, when your browser requests a file from our CDN, it will no longer have to wait for the DNS lookup. See DNS prefetch browser support for more details.
We’ve just achieved an impressive ~9x load time improvement by using our CDN API for images alone. While the exact numbers will vary depending on your location, it’ll still be a massive improvement.
What to do next? You can always check out our extensive CDN API documentation to learn more about optimization options, and experiment with your existing images. If you don’t have an account yet, you can create a free one, where you can upload some images directly via your dashboard, widget or API, and run some tests. This will give you a good understanding of the extent to which your image content can be optimized.
If you’re just curious about processing this or that image, visit this quick start page for simple testing. Once your images are hacked to the max, you’ll have about two-thirds of your load time problems solved.
