Preparing for the 2021 Google update (Part Two): LCP Core Web Vitals

What are Core Web Vitals and how can you prepare for them becoming Search Ranking Signals? Let’s take a closer look, starting with LCP.

Welcome to the second instalment in our multi-part feature on Google’s 2021 Page Experience update. If you missed our previous article, explaining what the update is exactly, you can find it right here.

Ready to keep going? Let’s dive right in…

No one wants to wait eons for a site to load, and your customers are no exception. That’s exactly what Core Web Vitals are all about. Turning your website into a place that people want to visit, and don’t get annoyed by.

There are three Core Web Vitals that you’ll want to keep in mind as you prepare for the Google 2021 page experience update. These are LCP, FID and CLS.

Today, we’ll be focusing on LCP — Largest Contentful Paint. What it is, why it matters, and how to trim seconds off your website’s LCP. So, first things first, what the heck does LCP mean?

The “Largest Contentful Paint”, or LCP, is the amount of time it took to render the Largest element on your Page. That’s largest in byte size, and not visual space. It’s the measurement that Google and other online tools will give you. Simply put, the time it takes to load your heaviest assets.

The reason this is becoming a Google Search Signal is because load times matter to users. The longer they’re kept waiting for a site to load, the more appealing that ‘back’ button becomes, and the more users we lose. This isn’t just an SEO issue. Imagine paying for that user’s click, only for them to get frustrated with the wait time to load your site and decide to try a competitor instead! Not exactly the best use of your money.

How long is too long?

The general rule of thumb is to try and keep your LCP under 4 seconds. You can check how your site is performing through tools like GTMetrix and Google’s Page Speed Insights.

So, how do we trim down our LCP? The quickest way is to just cut down on data and requests. Sounds simple enough, right?

If you’re still amiss as to how you’ll accomplish this, don’t worry. We’re going to talk you through a few methods to help you get your Largest Contentful Paint down to just a few seconds.

1. Images

The most common offender when it comes to load speed times, we often completely overlook optimising our images for the web before adding them to out webpages.

The trouble is, that while cameras and mobile phones can now take ultra high-definition photos and video footage that puts professional broadcasts of just 40 years ago to shame, it’s completely unnecessary for the web!

• Reduce image quality

Cut down on your image file sizes by first reducing them to a resolution of 72 dpi. Many photos are taken with a resolution fit for printing, which can range anywhere from 150 to 300 dpi, but anything over 72 for the web is just a waste of bytes.

• Downscale in size

The second step for optimising your images is to make sure they’re the right dimensions for where you’re placing them. For example, if an image is only needed for use as your company logo in the navigation menu, then there’s no need for you to be using a 1200px by 1200px PNG file. In fact, you might even get away with downscaling by a factor of ten (though, that might be a little small).

Remember though, this is different to the resolution. Think of resolution as the quality of your images, while the dimensions are the literal size of them.

• Formatting

Lastly, you might be surprised to hear that different file formats can hold the exact same image, while having totally different file sizes. PNG, for example, is renowned for being a fairly bulky image format. So, wherever you aren’t in need of a transparent background, you’d be much better off converting your images to jpeg or even web format.

We aren’t expecting you to be some file formatting wizard though. There are plenty of free tools online that you can use to convert files from one format to the other. The same goes for Reducing quality and size of your images, too.

Caching and CDNs

Lastly, you’ll want to set up caching for your website, browser and server side. Caching is like storing stuff in short-term memory. It’s easier to access the information and serve it up, than it is to remember something that’s been sent to ‘long-term’ memory. At least, that’s a decent analogy in explaining it.

What’s really happening when you have browser caching, for example, is the browser is saving a version of your site on the user’s end, as opposed to asking for the files directly from your server every single time the user visits. It’s more effective and speeds things up for the website visitor.

If you also throw a CDN (Content Delivery Network) into the mix, you can pretty much guarantee that your site will provide a consistent experience for users all around the world, any time of day.

And there you have it, a beginner’s guide to speeding up your website and improving your LCP score. Optimise your images, consider switching out or hosting web fonts yourself and be sure to implement caching and a good CDN. It shouldn’t be too difficult to get within that 4-second mark unless your site is particularly complicated. While this guide is far from extensive, it’s an excellent place to start.

Join us next time, when we’ll be looking at more Core Web Vitals and how they can improve and why they can make or break the user experience of your website.

Need help getting found online?

Get in touch to find out more about our digital marketing and SEO services.