BLOG
Click to hear an audio recording of this post

The much-anticipated/dreaded page experience update is on its way. The one thing you must be tired of hearing about is core web vitals, right? Google officially added core web vitals as important ranking factors in June 2021, and you sure wanna be prepared for it.

At its core, page experience update aims at improving the user experience offered by website publishers. This benefits site visitors as it helps them find information in a shorter span of time. And it benefits website publishers because it brings more sales and revenue.

If you’ve been wondering about the importance of core web vitals, ways to measure them, and tools to troubleshoot issues, then you’ve landed at the right place. 

In this comprehensive guide, we’ll learn everything you should know about the page experience update. We’ll also discuss some actionable strategies to get your website ready for the update.

What are Core Web Vitals?

But first, what are core web vitals? Core web vitals are metrics developed by Google aimed at improving the core page experience needs of any webpage – loading, interactivity, and visual stability.

As a part of the page experience update, Google has decided on adding three core web vital metrics, namely Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), to the existing page experience signals.

The existing page experience signals are mobile-friendliness, safe browsing, HTTPS, and no intrusive interstitials.

What are Core Web Vitals

Source

These three core web vital metrics are the first of the many other metrics that Google intends to add to the list of page experience signals in the future. 

So, you might be wondering what all the hype about these core web vitals is. Right?

According to Google, optimising your website for these core web vitals will make the “web more delightful for users across all web browsers and surfaces, and helps sites evolve towards user expectations on mobile.”

So, to get your website ready for the core web vitals ranking boost, Google recommends that you use these core web vitals as a “guidepost for user experience across all pages.” By preparing your website for the core web vitals boost, you’d be:

  • Offering a much better experience for users who visit your website ultimately resulting in better sales.
  • Minimising the drop in rankings that you may experience once Google rolls out the page experience update.
  • Preparing your website in order to sustain a healthy web ecosystem in the long run.

However, you must know that Google stresses prioritising the quality of information available on a webpage above the core web vitals. Simply improving core web vital metrics would be of little use if you do not offer high-quality, relevant content to your users.

Google will be, in fact, using the page experience signals as a “tie breaker” when multiple pages have similar quality content up on their site. 

According to Google, “if there are multiple pages of similar quality and content, those with better page experience might perform better than those without.”

You know how competitive the whole SEO space is, especially if you’re in a competitive niche. 

So, if you are doing a good job with the quality of your content, then working on core web vitals may be your pathway to jumping up a few places in the SERPs over the other sites that are not focusing on these page experience signals at the moment.

Therefore, the bottom line is that the core web vitals wouldn’t override the quality of content. But, optimising for these metrics will bump you a few places up the SERPs, leading to much better ROI for your business.

What are the Different Core Web Vital Metrics?

Now that you’ve learned the importance of core web vitals, let’s have a more in-depth look at the different types of core web vitals metrics.

Largest Contentful Paint (LCP)

LCP is the first core web vital metric that measures the perceived load speed of a webpage. It is used to measure how quickly users see the content on a page. 

While older metrics help you measure the speed of a page, the LCP is a more user-centric metric that offers importance to how fast a user is able to see useful information on a page.

The First Contentful Paint (FCP) is a metric that captures the time taken to load the first element of a page. However, such a metric might not measure the time taken to load useful content for the user. Hence, the LCP is a more relevant page experience metric.

Technically put, LCP measures the time taken to load the largest image or text block on the screen visible to the user. This is more relevant, as the largest image or text block will contain the most useful content that the user can consume. And, this largest image or text block will usually be present above the fold.

Google has set certain threshold values for all the core web vitals in order to give web publishers a benchmark value to work towards. For LCP, Google recommends anything between 0 to 2.5 seconds as a “Good” score to offer a good user experience.

What is LCP

Source

First Input Delay (FID)

The FID is the second core web vital metric that measures how responsive your page is to user input. It basically measures the load responsiveness of your site. 

The FID metric quantifies the experience users have when they are trying to interact with a web page. The interaction can be clicking a button, filling up a form, etc.

FID is an important page experience metric as it measures the first impression that users have of your site with respect to interactivity. Just like in the case of LCP, google has a recommended threshold score for the FID metric as well.

According to Google, websites should strive to have an FID score anywhere between 0 to 100 milliseconds. This will be categorised as a “Good” score. 

What is FID

Source

Usually, a high FID score represents a high input latency. This latency is caused when the browser’s main thread is busy with another task while the user tries to click on a link, tap or a button, or perform any other interaction with a site.

Web developers, while writing code, may assume that their piece of code will start running immediately. But often, as users, you would know that such is not the case. 

Oftentimes, you’ll find yourself waiting for the page to respond after you’ve tried to interact with the web page. And this is what Google aims to eliminate with the FID core web vital metric.

Cumulative Layout Shift (CLS)

The CLS is the third core web vital metric that forms one of the page experience ranking signals. It measures how often things move around in a web page when a user is trying to consume content or interact with the web page. 

In short, this means that CLS measures the visual stability of a web page.

