Top web performance tips for Black Friday

15 October 2019

It's that time of year again.

Bargain-hungry consumers are planning their next cut-price big-ticket purchase, as retailers gear up for their Black Friday campaigns.

For anyone working in ecommerce, it's bound to result in a few sleepless nights.

Because every year there are failures.

More often than not, it's a surge in traffic beyond expected levels that catches a retailer off guard.

Would-be customers face interminable waits or unhelpful error pages and begin to vent their fury on Twitter.

So if you're busy preparing for the biggest sales event of the year, here are a few tips to help ensure that your website remains up to the task.

Load test

If you don't load test your site, you won't know how how it's going to perform on the big day. When does it start to slow down? When does it fail? How much leeway do you have if traffic exceeds expectations? Crucially, ecommerce and ops need to work together to calculate what constitutes an unacceptable slowdown and work out how to avoid it. Real user monitoring solutions can help correlate performance metrics with conversion, so you can predict just how much any given slowdown would cost you.

Stagger offers and campaigns

Your site is more likely to fail if all your peak traffic lands at the same time, and many retailers now treat Black Friday as a week-long event, helping to spread the load. Similarly, while it's tempting to launch campaigns in a single burst of activity, it's helpful to stagger emails and ad campaigns to avoid being inundated with traffic over a short period of time.

Find and eliminate third-party single points of failure

These days it's hard to find a site that doesn't rely on third-party code in some form. That's not a problem per se. But it can become a problem if your site depends on that code in order to work. And remember that your Black Friday is also that third party's Black Friday. So even if you're not seeing record traffic levels, you could still be affected by traffic hitting any number of sites that use the same piece of third-party code.

All this means that a quick audit of your site to identify third-party single points of failure is an essential element of Black Friday preparation. In particular, you'll want to track down any blocking (synchronously loaded) scripts that could hold up the rendering of your pages. But even asynchronously loaded scripts can be a problem if, for example, you have important content or functionality that is only available after the onload event.

Make good use of caching and CDNs

If you're not using a CDN (content delivery network) already, now's the time! CDNs deliver cached versions of your content closer to end users, reducing latency for faster load times and, critically, reducing the load on your own server.

At the same time, it is worth auditing static assets – scripts, images and stylesheets – to ensure they have appropriate cache-control: max-age settings.

Pay special attention to landing pages

I talked about campaign landing pages in a previous post, but it's worth revisiting the point here.

Campaign landing pages are different from other pages on your site. For one thing, they generally have a very clearly defined path through to conversion. This makes them a special case when it comes to performance optimisation. For example, consider inlining styles (or using server push if you're on H/2), and avoid loading site-wide styles if the landing page needs only a small subset of them.

Since you probably know which page you want to the customer to visit next, consider using prefetch or prerender to load resources in advance, so when visitors do hit that 'buy now' button, the next page will load all-but instantaneously.

Beware of images

Retailer home pages and Black Friday landing pages are usually covered with flashy imagery. But images tend to be large, low-priority resources, which can make them slow to load and display.

This can make it unwise to rely on images to convey important information, although you can mitigate the risk through simple steps, such as making sure they're well optimised, delivering correctly sized images for different viewports and avoiding the use of oversized imagery on slow network connections.

It's also preferable to load important images as <img> elements rather than CSS background images. The former aren't dependent on the CSS file and can be discovered by the browser preloader, which means they're usually faster to load.

Finally, if you're relying on imagery to provide contrast for white text that sits on top of it, don't forget to set a dark CSS background-color as well. If your image is slow to load, you don't want your text to be invisible!

Have a contingency plan

Even if you do all of the above, don't assume everything will run smoothly. It's important to know what's going to happen if your site does buckle under load. In these circumstances, a queuing solution can be invaluable. If you're imaginative, you can even use queuing as an opportunity, for example, by including discount codes or other exclusive special offers in your queue page.

There are also wider planning issues, such as call centre staffing, communication and training, as well as ensuring that your PR machine is geared up and ready to go should it be needed.

Ultimately, a little stress around Black Friday is probably inevitable for retailer and consumer alike, but a fast, reliable website will go a long way towards ensuring that record sales and unbelievable bargains are the only reasons for elevated heart rates.

tl;dr

Black Friday presents risks as well as opportunities for online retailers.

This post outlines some of the tactics you can use to help mitigate the risks and make the most of the opportunities from a web performance perspective.

They include making sure you track down and eliminate third-party single points of failure, making good use of CDNs and caching, avoiding over-reliance on imagery and making contingency plans.