Three kinds of web page that need special web performance attention

12 September 2019

Imagine for a moment that you're looking through real user monitoring results for your website for the very first time.

And you see something that worries you.

An outlier. A high traffic page that looks unusually slow.

However, it takes only a second for you to realise what's going on and for you to breathe a sigh of relief.

It's the home page. Of course it's busy and of course it's relatively slow. Why? Because it's a common entry point to the site. Many visitors don't have static resources, such as files and scripts, cached for this page in the way they do for subsequent pages.

At this point, it's tempting to shrug your shoulders and move on.

It is, after all, entirely normal.

But if you think about it, it probably shouldn't be.

It may be a cliché, but first impressions count. And you may find that some visitors give up waiting for the home page and never get to see how fast subsequent pages are.

In other words, that first step in the user journey has to be at least as important as the second.

So what do you do about it?

Prioritisation

Optimising a site for speed can be a daunting enterprise. There is often a complex web of dependencies, not to mention different stakeholders with different priorities.

This can be paralysing. Too often the inability to do everything can stop us doing anything.

That's why I sometimes advocate treating certain pages as special cases. The home page is a good place to start. Does it really need that bundle of scripts that are only used on the product pages? Is it really using 500KB of styles? Or is it worth taking the home page off the standard template and doing something a little different? For example, including only the styles you need for that page and loading them inline. Yes, you lose the ability to cache those styles separately (although there are ways around this), but if you're inlining only a few styles for a single page, it probably doesn't matter, especially if the majority of visitors arrive with a clear cache anyway.

But if you're not loading everything on the home page, are you not just postponing the problem? Won't people be equally frustrated when the second page in their journey turns out to be slower than expected?

Not necessarily. Another advantage of treating the home page as a special case is that you have the opportunity to prefetch resources people will need on subsequent pages. This is a way to make the most of idle time to load resources in advance. While people are looking at your home page, you can ask the browser to load the site-wide CSS in the background. In other words, you get the best of both worlds.

So what other page types would benefit from this approach?

One obvious candidate would be the campaign landing page. Landing pages often have very different requirements from the rest of the site, but frequently load resources that visitors to those pages will never need.

Finally, you might want to look at any other kinds of page that see a high proportion of new visitors. Typical entry points to the site will be those pages that perform well in search engine rankings (although if they are at the top of those rankings, they may already be getting a performance boost from prerendering).

Sometimes, those of us who have existed in the web performance bubble for any length of time seem to expect web developers to drop everything and focus on performance to the exclusion of all else. But ultimately, speed is just one of a number of competing priorities. So once you've addressed some of the big web performance no-brainers, it can make sense to focus on one or two areas where you know your efforts will make a serious impact.

tl;dr

Your home page, campaign landing pages and other key entry points to your website probably need to be treated differently from other pages.

This is partly because they represent your chance to make a good first impression. So you need them to be fast.

But people visiting these pages typically won't have any resources from your website in their browser cache. This will make them seem relatively slow.

Prioritising key pages will help you get the most from your web performance optimisation efforts, and this post talks about some of the approaches you can take.