What is Core Web Vitals & How to Improve them?

According to Google, User experience is one of the several (approx 200) Ranking factors that they use to rank websites on the search result page.

So, optimizing for a better user experience helps a website to achieve long-term success on the internet. Core web vitals metrics help you measure the user experience on your website and give you opportunities to improve it.

So, let’s understand what it is and how you can improve your score and give your website an edge compared to others.

What Are Core Web Vitals?

Core web vitals are a set of specific factors that are essential to delivering a quality user experience on the web. It is made of three core page speed and user interaction measurements: largest contentful paint, first input delay, and cumulative layout shift.

In other words, Core Web Vitals are the subset of Web Vitals that are used by site owners and all the Google tools to measure User Experience.

There are several other web vitals like Mobile friendly, safe browsing, HTTPS, No intrusive Interstitials, etc that measure the user experience on a website. But it is very difficult for some users to track all use metrics at a time. That’s why Google introduced the core web vitals concept where it only focuses on the key metrics loading, interactivity, and visual stability.

You can track your website core web vitals data in the “enhancements” section of your search console account. You can see the list of pages where the user experience is not that good and it also suggests how you can improve it.

Why are core web vitals important for SEO?

This year Google announced in the Search central blog about the page experience signal. 

Earlier Google considers several page experience signals for ranking including:

• HTTPS
• Mobile-friendliness
• Lack of interstitial pop-ups
• “Safe-browsing” (basically, not having malware on your page)

 But now they have added the core web vitals in it. It takes a major role in it. A good page experience doesn’t replace relevant content. But it gives you a competitive advantage over the low page experience page. 

If the content quality of the two websites is the same then Google uses the page experience signal to choose the winner. That’s why you need to work on the core web vitals of your website.

But, don’t worry you have the time to fix this up until the next year 2021. But Google also uses the past performance score for ranking. That’s why you need to start work on that.

In this article, I will guide you on how you can improve your core web vitals score.

 Largest Contentful Paint (LCP)

LCP measures the loading performance of a website. It means how long the website is taking to load the page completely. 

It counts the time to load the first visible section of the website. That’s why you can prioritize your resources and load the essential content first.

According to Google, LCP does not exceed 2.5 sec when the page starts loading. 

LCP is different from other metrics like Time To First Byte (TTFY) and First contentful paint as it measures the real-world performance from the chrome UX report.

It focuses on the time to load the page for seeing the actual user and start interacting with the webpage. 

You can check your LCP score in Google page speed insight. It shows the data by checking the entire website and shows the list of URLs where improvement needs to be done.

You can see the mobile score of my website which is around 60 and this can be improved if I work on my mobile website design. On the desktop, my website score is above 90 but on the mobile device, it is just 60 due to large contentful paint.

But don’t rely upon this score completely as it changes over time and sometimes asks you to remove essential plugins or scripts to improve performance. 

You can also see an alert about Large contentful paint in the Google search console. (GSC)

LCP is also further divided into three categories. 

1. Good
2. Needs Improvement
3. Poor.

If your LCP is below 2.5 sec then this is considered good, a score between 2.5 sec to 4 sec is considered Needs Improvement, and a score of more than 4 sec is considered poor.

You can also notice that achieving an LCP of less than 2.5 on Mobile devices is very hard. Always try to keep it below 4sec.

Steps to improve the LCP score:

Setup lazy loading

consider using Lazy Loading on your website. If you are using WordPress 5.4 or higher then lazy loading is enabled by default on images. You should focus on Lazy Loading videos as it slows down pages.

Remove any unnecessarily third-party scripts: 

Make sure to use the necessary script only and remove all third-party scripts from your website. Make sure to reduce the main thread Blocking to around 150 to 160ms. 

Upgrade web hosting: 

Try to use better and more reliable web hosting according to your website size. It plays a very important role in the website loading speed. 

If you don’t know how to choose the best web hosting then you should the Guide on Different types of web hosting with buying guide.

Remove large page elements:

The page speed insight tool shows you the large page elements that you can remove to improve your score. 

Minify CSS

Large CSS elements affect the LCP score of a website. That’s why you should minify your CSS code to improve LCP.

First Input Delay (FID)

The first input delay measures the time takes the user to interact with your page. This means the time taken by a web browser to process your webpage and the user will be able to interact with the page like click on a Link, scroll the page or enter login details, etc.

The main reason for the delay in user interaction is the main thread-blocking script tasks. 

It is very important to keep the FID time low as it directly affects the user experience on your website. Google set the acceptable FID score as below 100 MS.

For websites like Blogs or articles, FID does not matter most as the interaction that happens is the scrolling of the page or Zoom in or out, sign up for an email newsletter.

But for the website where login or signup is required, FID plays a major role in it. Because users have to type the login details in the form and when the website takes a very long time to accept the details it will create a very bad user experience. 

FID is also important for websites like Ecommerce websites where users have to add the product to the cart and login to the user account. That’s why you need to work on minimizing the First Input Delay(FID).

Steps to improve the FID score:

Remove unnecessary Third-party scripts: 

You can improve your FID score by removing unnecessary scripts (like Google Analytics, heatmaps, Onesignal, etc)

Defer JavaScript:

If your website is loading javascript at the beginning of the page load then it is challenging for users to interact quickly. That’s why you can enable the Defer javascript using cache plugins like WP-Rocket, Litespeed cache, etc. 

It will load the javascript files that are not necessary at the beginning of the page load. It will significantly improve your overall website speed.

Enable Browser cache:

By enabling browser cache you will save lots of server resources and your website will not request all the files for old visitors. The browser will load some basic files from the cache file and improve your FID score.

Enable Gzip compression 

You can reduce your HTML, and CSS file size up to 80 percent by enabling the Gzip compression. You can do this by Cloudflare CDN or from your web hosting dashboard.

Cumulative Layout Shift (CLS)

Cumulative layout shift focuses on the overall visual stability of your website. This usually happens due to DOM manipulation or the lack of dimension attributes for major media elements.

According to Google CLS should be below 0.1. You can better understand how cumulative layout shifts happen in the website in the below graphics.

Steps to improve the CLS score

Use set size attribute dimensions media files (video, images, GIFs, infographics, etc.):

You can define a specific size of media so that the user browser knows how much space that element is going to take. So, that it won’t change after the page is fully loaded.

Reserved space for ad placement

If you are using auto ads on Adsense then your ads show randomly and sometimes it pushes the content below to show ads. That’s why you need to reserve some specific space for ad placement on the website.

Add new UI elements below the webpage:

If you are using some UI elements like pop-ups then you can show them at the bottom of your website. In this way, it won’t push the content down and improve your CLS score.

Conclusion

Core web vitals are some of the best user experience signals that developers and website owners have today. If you follow the above guideline properly you can easily improve your overall speed and improve your core web vitals score.

Now it is your turn. 

Which method are you going to try first, let me know in the comment section? 

If you like this article, do share it with your blogging community on social media.