Target is one of the most well-known retailers around, and they've recently increased their focus on the e-commerce portion of their business - Target.com. In fact, they just cracked into the top 10 list of US e-commerce retailers.
Unfortunately, Target.com is not a fast website. And this is shocking since we all know that page load speed is directly correlated to site revenue (you're aware that faster websites lead to increased conversion and sales, right?).
To be fair, Target.com does a lot of things really well - but there are many things that they could be doing better, as you can see from our MachMetrics audit.
Let's add in some metrics (click here if you need a refresher on these):
- Time to First Byte (TTFB): 0.47s
- First Contentful Paint: 0.7s
- Time to Interactive (TTI): 6.2s
- Total Blocking Time: 2.2s
- Page Complete Time: 8.6s
Let's look at what Target does well, what they could improve, and help them increase their revenue!
What Target.com does well
Having read the introduction, you may have navigated over to Target's website to see for yourself how slow the site is. Having done that, you might be thinking, "This seems pretty fast, what are you talking about?"
This is because Target.com does an excellent job of improving user-perceived speed.
Look again at the metrics above. You'll see that the TTFB and the First Contentful Paint are both very fast, which feels very snappy to visitors coming to the site.
This leads us to the things that Target does well.
- They use next gen image formats like WebP, and lazy load all of the images below the fold. Despite the large number of product images that are on Target's homepage, only 50kb is downloaded when the user navigates to the page, with the rest only being downloaded when the user scrolls down. This is exceptional.
- Target's servers are stellar. You can check out a comparison of their hosting to Walmart.com here. TLDR - Target's server response time is blazing fast. This is why that TTFB is so low, and why the site seems to begin displaying resources immediately.
- All assets are compressed, and CSS and Javascript is minified.
To be a top 10 e-commerce site in the US, there were obviously going to be some strengths in what Target has set up. However, they are almost certainly losing out on revenue because of the weaknesses that can be found. Let's fix those!
Fix #1 - Reduce JavaScript
The most glaring issue is that the Target.com homepage loads about 1.6MB of Javascript. And that's with GZip compression!
Fonts, images, CSS, and HTML are all in a very performant size range. The Javascript, however, is excessive.
To be fair, any major e-commerce site is going to have its fair share of triggers that it has to be ready for based on user input. Shopping carts, models, product sizes/colors, all have to be ready to go via Javascript files.
However, we loaded Target.com on the Brave browser which natively blocks ads and other tracking scripts, and found some interesting results. Brave shows that it is blocking 22 such scripts, and the site works just fine, so they're obviously not completely necessary.
Of course, any major retailer is going to have its fair share of ads and integration with Google. It's how they're able to better recommend products for you (think why products are recommended to you on Google when you search for them on other sites).
However, it's clear that a better balance could be struck here.
Fix #2 Break Up Javascript Files to Better Use HTTP/2
In addition to the sheer amount of scripts that are present, many of them are large files that aren't completely being used.
Chrome DevTools has an awesome Coverage tool that allows you to see what percentage of various files are being called.
The Target homepage is tough to analyze because it is updated so frequently. So for our tests, we'll be using the KitchenAide Mixer product page.
As you can see, with the page loaded, we still see between 40-60% of the Javascript hasn't fired. The top few files are also quite large.
The larger files appear to cover many different scenarios that the user might navigate through. These make for great candidates to be split up into smaller files and called only when needed. Target could even take it a step further and use <defer> on these files so that they're not even downloaded unless needed.
The best part is, that these smaller files could all be downloaded asynchronously, thanks to HTTP/2.
Additional Optimization
While the above details the major improvements that could be made to the site, there are further steps that could be taken.
We would recommend Target experiment with Brotli Compression, since we learned that Javascript files are typically around 14% smaller when compressed with Brotli over GZip. This could make a great deal of difference on a site that uses so many scripts.
Another fix we'd like to see implemented is on the product pages. Target seems to load an <img> tag as well as a <div> with the product image set as the background. While this allows the image to be loaded very quickly, it causes a problem where the images switches over and there is a moment where the image disappears. This leads to a bad user experience, and affects their First Contentful Paint. You can check out what we mean on this KitchenAide mixer page.
Wrapping Up
As we mentioned, Target does a great job in certain areas with their page speed. The fact that they're now in the top 10 in the US is a testament to their effort in increase user-perceived speed. Their servers and image management is top-notch.
However, the sheer size and number of the scripts being loaded is problematic. 40-60% of that Javascript isn't needed from page to page, and the number of requests from trackers and ads is excessive. If they were to implement the suggestions we covered, we estimate they could cut their Interactive time by 1/2, leading to a Page Complete time of 3.1 seconds faster.
That equates to a lot of extra sales. Which makes me wonder...what are they waiting for?
Hopefully Target is able to utilize these fixes to create a better product for its visitors. Even better, we hope this case file shows you the best practices and potential fixes for your own e-commerce site.