May 12

Core Web Vitals Update: What is it and how do I optimise for it?

Rolling out between June and August of 2021 was one of Google biggest SEO updates yet. The update added three new Core Web Vitals that measure a website’s user experience when determining organic search rankings.

The best way to understand Google’s new Core Web Vitals is to go back to basics and think about how Google works for a moment.

At its core, Google is a search engine that serves up the most relevant results when someone performs a search. You fill your website with original and relevant content, Google matches it to the search terms people are using and then your website shows up in the search results. Simple enough.

This system worked for a long time, but the 2021 Core Web Vitals update is shaking things up. Now, instead of just comparing page content with search intent, Google is assessing three new important user experience (UX) factors: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. Read on to find out more about the new Vitals and how you can optimise your website and improve your search rankings!

Largest Contentful Paint

The first of the new Core Web Vitals is the Largest Contentful Paint (LCP) score. 

LCP measures how long it takes for the main content of a webpage to load. The main content can be either text or rich media (like images and videos). LCP specifically measures how long this piece of content takes to load, not how long the whole page takes to load. LCP is more about gauging the perceived load speed, rather than how long every element takes to load.

Like the name suggests, Google considers your largest piece of content to be the main element of a page. For example, if you’ve got a page with text and a large image, the image will be designated the LCP because it’s bound to catch the eye of visitors. Google determines each page’s LCP and rates your speed at a page level. A good LCP is anything less than 2.5 seconds. Anything over 4 seconds is considered poor performance and can hurt your SEO ranking.

If you want to improve your LCP rating and optimise your website, you can start by looking for issues like:

  • Slow server response times. Server speed impacts your LCP and other loading metrics. If your server speeds are low, you might need to upgrade your hosting to a faster service and reduce your use of plug-ins.
  • CSS and JavaScript optimisation. CSS and JavaScript both change the way pages look, which is why they’re loaded first. All CSS and JS files should be minified and optimised to remove unnecessary and unused code. If your LCP is still slow, you can use asynchronous loading to allow the largest content to load first while the rest of the CSS loads in the background later.
  • Badly optimised images. Most sites don’t need to use the largest possible image files. Instead, images should be compressed and resized. Best practice is to use a small, lossless format like WebP and use the “srcset” HTML function to include different sizes of the same image for the browser to choose from. If you need to use large images, they can be forced to load first with JavaScript Preloading.

First Input Delay

The next Core Web Vital is called First Input Delay (FID). 

FID measures the amount of time between a user inputting an action and the page executing it. User actions include things like clicking buttons or links and pressing keys. FID only measures the first action a visitor makes on your site. Their first action is the one that sets the tone for their whole experience, so it’s important for your website’s response to be snappy! Google wants your FID to be under 100 milliseconds. Anything over 300 milliseconds is considered poor and can harm your SEO rankings.

If you’re not happy with your FID score, it’s usually a problem with badly optimised CSS and JavaScript. You can improve your FID rating by:

  • Minifying CSS and JavaScript. Minifying code removes unnecessary spaces, comments and other elements, reducing overall file size.
  • Loading CSS and JS files asynchronously. Like with your LCP, your FID can be improved by making your CSS and JS files load asynchronously. Asynchronous loading designates the important parts of your CSS (e.g. the CSS needed by the main pieces of your website) and then sets other CSS items to load later.
  • Minimising third-party code. Third party code like A/B testing or analytics tags can slow your site down. You don’t need to get rid of third-party code entirely, but you can explore loading it on-demand so that it doesn’t slow down your FID score.

Cumulative Layout Shift

The final Core Web Vital is called Cumulative Layout Shift (CLS).

You know when you open a website and things like images, links and buttons will shift down as the rest of the page loads? That’s what CLS measures. Sites that have a lot of movement as elements load will have a high CLS score. You’re aiming to earn a lower CLS score by making sure the elements on your website are visually stable. This improves UX by preventing people from doing things like accidentally clicking on the wrong links as the page moves around.

Visual instability on a website usually happens because the browser doesn’t know how big things like images are until it tries to load them. So, when the browser gets to an image, it clears space on the page to load it. Optimising your CLS score is mostly about helping browsers understand the layout of each page so that elements don’t jump around as they load. 

If your CLS score needs a bit of help then you can optimise the following:

  • Use CSS to reserve page space. You can use CSS height and width parameters to tell a browser how much space each element needs on a page.
  • Set image height and width. When responsive design took over, web designers stopped using height and width tags on images. Well, height and width tags are back in fashion! Modern CSS uses height and width attributes to set an aspect ratio for an image and reserve space. Similarly, you can use “srcset” to give a browser multiple options for images so it can reserve the right amount of space for the size of your device.
  • Reserve space for ads. Selling ad space on your site can be a great idea. It can also hurt your CLS score. Make sure to reserve space for ads, especially if you’re placing ads within the content. Avoid placing ads near the top of the page where they’ll have a bigger impact on CLS.

Is Your Website Ready for the New Core Web Vitals? Gordon Digital Can Help Optimise Your Site!

Did you know that Google handles about 63,000 searches per second? Every second of every day, Google is working hard to serve up pieces of the internet that people are searching for. Most of us rely on Google so much that the search giant has almost single-handedly shaped the way we build modern websites. The update to the new Core Web Vitals is no exception!

This new emphasis on UX is already having a huge impact on the internet. Websites and servers are getting faster, and it’s customers who see the benefits. If you haven’t gotten around to updating your website for Google’s new Core Web Vitals then now’s the time! The expert SEO team at Gordon Digital have made the new Vitals a key piece of our tailored SEO strategies, so we can optimise your site and help you climb through the organic search rankings. Get in touch with us if you’d like to know more or if you’re ready to get started!

about the author

Jessica Gordon