What you can learn from Valentine’s Day landing page performance
Stage 3: Sell
Bob Dowson
26th February 2015
Share this:

We always keep an eye on retail websites to see how they cope with key events in their calendar. One such event is Valentine’s Day. So we monitored around 30 pages to see how their web page performance was affected on the run up to the big day– a mixture of florists’ home pages and Valentine’s Day gift landing pages from a selection of major retailers.

Broadly consistent performance

Load times varied quite a bit between the sites, with average daily load times ranging from just over 3 seconds to 30 seconds. However, what was really striking was the consistent performance from most of the pages over the period. There were just a few exceptions – a couple of sites slowed down just before Valentine’s Day and a couple got faster.

Two big slowdowns – but what caused them?

The two pages that suffered a serious drop in performance are highlighted on the graph in Figure 1. Surprisingly, they were both among the fastest overall.

Valentine's Day Landing Page Performance Figure 1

Figure 1 – Two slowdowns (circled in red)

On closer inspection, it turns out that neither of these slowdowns could be blamed on a sudden surge of forgetful partners, frantically getting their orders in at the last minute. Instead, by overlaying page size (shown in grey below) on load time (shown in green), it’s clear that bigger landing pages caused load times to increase.

 Valentine's Day Landing Page Performance Figure 2

Valentine's Day Landing Page Performance Figure 3

Figure 2 – Increased page size caused slower load times

In the first case, page size went up mainly because a new banner image was added – the 515KB JPEG put quite a dent in load time. This might just have been understandable if it had been a stunning photograph of a popular bouquet. But it wasn’t. Instead, it was simply a few lines of text on a coloured background. As such, JPEG was a poor choice of format, and a PNG would have been a staggering 57 times smaller, at just 9KB. Better still, the banner could have been created using text styled with CSS, reducing both the overall file size and the number of round-trips.

The reason for the big jump in page size on the second site is even more perplexing.

Bizarrely, one hero image was swapped out for another virtually identical image, whose file size was more than five times larger. The first image weighed in at 110KB, while its replacement was 650KB.

The irony is that both sites had previously been performing very well. It was only through some tiny, but ultimately quite careless, changes that both ended up around 50% slower during one of their busiest trading periods.

Last-minute optimisation?

Last year, we saw a couple of sites make what looked like some last-minute improvements. This year too, a couple of the slower sites managed to make some performance gains just ahead of the big day.

Valentine's Day Landing Page Performance Figure 4

Figure 3 – Two pages got faster just before Valentine’s Day

Did either site benefit from a concerted effort to improve load times, perhaps after a flood of customer complaints? It looks unlikely. One site didn’t change until 13 February, which looks a bit too last minute. And both sites got faster thanks to a reduction in the (vast) number of product images. This is just as likely to be down to stock running out as it is to performance optimisation.

Conclusion

The positive story for this group of retailers was that none of them suffered performance problems as a result of a surge in traffic (of course, it’s not quite so positive if none of them received a surge in traffic). However, this exercise also shows just how much damage can be done simply by uploading an unoptimised or unnecessary image.

Eight ways you can optimise your page performance

  • Set a performance budget
Setting and tracking performance goals is one useful way to keep on top of load time. For example, you might set a target of 0.75 seconds for render start time (the point at which content starts being displayed on the screen) and three seconds for total load time.
 
  • Keep mobile in mind
People will access your site on a range of devices and networks, so it’s important to keep this in mind when developing and testing the performance of your site. For example, a page that contains a large number of objects could be much slower on a mobile network.
 
  • Optimise images
As a rule, web pages that contain lots of large files take longer to load. Since images are often the biggest files on a page, making sure they’re no bigger than they need to be can make a real difference to performance.
 
  • Compress text files
Again, this is about making sure you’re not transmitting more data than you need to. HTML, style sheets and JavaScript can all be compressed (made smaller) before it’s sent to the browser. Perhaps the most popular way to do this is through Gzip, which can cut file sizes by about 70%.
 
  • Make the most of caching
Even if a page is slow the first time someone lands on it, subsequent visits (as well as visits to other pages on the same site) can be made much faster if some files don’t need to be downloaded a second time. This can be achieved by setting long cache lifetimes for files that don’t change very often (such as style sheets and images).
 
  • Load style sheets early
Style sheets govern the layout and formatting of a web page. The page won’t start to appear until all style sheets have finished loading. It’s therefore important to load style sheets as early as possible, ideally before any JavaScript.
 
  • Merge files where possible
Load time depends partly on the number of requests the browser has to make. You can reduce this number by reducing the number of files used on a page. One way to do this is by combining files. For example, style sheets can generally be merged, as can JavaScript files. You can also merge some commonly used image files into a single image (or sprite).
 
  • Prioritise important content
In other words, consider the main reason why people come to your website and make sure they see relevant content first. For example, you will probably want to load the main navigation before a large, decorative image
  • Was this Helpful ?
  • Yes   No
Author: Bob Dowson
Bob Dowson, director of NCC Group’s web performance division.
Now read...
How to make an Oscar worthy ecommerce site
With the Academy Awards being held in Los Angeles this week, we decided to apply Oscar logic to the ecommerce experience and look at what is needed to become an award winning ecommerce site in seven...
Featured eBooks
Copyright eSeller Publishing Limited © 2014
Connect with us
eSeller Media is the UK's leading channel for learning about selling in the digital age
eSeller partners