To explain this further, how often have you opened a web page and started to read its content but suddenly, things start shifting around the page. This interrupts your content consumption process. 

Similarly, you might have landed on a page, clicked on a link, only to find that the link shifted to a different part of the page, and you had actually clicked on an unwanted ad/link. These experiences are often annoying to web users. 

Visual stability example

Source

Sometimes, such experiences are not just annoying but may even lead to serious problems and unwanted circumstances. Google attempts to reduce such instances by measuring the CLS page experience signals.

The unexpected movement of elements on a web page happens when the pages’ resources are added asynchronously to the page or when dynamic elements are added to a page on top of existing content. 

For example, an image, video, or a third-party ad may be dynamically added to your existing web page leading to the layout shifts in the page.

Google recommends the websites should strive to keep their CLS score anywhere between 0 and 0.1. 

What is CLS

Source

How to Measure Core Web Vitals?

To get your website ready for the core web vitals ranking boost, it is essential that you measure the core web vital metrics for your site’s pages. Only then will you be able to come up with strategies to improve these metrics and troubleshoot any issues.

There are various ways to measure core web vitals:

  • Google Search Console
  • Google PageSpeed Insights
  • Chrome DevTools
  • Chrome UX Report
  • Lighthouse
  • Web Vitals Extension

Some of these use lab simulations, i.e. use sample data to test the core web vitals metrics of your site. 

Other tools collect actual data from your site and populate the metrics based on actual user interactions with your site’s pages. This is also known as field data. 

While lab simulations can be an easy way of measuring the core web vitals, they only paint a rough picture of how your site’s page experience signal measurements might look like. 

On the contrary, the data based on real user visits will be able to offer you better insights into your site’s performance. However, for populating field data, such tools need sufficient data from your site. You may not be able to find field data for relatively new sites with lower traffic.

Let’s have a look at each of these tools that can help you measure your site’s core web vital metrics.

1. Google Search Console

Google Search Console has a new core web vitals report. This report allows you to identify pages that may lag behind the recommended threshold for the core web vital metrics. This report is generated based on field data collected from actual users that visit your site.

How to measure CWV
Measuring CWV

Source

2. Google PageSpeed Insights

PageSpeed Insights is a free tool by Google that helps you measure both core web vitals using both field and lab data. As mentioned before, lab data refers to sample simulation data, while field data refers to the data collected from actual website visitors.

Field data vs Lab data

3. Chrome DevTools

Chrome DevTools is a lab tool that helps you measure the core web vital metrics for specific pages on your website. You can directly measure LCP and CLS using the Chrome DevTools. 

However, there is no direct way of measuring FID. Instead, you can measure the Total Blocking Time (TBT), which is an indirect measure of the FID.

You can access Chrome DevTools by opening a website in Chrome, right-clicking and selecting the “Inspect” option from the list.

Core Web Vitals Chrome DevTools

4. Chrome User Experience Report

The Chrome UX report is another great field tool that can be used to measure the core web vital metrics of your website. The Chrome UX report Data Studio dashboard offers an overview of the core web vitals of your site and a metric performance view.

Chrome-UX-Report
Chrome UX report data studio

Source

5. Web Vitals Extension

The Web Vitals extension for Chrome helps you measure the core web vitals of your site in real-time. The extension captures all three core web vital metrics LCP, FID, and CLS, in real-time. 

This data is consistent with the core web vitals data measured from Google Search Console, Google PageSpeed Insights, and Chrome UX Report.

Web Vitals extension

How to Prepare Your Website For the Core Web Vitals Rankings Boost?

Here are some actionable strategies that can help you be best prepared for the upcoming core web vitals rankings boost:

1. Speed Up the Server Response Times

The speed of your web pages and LCP score is directly related to the server response times. The more time your servers take to respond to requests, the higher will be your LCP. 

Speeding up your server response times may have a massive impact on LCP and other important speed-related metrics on your website.

Here are a few ways in which you can reduce the server response time of your site:

  1. Upgrade to better hosting: Changing your web hosting provider or upgrading to a better plan may be the first step you need to take to reduce the server response time. So, start by checking your web hosting speed. You can also try to upgrade to a better hosting plan that offers high performance. Although, you might have to spend more for it.
  1. Optimise your database: Slow database queries may also be a major reason behind slow server response times. Hence, you must try to optimise your database with the help of developers. They can rewrite the SQL queries, implement indexing to speed up database requests, or make changes to your database schema. This will help you achieve the best possible database performance.
  1. Use a Content Delivery Network (CDN): Another great way to reduce server response time is to use a CDN. CDN is nothing but a distributed network of proxy servers. These proxy servers are spread across different geographical locations. So, if you have a global audience, the request will be sent to the closest server, thus drastically reducing the server response times.
  1. Implement caching: Caching can store certain files in your browsers for future requests when the user loads the same web page again. Therefore, by configuring caching, the number of server requests will be reduced. This in turn can help improve the LCP of your site.
  1. Remove unwanted CMS plugins: Too many plugins can degrade the performance of your website by reducing the server response times. The more weight you add to your web pages, the more time the server will take to respond to the requests. Hence, start by auditing your CMS plugins and keep only the ones that are absolutely necessary for your website.
  1. Minify scripts: Minifying is the process of reducing the sizes of JavaScript and CSS files on your website. Reducing the script sizes will not make any difference in the code but simply make the code unreadable. Implementing script minification this way can, again, significantly reduce the server response times.

