Skip to content

We’ve refreshed our brand. Same graft, sharper edge. Explore the refresh.

Ketchup logo
5 min read
Opinion

Core web vitals and page experience.

Looking to boost your website’s ease of use and efficiency for page visitors? Of course you are. As a starting point, understanding how each component contributes to the overall page experience is essential for optimising the user experience. It’s tricky to know how to get the ball rolling, but a key aspect of measuring user experience is Core Web Vitals (CWVs), a speed metric that informs Google’s page experience signals.

Google recently rolled out a page experience update to desktop search results which allows you to assess the impact of your search rankings on Google Search Console, with metrics being split across mobile and desktop devices. These factors are pivotal for understanding how to improve Core Web Vitals; if your page has poor experience scores, the Core Web Vitals criteria will help you to understand where the issues are arising.

In today’s post, we'll break this process down for you so that you can begin optimising your business’s page experience and climb to the summit of search engine rankings.

Google Core Web Vitals metrics are informed by three categories:

  • Largest Content Paint (LCP) measures visual load.
  • Cumulative Layout Shift (CLS) measures visual stability.
  • First Input Delay (FIP) measures interactivity.

How to improve Core Web Vitals

Optimising your Largest Content Paint (LCP)

The first step towards optimising your Largest Content Paint (LCP) is to prioritise your resources to reflect the order they are downloaded and processed in. Though this is the obvious starting point, it will ensure that your resources are loaded in the critical rendering path in the exact sequence a user would expect them to load, which makes a lot of sense. You can further aid this process by adding preload statements for any stylesheets, as well as to any custom fonts and the main webpage image. Once you have an effective order in place, we recommend streamlining your resources for optimal performance by reducing the size or having a clear-out of any unnecessary files and parts of code.

Enhancing your server is another key area involved in optimising your LCP. It is important to bear in mind that the further you are from a server, the longer data will take to be transferred, so it is important to utilise a Content Delivery Network (CDN) if this is an issue you do encounter. Another way to enhance your server is by ensuring your resources are all hosted on the same server to eliminate any delays caused by establishing a secure connection each time a new website navigation is made. Whilst you’re at it, it’s good practice to ensure you’re caching your resources so that they are readily available when the user wishes to access them after downloading on the first page view, helping subsequent page views to load much faster.

Optimising your Cumulative Layout Shift (CLS)

As Cumulative Layout Shift (CLS) concerns the visual stability of your website, the most common issues encountered are those concerning images and fonts. We have a couple of tricks up our sleeves to work around these issues so, thankfully, you don’t need to be an advanced developer to apply the simple code needed.

You can increase the stability of your images by setting the height and width in the tag, ensuring they fill the space effectively. Reserving the space in this way ensures there is no shift once loaded on the page, so they will appear exactly as you intended them to. There are a couple of methods for increasing the stability of your website fonts. Firstly, to ensure that your website grabs your system font as quickly as possible when loading, use . Alternatively, font display: optional will not only provide a small window of time for your font to load, it will also show a default font if your custom font doesn’t load in time, so you’re covered on both bases.

Optimising First Input Delay (FID)

First Input Delay is primarily informed by your website’s JavaScript, so reducing the amount of JavaScript and cutting down its running time should be a priority. This can be achieved by using prerendering to shift JavaScript processing over to the server instead of the browser, which in turn optimises the website LCP. Breaking down the JavaScript into smaller tasks with code splitting ensures less running time, further enhancing your website’s usability. Essentially, when it comes to optimising your website, the less JavaScript the better, so get scattering those JavaScript breadcrumbs.

To find out more information about how other updates to Google algorithms may affect your website page experience score and search engine result ranking, read our handy guide to Google Algorithm Updates - What You Need to Know. Want to learn more about how a Ketchup-designed mobile-first website can supercharge your Core Web Vitals and page experience, as well as boost conversions? Delve a little deeper into how our web development team can take the hard work out of optimising your website here.