Various statistics note the difference each second of load time makes to the conversion rate of an e-commerce store. I’m personally a little dubious about many of these stats, as there are many other factors that can influence a store’s conversion rate. However, with the dominance of mobile e-commerce and browsing over desktop browsing for almost all retail websites, it’s clearly important that an e-commerce store is as fast as it can practically be, since the speed will directly affect a user’s experience.
There are numerous ways to optimize the front end of your website; some complex and expensive, some quite simple. You’ll often find that you can get some quick and easy big wins early on, but eventually will start getting diminishing returns and smaller incremental improvements.
How far you go really depends on the size of your online revenue and how much additional revenue from mobile e-commerce you’re likely to make from the smaller incremental improvements.
Improving the conversion rate by 0.1% is going to yield a much larger return on investment for a large retailer than it is for a smaller one.
Mobile commerce, or m-commerce, is rising fast as more shoppers are shopping, paying, and banking on their small screens, with expectations for the same seamless experiences they've come to expect when shopping on their laptops and desktops.
Image optimization is an area where a big reduction in page load time can be quickly and easily achieved. I often see a conflict between graphic designers, merchandisers, and e-commerce managers when it comes to image quality and size. A graphic designer wants the biggest and highest resolution image possible, and will not always consider the speed implications of an image they create. A merchandiser is likely to want the largest and highest resolution product images, whereas the e-commerce manager may be the only one with the visibility and appreciation of overall page speed.
Image optimization is always a balance between quality and file size. The higher the quality of the image, the higher the file size. The native size and the complexity of the image also impacts the file size. An image with a detailed and complex background is likely to have a much bigger file size than one with a plain background.
Designers often like to create high-impact banners for a website using many colours and a background that is not just a plain colour. This can have a high visual impact, but the consequence of that will be a much higher file size than a similar banner with a plain background. The introduction of high resolution screens like Apple’s Retina Display makes the balance even harder to maintain as the screens highlight imperfections in lower quality images.
It is important that all team members have an appreciation of front end optimization and the impact that any graphical decisions will have on the size of images and therefore the page speed.
Whilst standard design tools such as Photoshop allow designers to optimize images, there are a number of 3rd party services available that can automatically optimize images on your website. Both Akamai and Ampliance offer image management services that optimize your images based on a set of configured rules. They can even transform jpeg files into WebP images for supporting browsers to ensure that the file sizes are as small as possible.
At Envoy, we recently trialled Akamai image manager on a client’s website and saw an average reduction of 80% in the file size of PLP images, with no noticeable depreciation in visual quality. This resulted in a huge drop in the overall weight of PLP (product listing page) pages and an immediate big leap in their Google Pagespeed scores. If you don’t want to use a 3rd party service for this, you can implement a open source tool like Thumbor, which is a service you install locally on your web servers. Tools like this automatically optimize your images on the fly and then cache them in a repository.
Content delivery networks (CDNs) are services that cache your content on a network of servers commonly known as the edge. These servers are normally hosted globally in many locations to ensure that your content is cached in a location physically closer to users than your origin servers. While CDNs are often used just to cache images, css, JavaScript and videos, you can also use them to cache full HTML pages.
By caching full HTML pages, you can significantly speed up the delivery of pages to your users. As the HTML is cached, your origin web application is not having to create the page and return it to the user each time it is requested and the CDNs cache server (point of presence) is likely to be physically closer to the user than your origin servers. CDNs also have technology to compress and speed up the delivery of content to users, all resulting a much faster experience.
CDN’s can also significantly reduce the load on your origin servers. A PLP page is often a processor-hungry page for your web application to generate on the fly. It may contain a large number of products and facets, all adding up to a lot of processing. In most cases, a PLP page will not change from one hour to the next, so caching that page for one hour is perfectly feasible. Rather than potentially having to generate that page thousands of times within an hour, your origin server will have to do it once. In reality, it does not work quite like that as many CDNs will have multiple independent caches, but you can still expect an offload of around 60%. This means that your origin servers and application will get 60% less requests than without the CDN in place.
There are the three capabilities online sellers need in order to provide an experience that meets consumers' actual needs. Brands need mobile-friendly, AI-driven sites with great CX to thrive.
There are a number of free and paid online tools that can analyze a web page and provide recommendations on how to make your website go faster. Probably the three most used free tools are Google PageSpeed Insights, Yslow and Webpagetest. Each of these tools is slightly different, but all analyze your URL and send a report containing recommendations, along with a score.
These tools can be very valuable in quickly showing you which elements of a web page are slowing it down, and some tools even give you solutions to resolve these issues. While not comprehensive, they are a quick and easy to way to find the changes that can make a big impact.
Most B2C e-commerce websites contain a host of 3rd party resources, ranging from affiliate network tracking scripts to MVT tests. They may contain a Twitter feed, Facebook tracking, or even external fonts. These external resources can significantly slow down a website if not managed very carefully.
When using a web page speed analyzer you will often find that these resources constantly appear in the list of elements that are contributing to page speed. One the biggest challenges is that you have no control over the size and optimization of these resources, as they are developed and hosted by third parties.
You should periodically audit the 3rd party resources that are being called by your website and ensure they are all fired in the correct place and in the correct way, and that you are actually using them. I have seen many instances where a tracking script for a service that is not used any more is still being fired because it was added using GTM and someone forgot to remove it when the service stopped being used.
The Google Accelerated Mobile Pages project is an open-source web publishing technology that aims to improve the speed and performance of content, specifically delivered to mobile devices. Led by Google and initiated in 2015, AMP technology was originally designed for the delivery of news content. AMP pages are very lightweight and tend to use around 10 times less data than their equivalent non-AMP counterparts, and will often load in less than 1 second. There is a big catch though. AMP pages support a very limited set of functionality, and are therefore not appropriate for many applications, especially rich and functional e-commerce websites.
A handful of retailers have tried AMP for e-commerce with mixed success. Although they have much faster pages, they have had to completely redesign the functionality and user experience around the limitations of AMP. Complex areas of the website, such as the checkout, cannot be built in AMP, so the user is taken to either standard HTML or a progressive web app (PWA) checkout.
While AMP is a very interesting project and has been well-adopted in the news industry, it is yet to show any real traction with e-commerce. If Google continues to expand the functionality available, I can see this becoming a viable tool for e-commerce.
Most e-commerce websites are now built responsively where the layout will adapt dynamically to fit the screen it is being viewed on. This is certainly preferable to having separate mobile and desktop versions of your website, and generally means your site will work well across the multitude of screen sizes available.
However, with a responsive design, the same assets tend to be used no matter what device the website is being viewed on. Banners and product images are often just displayed at a smaller size, or even hidden in a mobile view, but the large file is still downloaded.
This is where elements of adaptive design can be used. Rather than creating a fluid design that changes dynamically to the screen size, an adaptive website has multiple fixed layouts designed for specific screen sizes. This allows designers to tightly control and optimize the user experience for each specific screen size.
While this is more complex and time-consuming to implement, one of the key speed benefits is that rather than just displaying a larger image in a smaller size on a mobile device, you will load a specific mobile-optimized image on that device, thus reducing load time. In a responsive design you may hide certain desktop elements when the site is viewed on mobile. In an adaptive design, you don’t even load them at all.
One pragmatic alternative to going fully adaptive is to use JavaScript in your responsive design to detect the screen size being used and ensure that mobile optimized images are requested and displayed rather than simply displaying larger images at a smaller size. This ensures that only the images and content that are displayed are requested and therefore downloaded whilst still giving the benefits of a responsive design.
There are a multitude of different ways to speed up your mobile e-commerce site pages. Some involve development, some involve the use of the 3rd party services, and some involve a balance between design and function.
