Lightening the load
Images are by far the greatest bottleneck for performance on the web. As a site grows, and gains visual complexity over time, it can become increasingly sluggish and start to underperform. A slow to respond site or application can be much more detrimental to your user base than you might initially expect. In the following post we look at what you can do to increase your reach to those people on slower connections and how to satisfy your users by ensuring your site or app loads within an acceptable time frame.
Loading, please wait…
In 2021 the average time to load for a 3G site was 19 seconds.
If we look at the average session time of a site that loads in 19 seconds vs a more acceptable load time of 3 seconds there is a 70% difference. That’s right, a site that loads in 3 seconds gets 70% longer average session times than a site that loads in 19 seconds. If we then look at the actual rate of abandonment after the more acceptable 3 second load time we see that a massive 53% of visits to mobile sites are completely abandoned. The user just gives up.
Now you may be asking yourself “Why are these guys talking about 3G? It’s 2021! 5G is just around the corner. Why does it even matter? My site will load super fast on 5G anyway”. And you would be right. But have you ever considered the number of users around the world with terrible internet connections? Even parts of rural Australia are not capable of receiving a 4G connection. Recent reports show that 46% of global mobile users use 2G and 3G. Countries such as India still have a HUGE number of 3G users. Last year in India the average mobile speed was around 12mb per second whereas in Australia the average mobile speed for 2020 was nearly 80mb. When we then compare the two countries eCommerce markets over the same time period we see that India had a market worth nearly $30 billion in 2020 vs a market of around $19 billion for Australia. That's a massive difference of over $11 billion (source).When looked at like this, speed really does matter. You could be missing out on not only a huge number of users, but also a huge amount of turnover.
It's important to remember the internet is global. Consider everyone. Don't live in a bubble. Know your customer. Develop personas. And, realise the value of user experience design. If you have done the research and know that 100% of your users are going to be on a 5G connection then maybe that's fine. Maybe you don't have to spend that much time on optimisation. And if you are lucky... just maybe… the competition won’t come along with a faster app and take all your customers.
The need for speed.
In 2021 there are many ways we can speed up a site, or app, whilst maintaining the impact of good design. First let’s talk about how a page loads and what might impact the speed of an initial load. In 2020 the median number of HTTP page requests to load a webpage was between 69 and 75 requests. These requests can be roughly broken down into four different types:
Requests for the HTML (the bones of a page),
Requests for CSS (the styling of a page),
Requests for Javascript (the functionality of a page); and
Requests for images (the visual content of a page).
There are many ways we can optimise both the size and number of these requests but more often than not the requests from images are the biggest and most numerous so it's those we will focus on for this post. One of the first things we could do to reduce requests is to base64 encode the images and just include them in the CSS file as background images or in the HTML request as an image with a base64 encoded src. This definitely reduces the number of HTTP requests but it will dramatically increase the request size for either the CSS or HTML. It also means the user will have to download ALL the images whether they see them or not. This has the potential to increase the initial load time rather than decrease it.
Bearing the above in mind it's often better to defer images from loading (commonly called lazy loading) until the user views the part of the website that includes the image. Using this technique, the initial page load can be dramatically reduced and users never have to download images they didn’t see. This is especially important when considering our friends in India or rural Australia, on those super slow 3G connections. Who wants to waste their data on something they will never even look at?
Picture perfect.
It's also really important to select the correct image format when embedding images within an app or website. Every format has its own advantages and disadvantages and we won't go into all those details in this post. We will however highlight a newer image type that most people may be not familiar with...WebP. Wikipedia states that “WebP is an image format employing both lossy and lossless compression, and supports animation and alpha transparency. Developed by Google, it is designed to create files that are smaller for the same quality, or of higher quality for the same size, than JPEG, PNG, and GIF image formats.” PNG is often regarded as the highest quality image type on the web but WebP offers 26% smaller file sizes than PNG with the same quality and it supports both transparency and animation. Newer, React based, Jamstack frameworks like Next.js and Gatsby include image components that automatically handle image extensions and WebP support for you, loading the correct extension when the correct browser support is in place. There are also the new(ish), but underused, HTML elements and properties such as “picture” and “srcset” that can be used to decrease load times. These can be used to load ONLY the image that is best suited to the user's screen size and pixel ratio. No more unnecessary loading of retina images for non retina devices.
The final tip of the post is to simply utilise CSS or the HTML canvas element to create all the non-content related design elements you might have used images for in the past. Drop shadows, gradients, buttons etc. A good design and well built site will never use images to enhance its main design structure. Images should only be used for content. Never for design. The only exception is iconography.
Employing all the tips above and really considering the user and their internet connection speed could be the difference between your app or site's success or failure. Make sure you really understand your user, their device capability, and internet connection before you rush into the build stage. It's often more important than you think.