An Introduction to Core Web Vitals
Ever been on a website that’s taking ages to load? Or one that overwhelms you with banners and buttons once you’re finally on? Google understands how irritating and confusing it is, hence the function of Core Web Vitals (CWV).
CWV are a group of specific factors Google uses to determine a webpage’s efficiency from a user’s perspective. The three vital metrics Google uses are Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS). Don’t worry if that all sounds like jargon - it’s quite simple once you boil it down! Fundamentally, LCP pertains to how quickly the page loads; FID refers to how quickly a user can actually start to use the site; and, CLS measures how much things move around when the site is loading. Ultimately, if a site is slow, if its web pages are jumpy and if its design is ugly and counter-intuitive, users will naturally avoid using it and look elsewhere - CWV measures this.
With tenets 1 & 3 of Google’s self-proclaimed philosophy ‘Focus on the user and all else will follow’ and ‘Fast is better than slow’ it’s easy to understand why the speed and efficacy of your webpages are of such paramount importance to Google. Accordingly, Google made CWV’s a ranking factor at the end of 2021, meaning if your vitals are poor your impressions and clicks will be adversely affected. This makes CWV an imperative tool from a design, functionality, UX and SEO perspective for any website.
Measuring Success and Failure
Many of Google's existing tools have the capability to measure CWV. These key measurements are now available on platforms including:
Search Console
Lighthouse
Page Speed Insights
Chrome Dev Tools
Chrome UX Report
Web Vitals Extension
However, despite the myriad tools available it can often be difficult to precisely measure the degree to which CWV are impacting a site. One key method we can employ is to measure Clicks and Impressions through Google Search Console and correlate this to a Data Studio report to view the progress of CWV performance over a fixed period of time. Additionally, we can simply view performance for ourselves at any time by looking at the CWV metrics within Search Console.
Let’s take a look at how this appears in practice…
In the following example, taken from Search Console, you can see the rapid decline of Clicks & Impressions for a site as ‘Poor URLs’ rise sharply and ‘Good URLs’ haemorrhage…
Next, in this example, you can see Clicks & Impressions decreasing at a very similar rate to the decline of the Cumulative Layout Shift (CLS)...
Here we can see the clear correlation between the reduction of Clicks & Impressions and First Contentful Paint (FCP) performance…
Finally, in the following example, you can see how Clicks and Impressions decrease while Time to First Byte (TTFB) also suffers with the same negative pattern. Importantly, it should be noted that while TTFB is not necessarily a metric of CWV, it is an important metric for measuring how quickly the server is responding to a request that has been made. This information could lead to the discovery of something important that needs to be addressed.
Improving Core Web Vitals Performance
Naturally, the next step after identifying a problem with your CWV is to ask - how do I improve this? Unfortunately, there is no quick or easy solution, and improving your overall performance will involve making wide-scale optimisations across your site.
Google go through the steps for improvement in detail on this page, however, a short summary is provided below:
Optimise LCP (Largest Contentful Paint)
The target here is to LCP resources (for example, images) start loading as early as possible, and also to make sure it can load, which means nothing is blocking it from rendering. This could be other assets on the page, or potentially server side optimisations that can reduce the Time To First Byte (TTFB). Finally, make sure the LCP resource is well optimised to reduce the load time of the resource.
Optimise FID (First Input Delay)
Focus on the time it takes before a user can interact with the page. One of the biggest causes of input delay would be large Javascript assets loading on the page. This can be addressed by breaking up the large tasks, and optimising how the scripts are loaded onto the page.
Optimise CLS (Cumulative Layout Shift)
As the page loads, elements should shift from one location to another. This can commonly be caused by images loading, or fonts loading.
Although by no means exhaustive, this list provides some tasks that if completed correctly should lead to an improvement in your website’s CWV score. However, if you are a rookie when it comes to CWV it is always worth consulting with professionals who can formulate the most effective plan for improving your overall performance.
Conclusion
Building a website that is fast, functional and friendly to the user requires a holistic approach that considers all aspects of a site. From the foundations to the finesse, everything contributes to the overall performance, making CWV an intrinsic and indispensable part of the design and maintenance of your website - neglect Core Web Vitals at your peril!
Eliot Thomas
Digital Marketing Executive