- Research from Google suggests that the correlation between page load times and conversion rates is strong, especially on mobile web pages.
- One of the simplest changes you can make to your website is limiting the data loaded as a visitor navigates through product listings.
- If you can identify that pages are loading a lot of third-party Javascript files ahead of your body content, you’ll want to see how that can be rearranged.
- More simple yet surprisingly quick things that can help speed up your ecommerce site.
For online retailers, the abandoned site/cart problem has many factors. Reducing the number of clicks to checkout, eliminating surprises in price displays and offering guest checkout options are some well-known ways to fight cart abandonment on an ecommerce site, but smart merchants are always searching for ways to keep potential customers from leaving the site before making a purchase.
Research from Google (among other surveys conducted in the last few years) suggests that the correlation between page load times and conversion rates is strong, especially on mobile web pages. In short, slow loading times are stopping sales in their tracks.
Speeding up page load can have a huge impact on your business. Just check out Google’s Test My Site tool, which can help you estimate load time’s impact on revenue based on the number of visitors to your site, your average conversion rate and average order value. Depending on your results, you may want to start small or jump into wholesale site adjustments to reclaim revenue lost to site abandonment. Let’s go through speed-oriented changes at three different levels of difficulty.
Level one: Simple yet quick changes you can make yourself
Images on your website create the biggest data transfer need when someone loads up your page on their browser. One of the simplest changes you can make to your website is limiting the data loaded as a visitor navigates through product listings. That doesn’t necessarily mean you should remove images, it just means you should be smarter about how they’re used.
The simplest way to do this is to make sure your customer’s browser is loading the right size image for their needs. If they’re on mobile, they don’t need the same size product images as they would on desktop. You can manually add differently-sized images and set parameters for when they’re displayed, but your ecommerce platform should offer a way to make images responsive to the customer’s device. You upload the highest-quality image you have, and the user gets the size they need based on the device they are using.
Another best practice is to limit the number of items displayed at one time on each page. Don’t load 100 results per page when only 15 can fit on-screen at once. Instead, use “Load More” buttons and let shoppers tell your site when they’re ready for more. This allows shoppers to scroll segments of your product listings, without feeling daunted by dozens of pages of results to sift through, while also keeping load times ultra fast. Your page will only need to load a handful of images at a time when the user is ready to view them, and their overall scrolling and the shopping experience will be simplified.
Level two: You might need the help of your partners
As with images, reducing the amount of other data that needs to load when a user first visits your website will help speed up their experience. The content they encounter first on your site is called “above-the-fold” content and should be what loads first. You might be surprised to learn that plenty of websites load third-party widgets before getting to the actual content.
It’s easy to identify the way your HTML is structured – just open the developer tools on your browser and look through the page code. Near the top, you want CSS to load first, which appears as <link>. This controls the basic appearance of your site and you can use CSS in place of certain images or graphics to make your pages even less hefty to load. Next, you want to see the <body> of your page – the content your customer is waiting for – or, potentially, some javascript files, <script>, if some are absolutely required for the rest of the page to load.
This is where your partners come in. If you can identify that pages are loading a lot of third-party Javascript files ahead of your body content, you’ll want to see how that can be rearranged. However, going into your site backend and messing with code isn’t usually advisable. Create sandboxes for testing to make sure a change on one page doesn’t break the rest of your website. If you don’t have developer resources in-house, work with your ecommerce platform provider or domain host. They can help you set up sandboxes for your own testing, or identify and correct any page structure mishaps that might have been created as you added different tools and functions to your site.
Level three: Teamwork makes the dream work
Consistent experiences across desktop and mobile have been the goal for merchants since the iPhone’s introduction in 2007 launched the era of mobile browsing. In the 2010s, responsive design delivered significantly better mobile experiences and played a significant role in the shift of internet access taking place mostly on desktop to mostly on mobile.
Now, blending the functionality of websites with the simplicity of apps is the latest move to provide fast, simple mobile commerce experiences. Progressive web apps, (PWAs) which were introduced several years ago but are seeing more significant adoption now, have a few attributes that make them unique, and uniquely-suited to online sales.
PWAs are responsive and load incredibly fast, giving the sensation of instantaneous load times. They can work offline, thanks to progressive updates through service workers, and are secure because service workers require encrypted data transmissions. PWAs can be installed on mobile device home screens and support push notifications like apps, but can also be accessed and shared using URLs like websites.
In short, PWAs can solve the problems of slow page load speeds on desktop or mobile, but also unlock new ways for merchants to interact with shoppers, provide great digital experiences, increase loyalty and empower customers to advocate for the brand. You probably aren’t going to build a PWA alone, but brands who do find many benefits in the process.
When a potential customer visits an online store, it’s typically because they have some level of interest in the products sold there, which is why it’s frustrating for merchants to lose a sale once they have come that far. Don’t let page load times be the reason bail. There are many factors and many fixes like the ones we’ve reviewed here that can impact load speeds and keep customers happily shopping on your ecommerce site.
Jimmy Duvall is Chief Product Officer at BigCommerce.
