Load speed has long been a metric of focus for website developers and marketers alike, and this is particularly true in the e-commerce space. Shoppers’ rising expectations for brands to deliver quick and seamless online experiences leave little room for error. Conversion rates have been seen to increase by as much as 7% for every 1 second of load time improvement, making page optimization a seldom overlooked topic.

At Pixlee, we understand the importance of delivering a quality shopping experience across different platforms and varying connection speeds, which is why we consider our displays’ performance a number one priority. So what exactly should you aim to optimize?

For many of our customers, user-generated content plays a leading role on primary landing pages, and first impressions matter. Bounce rate is often used as a measure of success here, and speed is always a leading factor. “Speed” can oftentimes become a vague term, but when discussing bounce rates one of the most important facets is what we like to call perceived load time. This refers to how quickly the page renders content in front of a user, or more specifically, the DOM’s ready time. This is the most intuitive way in which shoppers will understand a page’s load speed and will be the moment when they feel that the site is ready, so it’s no surprise that it is the highest predictor of bounce rate. While overall load time for a page is still an important area of focus (and can have impact on page rank and SEO), perceived load time is far and away the most important factor for keeping shoppers on your site and increasing their chance at converting. Unfortunately, there isn’t a standardized way to measure perceived load time, but there are plenty of indicators to help estimate it.

Great so we now know what to measure, but how fast is “fast enough.

” There’s strong evidence that speed improvements offer diminishing returns: reducing load speed from 15 seconds to 7 seconds adds about 24% conversion, but only another 8% from bringing 7 seconds down to 2 seconds. When looking at some of the top performers in the industry, the 2-5 second range emerges as a good target. Keep in mind these are overall load times, but they serve as a good indicator.

At this point you’re either smiling about your site’s current performance, or starting to get your developers on the phone for some answers. If you find yourself in the second group, don’t fret just yet. let’s take a look at some of the things that could help get you there.

Speed up your Content

There’s a lot of proven strategies to make your page load faster but let’s focus on the ones that are relevant to perceived load time:

1. Optimize your Assets:

Static page assets should be optimized to improve your page’s initial render time. HTML, CSS and JS should all be minified and compressed. Similarly, images should be optimized for both size and quality with special care being taken when it comes to image format.

When possible, use CSS over static image files, and always leverage sprite sheets for icons and other small images. This will help lower the number of requests made by the browser and decrease the overall size of your page.

2. Use Asynchronous Scripts:

External scripts should not block the rendering of your page’s content. Leveraging asynchronous loading means that users will not have to wait for these scripts to load before the rest of the page can render. Some third party scripts like Google analytics or Pixlee’s display widgets are loaded asynchronously by default, but this is not true of all libraries. For those which aren’t, you can leverage tools like tag managers and module loaders to control load orders and priority.

3. Prioritize Visible Content:

The size and number of requests required to load the first render is highly dependent on what users will see above the fold. Main content should take priority, ensuring that the main structure and content of your page loads before any videos or external widgets which lay out of view.

Take special care in how your assets and content are loaded, and structure your HTML such that CSS is at the top and JS is at the bottom. The former will prevent any visible flashing or rearranging elements, while the latter takes advantage of the fact that JS will not be able to do anything until until the page has loaded anyway.

Measuring Success

I highly recommend leveraging online metric tools like those provided by Pingdom and Google to test your pages regularly. These can provide quick bottom line numbers, while still being granular enough to help you pinpoint time to first render and get a better idea of perceived load time. For those who are comfortable with a more hands on approach, Chrome’s developer network and performance tabs will give you the clearest picture of time to first paint and how it compares to other load time checkpoints.

Load speed is a nuanced topic, and as sites continue to increase in complexity, so do the factors that contribute to its success. Recent research has shown that perhaps there’s more to the puzzle than just raw speed. With modern sites moving towards speed parity, content quality becomes a significantly more impactful differentiator. Shaving 200ms off of a page will not make up for weak content and a sub-par design.

Don’t underestimate the human element; qualitative data collected from real user testing is as insightful as any quantitative analysis, and will ensure content quality is not diluted through over optimization. Shoppers will not be measuring every brand’s load time, it is their perception of your site which holds the key to engaging browsing sessions and high conversion rates.