2. Optimise Images Before Uploading

Images are usually the heaviest elements of any web page and thus significantly contribute to its slowness. Even one heavy image on a page can significantly affect its speed and performance.  Hence, optimising images can be a great way to improve your site’s LCP score.

Here are some strategies that you can implement to optimise the images on your website:

  1. Compress images: You can use tools such as TinyJPG to compress images before uploading them to your CMS. This way, you can drastically reduce the size of the images even without compromising on the quality of the images.
  1. Use Image CDN: Using a CDN for serving images will help you improve the LCP score of your site.
  1. Use next-gen image formats: Next-generation image formats such as AVIF, JPEG XR, WebP, etc. can help you deliver high-quality images at smaller sizes. Hence, adopting these formats can also help you speed up the image load time on your web pages.
  1. Implement lazy loading of images: Lazy loading helps you load images at the exact time when a user scrolls through that part of the web page. When you implement lazy loading, all the images will not be loaded at once when the user lands on the page. Instead, only the images will lazy load as the user scrolls through the page. This will make a massive difference to your site’s LCP score.

3. Set Proper Dimensions for Images and Embeds

As you already know, the CLS score is governed by the visual stability of your website. 

One of the main reasons for visual instability on any web page is because the dimensions of images or embeds might change while the page loads. This leads to unexpected layout shifts, thus hurting the user experience.

To tackle this problem, you can specify the correct dimensions (height and width) that images or embeds will occupy using CSS scripts. This way, the user’s browser will allocate the specified amount of space on the page when it is loading.

Using CSS, you can reserve a space for the image or any embed (such as a video or a GIF) with the correct dimensions. This will help you avoid unexpected layout shifts that may annoy the users. 

4. Reduce the Amount of Unused JavaScript Execution

As you already know, the FID score is used to measure the interactivity and responsiveness of your web pages. A poor FID score means that your page interaction with users is taking more time. This time can be reduced by removing unused JavaScript from your web pages.

Deferring unused JavaScript saves memory space and helps you achieve a faster interaction time with website visitors. 

To get an idea about the amount of unused JS on your site’s pages, simply head over to your website, right-click, and select the “Inspect” option from the list.

After this, open the coverage report and load the page. At the bottom, you’ll find the data on the amount of JS that is unused on your website.

Unused JavaScript Execution
Reducing Unused JavaScript Execution

Once you have analysed the amount of unused JS script on your site, you can start reducing it. You can do this through code splitting.

Sometimes, huge JS files at the top of the page may block the loading of the page. This leads to a poor FID score. To tackle this, relocate such scripts to the bottom of the page. 

This way, the user can start interacting with your web page without having to wait for the huge JavaScript to execute.

Another way is to make the JavaScript executions asynchronous by adding the async attribute. This way, the execution of the JS code will not block the user’s interaction with the web page.

5. Preload Resources That are Above the Fold

The core web vital, LCP, is used to measure the time taken for the largest element on the screen to load. This is usually the largest text or image block that is above the fold on your web page. 

To speed up the LCP element on your site’s pages, you can configure them to preload. This means that the browser will preload these resources on the page as the first priority. This will significantly improve the LCP score of different pages.

You can use a simple HTML code to indicate the resources/elements that you want the browser to preload. Your browser will also cache these resources, hence making them available immediately when needed.

Font defined in stylesheet increases LCP
Preloading font to lower LCP

Source

You can identify the pages on your site with lower LCP score. You can then specifically implement preloading for the LCP and all the above the fold elements.

6. Optimise the Loading of Third-Party Scripts

Other than the elements of your website, other third-party scripts such as ad scripts may also be responsible for slowing down your site. This might result in a bad user experience. 

Hence, you must also audit and optimise the third-party scripts on your site’s pages.

Sometimes, an ad script may be unnecessarily slowing down your site while not fetching you the best ROI. Removing these ads may yield you much better results, and you can identify this through thorough site audits.

If you find that you absolutely need the third-party elements, you can find ways to host the script yourself. This way, you’ll get full control over the script, allowing you to reduce the server response times. 

For example, you can asynchronously load the scripts or push them to the lowest priority in order to improve your site’s LCP and FID scores.

Final Thoughts

Page experience is another significant algorithm update by Google aimed at improving the user experience offered by different websites. 

Not only does it aim to improve users’ online experience, but preparing for the update will also lead to significant improvements in website publishers’ key metrics such as sales and revenue.

The tips and strategies described in this comprehensive guide will help you understand everything you must know about the core web vitals rankings boost and help you improve them in time for the page experience update.

If you need help with getting your website ready for the CWV ranking boost, get in touch with our SEO agency. We offer multiple SEO services including optimisation for new page experience updates.

 

Enter Your Website & get an instant SEO Report for FREE