What is Core Web Vitals & How to Improve them? [2020]

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.

search signals for page experience
  • Save

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.

core web vitals metrics in search onsole
  • Save

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.

core web vitals importance
  • Save
Source-Google search central Blog

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.

page speed insight score
  • Save
Page insight score for Mobile device

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. In desktop my mobile score is above 90 but in 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.

 Largest Contentful Paint (LCP)
  • Save

You can also notice that achieving an LCP of less than 2.5 in 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 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:

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

the largest contentful page element in page speed insight report
  • Save

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)

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 of 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 is below 100 MS.

First Input Delay (FID)
  • Save

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, log in 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 script: 

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

cumulative layout shift infographics
  • Save

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 a 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 of ad placement in the website.

Add new UI elements below the webpage:

If you are using some UI elements like pop ups then you can show it in 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 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 with your blogging community on social media.

Categories SEO

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I currently share top-notch information related to Blogging, SEO, etc. If you want to start a blog easily and create a fortune out of it, then you will love key2Blogging. You can learn more on the about us page.

Leave a Comment

0 Shares
Share via
Copy link