A retail web performance story

Someone is following you.

You’re not sure who and you’re not sure why. You’re only on a shopping trip, after all. But you know they’re there. Sometimes, you think you catch a glimpse of them, but only ever from the corner of your eye.

Eventually, as you walk into a store, a figure cuts across you, forcing you to pause. Was that him?

Curiosity pushes you on. Peering through a crowd of shoppers, you see him chatting to a member of staff, who then does something extraordinary.

Ignoring everyone else, the assistant walks purposefully towards you. “Would you mind waiting here for a moment?”

His tone is friendly, polite. Still, you wonder what’s going on. Are you in some kind of trouble?

Moments later, you have your answer. The assistant swiftly dismantles the advertising banner in the foyer. It featured a special offer on cheese. You hate cheese. He glances up at you, smiles disarmingly, and replaces the banner with one headed Are you looking for organic lettuce?

The funny thing is that the answer is yes. You’ve been looking for organic lettuce all morning. In fact, you’ve just come from the Organic Vegetable Emporium. You read on: All lettuces half price: aisle 5!

That’s useful, you think. Before you can say a word, the assistant nods, as if to say My work is done, and melts into the crowd.

Slightly confused, but not one to look a gift horse in the mouth, you start making your way to aisle 5. Before long, though, you’re aware of a presence beside you. Looking around, you see a smartly dressed woman, matching your every step.

She smiles and produces a clipboard. “Do you like it here?” she asks.

“I’m sorry…?”

“Do you like it?”

“I suppose so.”

“Good. Would you like to tell your friends?”

“Tell my friends…?”

“That you like it.”

“Erm… not just now, thanks.”

“OK,” she says cheerily, “How about a short message about your experience here?”

“A message to…?”

“Well, everyone,” she says, as if the answer should be obvious.

“I think I’ll leave it – thanks all the same.”

“Not to worry,” she says, and promptly disappears.

What is going on? you wonder. Slightly paranoid, you look around, and you’re sure you see faces you recognise among the staff, even though this is your first visit. Your suspicions are confirmed when you catch one of them hurriedly pulling on a store uniform over a t-shirt bearing the logo of another brand. You look behind you and see a small army of assistants arriving, breathless, at the checkouts. Again, you’re certain you’ve seen more than a few of them before…

Later, you leave the store having found everything you were looking for. But you are preoccupied. You can’t help dwelling on the revelation that there seem to be people dedicated to directing you to tempting offers or to collecting your views. On the one hand, it’s nice to know: it helps you find what you want (and, you realise, it might help others if you share your opinions with them). On the other, though, some of these people seemed to get in your way. Might you have got your shopping done quicker if you’d been left to your own devices?

Shopping online

This story was, as you might have guessed, a metaphor for a typical online shopping experience. Social media, remarketing and shared third-party resources all have their part to play, but how can retailers make sure they don’t cause the user experience to suffer?

We recently looked at the performance of the UK’s top 50 retail sites. The headline figures for Q2 didn’t spring any major surprises. Although there were a handful of strong performers (some of our customers were among them), as a whole they were quite slow in the second quarter of 2014. Average total load time was 10.29 seconds – slightly worse than the Q1 average of 9.36 seconds.

Last quarter, we homed in on the link between page weight and speed. This time, we thought we’d look at something else that’s often linked to slow web pages: third-party content.

Overall, we saw a strong correlation between the amount of third-party content and load time. On average, the ten fastest sites made calls to just four different third-party domains. For the ten slowest sites, the average was 46.

So what kind of content were they loading? And does third-party content necessarily make sites slow?

Not necessarily a poor user experience

It may come as no surprise to learn that, for retailers, many calls to third-party domains relate to tracking and remarketing. This helps companies to analyse the effectiveness of their advertising campaigns, to deliver targeted ads and to understand how users interact with the site. Some services even allow site owners to build up a picture of their visitors’ demographics.

In short, these services can be extremely useful. In the web performance world, we’re sometimes guilty of calling for site owners to ditch poor-performing third parties, when the truth is that this isn’t always an option. Companies use them for a reason.

What’s more, not all third-party services need necessarily have a serious adverse impact on the user experience.

