Make your website quicker and improve UX by not placing an image at the top of the home page

I’ve been tweaking this site to make sure it loads quickly. At the time of writing it scores 100 when you run it through the Google PageSpeed site – as long as there isn’t a (Google) YouTube video on the page. Add some Google Fonts, and that’ll shave off a few points as well.

This is all in preparation for when I start a new job at the end of May managing a university website. In the interview I was asked about page speed, which I took as a good sign. To put this in context, when someone visits the Suffolk Libraries website, they’re more likely to be using a mobile than any other device. As I’ll be working for a university, I assume the proportion of mobile users will be even higher. I therefore want the website strategy to focus on a genuine “mobile first” approach, and a major part of that will be around speed.

Harry Roberts recently posted some advice on improving the (clumsily named) Largest Contentful Paint (LCP) metric. Put simply, this measures how quickly the visible part of a page takes to load:

…The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. Largest Contentful Paint

By visible within the viewport we mean the content a visitor sees before they need to scroll. It’s also known as anything “above the fold”, a term borrowed from the print world. It’s a hard-to-identify area because web pages can be viewed through an infinite number of different screens. For example, here’s the same page on two simulated phones (made using Firefox’s responsive design mode):

Assuming you’ve decided where the fold occurs, you’ll want to make sure anything appearing above it loads quickly. If it’s an image – and it probably is if you’re working on any corporate site – that might include serving an appropriately sized asset, using a compressed file format such as webp and minimising it as much as possible.

Harry makes an interesting, if obvious suggestion:

This isn’t going to work for a lot, if not most, sites. But the best way to get a fast LCP is to ensure that your LCP is text-based… That’s it. As simple as that. If possible, avoid image-based LCP candidates and opt instead for textual LCPs. The chances are, however, that won’t work for you.

In other words, rather than reaching for a hero image, carousel or, worse still, video, try another design technique. A block of text is always going to be a lot quicker to load than even the smallest, most-minimised image. Using text will keep your LCP next to zero.

And here we enter an interesting area. Website strategies normally balance a range of sometimes contradictory factors. On one hand, we have experiential considerations, such as speed and accessibility. On the other, the more traditional marketing concepts of brand and tone, which may encourage the use of imagery. Add often fuzzy notions of people being somehow “visual” by nature, and “above the fold” becomes a contentious area.

This is not to say “don’t use images”. On the contrary, a good photo of real people doing real things in a real place quickly conveys important information to website visitors, and builds trust. This organisation says it does x and y, and is z, and here are the photos to prove it.

But consider when and how these images are used. A lazy loaded, informative image placed within the main text is going to provide a more useful experience than a carousel of stock photos placed above the fold, especially on an old mobile with a patchy 3G reception.