How To Fix Core Web Vitals

Core Web Vitals

Core Web Vitals are a set of three metrics that measure the speed, interactivity, and visual stability of a webpage. They are considered to be important ranking factors for search engine optimization (SEO), and improving them can help your website rank higher in search results and provide a better user experience.

In short, Core Web Vitals are a subset of factors that will be part of Google’s “page experience” score (basically, Google’s way of sizing up your page’s overall UX).

The three Core Web Vitals are:

1. Largest Contentful Paint (LCP):  This measures how long it takes for the largest content element on a page to load. LCP should be less than 2.5 seconds in order to provide a good user experience.
2. Cumulative Layout Shift (CLS): This measures how much a page’s layout shifts unexpectedly as it loads. CLS should be less than 0.1 for a good user experience.
3. First Input Delay (FID): This measures how long it takes for the browser to respond to a user’s first interaction with a page, such as a click or a tap. FID should be less than 100 milliseconds for a good user experience.

There is a fourth metric called Interaction to next paint (INP) that Google has announced will replace FID as part of the Core Web Vitals in March 2024. INP should be 200 milliseconds or less for a fast and responsive experience.

Why are Core Web Vitals Important?
Google plans to make Page experience an official google ranking factor.

LCP How To Fix:

Steps To Fix The LCP Issue: Longer Than 4s (Desktop)

Follow the below steps to fix the LCP Issue: Longer Than 4s (Desktop) or (Mobile):

Step 1: Identify The URLs That Are Causing The Issue

The first step is to identify some example URLs that are causing the LCP Issue: Longer Than 4s (Desktop) or (Mobile) error. 

Visit Search Console and click on the Core Web Vitals link under the Enhancements Tab.

Now, click on Open Report.

You will see the total number of URLs affected by the LCP issue.
Thereafter, click where it’s written: LCP Issue: Longer Than 4s (Desktop) or (Mobile).

You will see an example URL that is causing the error along with the total number of URLs that have the issue.

Step 2: Measure The LCP Of The Page Elements 

Once you have identified an example URL, visit Google Page Speed Insights and enter the URL of your page.

Please note: Enter the exact example URL in the tool and not your home page URL. 

After the test is complete, you will see the LCP of your page. The LCP score is different for mobile and desktop. You only need to take care of the mobile score because fixing the mobile LCP will automatically fix the desktop or mobile LCP.

You need to pass the Web Vitals Assessment test to fix the LCP issue of individual pages on your site.

Step 3: Identify The Element With The Largest Load Time

Now, slide down below to the Opportunities section. Here, you will see suggestions to help your page load faster. 

For example, one of the suggestions in my case is “serve images in next-gen formats”. 

In your case, the suggestion might be different. So, you need to check all the suggestions returned by the Page Speed Insights tool one by one.

When I clicked on the first suggestion, Google recommended that I should use a plugin to optimize the images on my site from JPEG or PNG to JPEG 2000, JPEG XR, and WebP.

I was also able to see all the list of images that the page was using along with the resource size and the amount of potential savings I can earn in terms of page speed if I change the format of the images. 

What I did was that I converted all the images of my site into WebP format. Google developed the WebP format for images.

How did I convert all the images on my WordPress site to WebP format? By using a plugin named WebP converter for media. Simply install this plugin and this software will convert all the images in your WordPress site into WebP. Please note that this technique works only for WordPress sites.

After you install the plugin, you need to activate it by going into the Plugin section of the WordPress dashboard and clicking on activate.

Once the plugin is activated, click on Regenerate images and the plugin will convert all your images into WebP format.

Please note that although the plugin converts all the images, you can’t see them when you click on the source code. But, don’t worry, your images will get converted. Once you make this change, recheck your website on the Page Speed Insights tool and you will see the issue is fixed.

I used this plugin on my website, and the above issues that Google was showing are now fixed.

Similarly, the second suggestion that Google gave was to install a lazy load plugin or the AMP plugin to further lower down the page load time. 

Make sure to take a backup of your site because these plugins might change the design of your site. 

Bonus: Get Details Of Individual Requests Your Browser Makes To Your Server To Improve LCP

Visit the site WebPageTest.org and enter your URL for a speed test. 

Now, click on the waterfall diagram next to any of the RUNs.

You will see all the requests the browser makes to display all the different elements of the URL. 

Gather all the suggestions and implement them on your site to improve page speed.

Step 4: Validate Fix

After you have made all the changes to your site based on the suggestions given by the Google Page Speed Insights tool, go back to the Page Speed Insights tool and check your page again.

See whether your page passes the Core Web Vitals Assessment test. Continue implementing the suggestions until your page clears the test.

In most cases, upgrading to a better server and using a CDN can drastically improve the page load times. 

Once your page clears the test, visit the Search Console and click on “Validate Fix”. This will tell Google that you have made all the changes to improve your page load speed and the LCP issue is fixed now.

Have patience, because it might take a few weeks of time for Google to check and validate the LCP issue.

2. CLS - Cumulative Layout Shift

Cumulative Layout Shift is a ranking factor in Google as it affects the website’s performance and user experience. It is one of the Core Web Vitals metrics, and Google can penalize a site that does not meet its standard.

A poor CLS score indicates that a website is unreliable, which can cause visitors to leave faster. So, optimizing your website for a high CLS score is an essential component of a successful SEO strategy.