For example, the async attribute can be used to ensure that external JavaScript doesn’t block parsing and rendering of the page. Asynchronously loading the script prevents it blocking the rendering of the elements below it, but it’s still competing for resources. It may prevent the download of an important image or, when it’s executed, it may result in parts of the page being redrawn. To avoid this, it’s worth considering whether the script could be loaded later – after the onload event, for example.

It looks as though this is what was done on what might otherwise have been one of the worst performing pages we looked at. This particular retailer loaded content from no fewer than 71 third-party domains. There were 245 objects on the home page, and average total load time was a sluggish 16.75 seconds. However, all bar one of the third-party objects was loaded after onload (and after the page had rendered).

So, from the user’s point of view (in this particular test), load time was more like 5 seconds, rather than the 17 seconds it took for every object to finish loading.

Unfortunately, not every site followed this pattern, and Figure 1 shows a waterfall chart for another retailer (third-party calls are highlighted in yellow). This time, all the third-party resources come before the onload event, and some appear to block the loading of objects needed for a (visually) complete page.

tpux

Figure 1 – Third-party content on this site appeared to affect the user experience

It should be noted that the owners of this site have other things to worry about. For example, there are a number of very large image files that really slow things down. The third-party files are pretty small by comparison. However, those files still add a delay that this organisation can ill afford. What’s more, while the third-party objects didn’t take all that long to load on this test, part of the problem with using content from elsewhere is that you have no control over the server on which it’s hosted. If it’s struggling under load, for example, a third party’s slowdown (or outage) can all too easily become yours. This is the dreaded ‘single point of failure’ that stops your page from loading. And the chances of this happening increase for every third-party domain you access.

The importance of auditing

We usually recommend a thorough audit of third-party content: is it all really necessary? Would an in-house solution be viable? Obviously, some services are third-party offerings by their very nature. This includes the remarketing and advertising services that are essential for many retailers. Others, such as social media sharing buttons, can normally be produced in-house with minimal development work.

Similarly, it’s often preferable to host code libraries on your own server, rather than rely on a third party. Although the third-party version is more likely to be cached on the end user’s machine when they first visit your site, if it’s not cached, you’re dependent on the performance of someone else’s server. Hosting your own version also gives you the option of cutting down the code, so you’re loading only what your site actually uses.

When you do have to rely on a third party, it’s a good idea to keep an eye on their performance.

If you have monitoring in place, for example, why not look at the performance of third-party objects over time? This is useful for picking up occasional slowdowns that you’d be unlikely to catch in a one-off test.

For example, Figure 2 shows download time for a third-party object over the course of a day. As you can see, it’s quite variable overall, but there are also a few significant spikes in data start time (perhaps indicating a server that’s struggling under load).

mon1cr

Figure 2 – Peaks in data start time on one third-party object

Figure 3 shows another example. Load time for this JavaScript file varies enormously from one test to the next.

mon2cr

Figure 3 – Performance of this third-party script varies considerably over the course of the day

While occasional spikes in load time for certain objects not be too worrying per se, if you’re accessing a large number of third-party services with variable performance, there’s a higher chance that visitors to your site will be affected by at least one of them at any given time. For example, Figure 4 shows load times for six third-party objects (including the two we’ve already looked at), accessed by the same site on the same day.

overl1

Figure 4 – The performance of six third-party objects over the course of a day (graphs are overlaid)

If a particular object is consistently slow, it’s worth taking a look at how the content is delivered to you. We found one example of a third-party JavaScript file sent without compression. This should, at the very least, set alarm bells ringing.

uncompressedjs

Figure 5 – An uncompressed JavaScript file delivered by a third party

Not all bad

We’ve picked out a few examples of poor performance and bad practice because it’s important to know what to look out for. However, it’s equally important not to demonise third-party service providers. Many of them do take the trouble to ensure that their service has a minimal impact on performance.

Similarly, it’s possible for retailers to take steps to mitigate the effects of slow-loading objects on the rest of the site’s content. So while using a large number of such services on your website can result in serious slowdowns and failures, there’s no reason why it has to.

Leave a Reply

Your email address will not be published. Required fields are marked *