Snappy image delivery for keeping online shoppers happy

Why Should I Care About Page Load Times?

1. Users Care About Page Load Times

Ecommerce must provide fast, responsive sites because users care about page load speed. [Google’s research] clearly demonstrates this, with a 32% increase in the bounce-probability rate as load times rise above 1s up to 3s. Sites may lose a whopping 90% of visitors if pages take between 1s and 5s to load.

2. Google’s Search Cares About Page Load Times

Google’s best-practice advice is to optimise your site to ensure a speed index of under 3 seconds. Your speed index is a measure of the user’s experience of the page load time. As such an assessment is often difficult to quantify, Google developed the [Largest Contentful Paint (LCP) metric]. This reports the render time of the largest image or text block visible within the user’s viewport. For LCP, Google recommends 2.5 seconds or less. Ignore such recommendations at your peril. Google will formally implement such metrics to assess the page experience and use that to rank sites in their Search results as of May 2021.

3. Because Mobile Phones are not Computers!

Considering that smartphones are often the primary contact point with your brand, it is quite shocking once you start to compare the desktop and mobile experience. In one study, the average web page takes over 80% longer to load on mobile compared to desktop. Add to this the reality that nearly 90% of online users are less likely to return to a site after a bad experience, and it is crystal clear that your page load speeds are essential to successful conversions.

How do I Improve Page Load Times?

The page load-time issue over which you have no control is, of course, your user’s connection speed. Other factors, however, you can influence. Your web host provider, for example, can be a bottleneck for high-traffic sites. Always be prepared to review the performance of your host server.

The page load time issue over which you have the greatest control is the total file set size. Reduce the size of images and videos loaded by your site, and it will load faster – yes, Sherlock!

Think of a web page as being made up of its code, text, and external objects. The code is the HTML, CSS, and JavaScript, and this references your external objects. The external objects are your images, audio, video, and text content – such as prices and product descriptions.

There are some serious optimisations that you can undertake to improve the performance of the code, such as caching and ensuring that your JavaScript calls do not become before calls that can run in parallel with other processes. However, in more than 60% of web pages, the code accounts for less than 50% of the total page size. This means that the low hanging fruit, in terms of optimisation, is reducing the size of those external objects.

Keep Shoppers Happy and Boost those Page Load Speeds

Fortunately, there are multiple approaches that you can implement to reduce the impact of media file sizes on page load speeds. These solutions are the core of your product image management strategy.

Responsive strategies for product image management

1. Choose an appropriate image size

Responsive websites are a de facto standard for any serious ecommerce site.

By sending the right-size image based on the user’s screen size and resolution, websites avoid loading the larger image size on web pages which adversely affects page load times. There are two ways to do this:

Pre-render multiple image size variants and have them ready, or Dynamically resize on request, cache it, and serve

The issue with pre-rendering is that image-size requirements change constantly, and it becomes an issue to store and maintain the pre-rendered set.

The ideal approach is, therefore, dynamic resizing, caching, and delivery of your images. Even this can be further optimised – if your imaging service provider can supply intelligent cropping based on facial recognition, object detection, and more, then you benefit from a smart service that loads pages faster and increases user engagement.

2. Load images when they are needed

The device type influences what can be seen in the user’s viewport. A responsive web page is often designed to serve different elements to a mobile phone compared to a desktop device.

You can go quite far down the responsive rabbit hole. For a genuinely superfast responsive experience, delay loading images that are below the viewport until the user scrolls and “demands” to see them.

Reduction strategies for product image management

1. Compress media

By combining the correct file format and compression type, you can reduce image file sizes by up to 5 times. Simply applying the correct image format can radically reduce the image file size. For product images, you are unlikely to accept the deterioration that accompanies a lossy compression, such as provided by JPEG images. Lossless alternatives include:

• Google’s WebP lossless format results in image sizes 26% smaller than JPEG
• PNG, a lossless format providing high-quality images
• AVIF supports lossless and lossy compressions (we are super excited about this new format, and FileSpin are working to roll out support ASAP)

So often, browser wars add a layer of complexity to ecommerce development, and image compression is no exception. Safari, for example, does not (at the time of writing) support Google’s WebP format. So, just as you need to consider device-responsive strategies, similar conditional logic must be applied when serving image compressions according to the browser type.

2. Host your content on external sites

When your container object makes requests for an external object such as an image, this is done with an HTTP request. Each HTTP request requires one connection to the server. If all your objects are on the same server as your container, each file request waits in a queue which increases page load times.

How many of these requests you can make simultaneously depends on the agreement you have with your web host (or how you have set up your own). Some hosts restrict this to as little as ten. One option is to set up a different web host or contract. Another is to host your external objects on a completely different server.

This is what Digital Asset Management (DAM) providers such as FileSpin enable. By partnering with FileSpin, you can self-serve your product images via HTTP requests from a secure microsite dedicated to you. Your suppliers upload your product media and all their associated data (metadata) to a supplier microsite. FileSpin then handles all the hard work of compressing your images and dynamically providing media file variants to optimise delivery by device. This massively reduces the request bottleneck and cuts down on your page lag.

3. Reduce metadata

The metadata is all the data that comes alongside your media. Think date and location for your family snaps. Supplier metadata is used to identify and describe products, and it’s this data that allows ecommerce platforms to process thousands of products and display them to customers with all their relevant information.

Best practice says do not pass metadata with an image in an HTTP request because this adds to the file size. By handling your metadata and your image file separately, you can ensure optimum load times for your media.

Product Image Management Simplified

If you are interested in simplifying your product image management, then consider a DAM vendor such as FileSpin. FileSpin exists to optimise your media delivery. We support your responsive media delivery and abstract away much of the work required to deliver your product media to your consumer site at speed.

Reach out if you are interested in learning more about using FileSpin in the backend of your site for a fast-paced, modern, just-in-time inventory