A good CSL Score-
Google has set a standard for all Core Web Vitals metrics to help site owners measure and improve their CLS scores:

• Good – below 0.1 is the acceptable score according to Google’s standard.
• Needs improvement – between 0.1 to 0.25 indicates you need to make changes to reduce unexpected shifts.
• Poor – above 0.25 can damage your site’s ranking.

How to measure-
A popular tool to help measure your real user data is PageSpeed Insights. Here are the steps to use PageSpeed Insights to calculate a web page’s CLS score:

• Enter a web page URL and click on the Analyze button to test its performance.
• PageSpeed Insights will show the overall Core Web Vitals Assessment And whether the web page meets Google’s standard. The tool will show the result for Mobile devices first.

CLS How To Fix:

Step 1:

1. Defining Dimensions for Images and Videos

All image and video elements on a web page need width and height size attributes to avoid unexpected shifts. An example of how to set your width and height attributes looks like this:

<img src="example.jpg" width="400" height="400" alt="Example of an image.">

However, responsive images need to use the same aspect ratio to help browsers calculate the correct amount of required space to display them.

The srcset attribute defines a set of different image sizes using the same aspect ratio to help browsers deliver responsive images correctly. Here is an example of what the code looks like using this attribute:

<img width="1000" height="1000" src="example-1000.jpg" srcset="example-1000.jpg 1000w, example-2000.jpg 2000w, example-3000.jpg 3000w" alt="Example of an image.">

Most modern browsers can also set the default aspect ratio based on the image or video’s width and height attributes. So, a way to prevent layout shifts is by using CSS aspect ratio boxes like in the example below:

img {

aspect-ratio:attr(width)/attr(height);

}

This code helps the browser predict the different aspect ratios by following the image dimensions while loading it.

 Step 2:

Setting Width and Height Banner Ads, Embeds, and iFrames

Reserving space for banner ads, embeds, and iFrames helps to avoid layout shifts.

Banner Ads

Banner ads pushing visible content can cause high layout shifts, which leads to a suboptimal user experience. Ad networks and publishers that support dynamic ad sizes should reserve a placeholder beforehand to prevent poor CLS scores.

Style the element before the ad tag library loads to prevent banner ads from pushing visible content. Applying this method is also important when an ad fills an entire page’s row or column to prevent layout shifts even if the ad does not load.

Use the slot element to specify the ad size using the min-height and min-width CSS properties:

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

In addition, add CSS media queries to specify different minimums when using different screen sizes:

@media screen and (max-width: 970px) {

  #ad-slot {

    min-height: 250px;

  }

}

Use your historical data to choose the best size for the ad slot. Make sure to consider various form factors and subtle differences in ad sizes.

This method also works when you insert non-sticky ads to a web page. By adding the required space, ads will not trigger layout shifts when loaded off-screen.

Embeds and iFrames

Embeds can take various forms, so it is easier to be unsure of their size on a web page. Therefore, platforms do not always reserve the required space for embeddable widgets and applications.

Similarly, an Inline Frame (iFrame) also brings third-party elements to a web page, which may cause layout shifts.

To avoid having embeds and iFrames causing poor CLS scores, inspect their sizes using your browser developer tools. Click on the pointer icon on the upper left corner of the developer tools and select the elements you want to inspect.

After selecting the element, the tool will show its size.

Example as below:

div#respond.comment-respond 930x433.8

Color

I#2F1C6A

Font

10px Muli, sans-serif

ACCESSIBILITY

Name

Role

Keyboard-focusable

Generic

Add these sizes to your embeds or iFrames elements.

Step 3:

3. Using font:display for Custom Fonts

Adding a custom font to your website can increase the CLS score by causing:

• Flashes of Invisible Text (FOIT) – page rendering will display invisible text or a blank font until it loads the custom font.
• Flashes of Unstyled Text (FOUT) – browsers display a fallback font until they load the custom font, momentarily ignoring the page layout.

Loading a custom web font can cause the layout to shift significantly, often due to using a different amount of space than the system font requires. Use font:display values, such as auto, fallback, block, swap, and optional, to avoid invisible and unstyled text.

Another way of avoiding significant style changes to your web fonts is by choosing a similar system font:

@font-face {

  font-family: 'Pacifico';

  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(www.examplefonts.woff2) format('woff2');

  font-display: swap;

}

With Google custom web fonts, prevent layout shift by adding &display=swap after your link:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Adding a <link rel=preload> value to your font file will also help avoid layout shifting when loading custom web fonts.

Step 4:

4. Reviewing Dynamically Injected Content

Another reason behind a CLS issue is dynamic content. Websites often use dynamic content to attract visitors to complete a specific action. However, when a new content element pops up at the top or bottom of a page, it often shifts the content around it.

Therefore, avoid injecting dynamic content above existing content. Some of the ways to review dynamically injected content include:

• Inviting users to initiate changes – add a user interaction element to trigger new content load to prevent unexpected shifts. Some examples include a Read more or a Refresh button. Note that you should keep the layout shifts within 500ms to avoid affecting CLS.
• Loading content off-screen – since shifts that happen off-screen do not contribute to CLS, another option is to load dynamic content outside the user viewport and use an overlay to invite users to see it, such as a Scroll Up notification.
• Using a fixed size container – helps prevent shifting your layout. One of the options is using a carousel, which is also a suitable alternative if your dynamic content replaces an element with another. Ensure that any links or controls wait for the transition to avoid accidental clicks.