Ten things every marketer should know about web performance no. 8: Why you need faster landing pages
If you have a real user monitoring solution and you’ve ever looked at your slowest pages, you’ve probably noticed that certain kinds of page are almost always slower than others.
The chart below is typical of what our real user monitoring customers see. Load times are shown on the x axis, traffic on the y axis. So pages in the top right-hand area are the ones that should ring alarm bells – they’re not just slow, they’re high traffic.
One page that very often appears in this top-right quadrant is the home page. We often find campaign landing pages here too. In this particular example, the campaign landing pages weren’t quite as popular. But they were still slow.
This is just what you would expect. It isn’t necessarily because there’s anything wrong with the home page and landing pages. It’s just because they’re common entry points to the site.
This means that when people land on these pages, they often don’t have the style sheets, images and scripts for the site stored in their browser cache. They therefore have to load everything from scratch.
By contrast, once a visitor starts navigating through the site, a lot of these files will be cached, so subsequent pages can load faster.
This is all perfectly normal.
But it doesn’t look right.
First impressions count, and you really need someone’s first visit to your site to be fast. In the case of landing pages, speed could be the difference between a successful marketing campaign and abject failure.
It’s therefore worth treating home pages and landing pages as special cases – to narrow the gap between load times for these ‘first visit’ pages and those on the rest of the site.
How to go about it
The first step is to identify the pages most often visited with a clear cache. The home page and campaign landing pages are obvious cases. But there may be other common entry points. For example, there could be a handful of pages that perform particularly well in search results. Again, real user monitoring or analytics should be able to help you find them.
The next thing is to consider how to make these pages faster.
You can’t get around the fact that many visitors won’t have resources for these pages in their browser cache. But what you can do is ensure that they only load the bare minimum needed to display the page.
So, instead of loading the styles for the entire site on the home page, you could just load the home page styles.
The disadvantage of this approach is that people won’t now have everything they need cached for subsequent pages.
However, even if you left it at that, the trade-off is probably worth it. The home page is a bit faster, the next page a bit slower. That’s probably the right way around.
But you don’t have to stop here. Once people are on your home page (or other landing page), you still have an opportunity to bring in resources they’ll need later on in their visit.
Say you have one CSS file (home.css) for the home page and another for styles that needed elsewhere on the site (rest-of-site.css).
You load home.css on the home page in the normal way. But you can also load rest-of-site.css in a way that doesn’t slow down the home page.
There are a couple of ways to do this.
The other is to use prefetch. Prefetch is a hint to the browser that it’s going to need a file in the near future. Basically, it’s like telling the browser to load a file if it can find the time and if it won’t interfere with how the current page loads and displays. It’s also very easy to implement:
<link rel="prefetch" href="rest-of-site.css">
Either approach means there’s a good chance that visitors will have rest-of-site.css in their browser cache before they move on to the next page. But, crucially, rest-of-site.css doesn’t do anything to slow down the home page.
It’s a great way to get the best of both worlds.
Keeping it simple
You could go further. You could inline the contents of home.css in the home page’s HTML. This saves the browser from having to fetch the file over the network, speeding up the display of the page even more. The drawback is that this would mean home.css couldn’t be cached separately from the HTML, which is far from ideal. There are ways around this, including using cookies to distinguish between new and returning visitors. But at this point, things are starting to get complicated.
In fact, even maintaining two (or more) sets of stylesheets may turn out to be a bit of a challenge. Someone is going to have to build and update some extra templates. You could find that the biggest barrier to treating entry pages differently is the admin.
But if you can do it, the rewards are there. You’ll be delivering faster user experiences where it matters most. Speed up your home page and common landing pages, and you can expect to see fewer bounces and better performing campaigns.
Also in this series:
Ten things every marketer should know about web performance…
- Why performance matters
- Big images slow web pages down
- Traffic affects performance
- How testing can harm sales
- Third-party content can slow you down
- Custom fonts make text slower to display
- How to find out if a slow mobile site is holding you back
Published date:  15 February 2018
Written by:  Alex Painter