What Web Devs Can Learn from the Top eCommerce Sites

The results are in! We logged the performance of the top ten online shopping sites during peak hours on Cyber Monday…

and the results were far from what we were expecting…

Originally, we planned to just monitor network and on-page performance metrics and compare them to last year’s results. But after crunching the numbers, we saw something else that was more important than year over year numbers…

The chart above shows the top ten sites from shortest to longest DOM load time. We noticed that sites with more trackers had consistently longer DOM, total load, and finish times.

Actually, third-party trackers had more of an impact on load times than requests or page size! Some websites took over a minute to fully load because they were waiting on requests for tracking beacons.

You might know these trackers as pixels or beacons. They are very small scripts that capture information about website visitors and send that info to an external application for reporting.

You most likely use a few of these trackers on your website and think that since they are short scripts that make a quick external call and don’t change anything in the DOM, they must be harmless. Yes and no…

On their own, trackers usually won’t have any impact on user experience, since they run in the background. But, when you have dozens of requests for third-party tracking and each one takes a few hundred milliseconds to load, you could be adding valuable seconds to your load times.

In our study, we found that the average site used 24 trackers, with the peak reaching 74 trackers on a single page.

Before we get any deeper… we need to talk about the different kinds of load times. There are three different ways we measure page load:

• DOM Load: how long it takes the browser to render all the HTML elements and scripts.
• Page Load: DOM load + time it takes to download all the page content (images, video, etc.)
• Finish: How long it took to send and receive all requests on the page.

Third-party trackers usually won’t load until after the DOM is loaded, which is why you will see drastic differences between the DOM load and the finish time.

For example, Amazon’s DOM load took only 1.55 seconds whereas the total load time finished at over a minute. When we reran the results a second time with an Ad Blocker enabled, the finish time dropped to 45 seconds.

Now 45 seconds is still a really long finish time. The culprit was a single resource that took over 30 seconds to load and inevitably failed. In this case, the DOM load was not impacted.

Amazon was far from the only site affected by third-party trackers. After we finished our first round of testing, we went back and reran all the tests with an Ad Blocker enabled.

We used Ghostery, a Chrome extension that prevents ads from showing on web pages as well as restrict trackers from scraping sensitive information.

We also used Sonar Lite, a free Chrome extension that uses Real-Use Monitoring to capture page loads and request timings.

In most cases, we didn’t see much of an aesthetic difference with or without the Ad Blocker, with the exception of Kohl’s who turned their website background into an advertisement. Once we enabled Ghostery, it disappeared entirely.

And pages that took a long time to render the initial paint (how long it takes to render the visual elements in the browser) still took the same amount of time.

But once we crunched the numbers, we found some startling changes.

• DOM loads reduced by an average of 8.9% when we used an ad blocker.
• Total page loads (including images) were reduced by a whopping 17%.
• Page size slashed by 24%
• Requests reduced by 43%
• Third party trackers were cut in half, down by 58%

You’ll notice that the number of trackers didn’t drop to zero. There are still some trackers being used even when we have the ad blocker enabled because these trackers are considered “essential” by Ghostery and all of our data is anonymized before being sent off.

But when you remove the majority of the trackers, all three load metrics, the number of requests, and page size dropped significantly.

So why should this matter to you? Well if you use third-party trackers, you need to be aware of the performance impact.

The websites we monitored in this study are the epitome of optimal web performance. They religiously use (and establish) the best practices for web performance and efficient web development. Despite that, they still suffer from the same pitfalls as everyone else due to overuse of third-party tracking scripts.

When we reran our tests with the trackers removed, the average DOM load time dropped from 1.9 to 1.7 seconds. That may seem inconsequential, but when you have thousands of millions of people using your site at the same time, every millisecond counts.

Experts estimated that over 75 million shoppers will take to the web for their Cyber Monday shopping. For the ten retail giants we monitored, that’s likely a couple million shoppers surfing their websites within a 24 hour period.

If page loads dip just the slightest bit, it could cost thousands in revenue.

That’s why these kinds of site are the best to learn from. They have teams of dozens of people working to keep their site lean and efficient, all to make sure performance doesn’t degrade when they are challenged by holiday shoppers.

Even if you don’t have the resources or man power that these ecommerce giants have, there is still so much you can learn from them and apply to your own development projects.

If there’s one thing you take away from this article, it is to be mindful of the trackers you use. Every pixel could impact performance, so don’t take those little scripts lightly.

Key Takeaways:

• Sites with more trackers tended to have longer DOM and finish load times.
• However, sites with more requests did not correlate with longer load times.
• Pages that didn’t complete all requests had longer load times.
• Lazy loading (loading images and scripts on scroll) improved page loads by a few hundred milliseconds to a few seconds
• 60% of the top websites had DOM load times under two seconds.
• Website sizes were unusually higher than previous years averaging 3.75 Mb, nearly double the recommended size of 2Mb.
• Trackers accounted for an average of a megabyte of website size.

The Results:

Here are the results from the two sets of tests we completed. Each cell contains the difference between the first set of tests and the second set when we used an Ad Blocker. Red cells indicate an increase in load times or # of requests/trackers. Green cells indicate improvement and a reduction in load times or # of requests/trackers when we used an Ad Blocker.