Core Web Vitals Optimisation

How to Get Your Website Ready for Core Web Vitals Ranking Boosts – Tools and Strategies to Troubleshoot and Fix Issues

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 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.

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.

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.

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.

Source

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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
2. Use Image CDN: Using a CDN for serving images will help you improve the LCP score of your site.
3. 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.
4. 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.

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.

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.