Core Web Vitals Case Study (June 2021 Update)

This is the most simplified SEO case study that explains the absolute relation between Core Web Vitals and UX.

Firstly, you will get to know what is the bottom line for Cumulative Layout Shift (CLS), First Input Delay (FID), and Largest Contentful Paint (LCP).

Secondly, I will share with you the relation between Core Web Vitals and UX.

Well, Google is looking at Core Web Vitals as a ranking signal. So, I will also give you some amazing techniques to optimize your website for Core Web Vitals.

So, without wasting time let's dive right in.

1. 53.77% Of Sites Had A Good Largest Contentful Paint (LCP) Score.

Before writing this case study, it was important to know what Google had to tell about the three factors that make up Google’s Core Web Vitals:

  • Largest Contentful Paint (LCP).
  • Cumulative Layout Shift (CLS).
  • First Input Delay (FID).

So before moving further, I will tell you what's LCP.

LCP is a measure of how long it takes a page to load its visual content.

Core Web Vitals and " Page Experience".
  • Save

Taking reference from the “IProspect” Core Web Vitals case study, I have been able to categorize the websites according to their performances.

The “Web Dev” case study on LCP (Large Contentful Paint) gives an absolute idea of how well websites perform that have a better LCP score.

And here's what the LCP reports reveal.

53.74% of the websites had a good LCP Score
  • Save

Only 53.74% of the websites had a good LCP score, and only 17.47% of the websites had a very poor LCP Score and 28.76% needed improvement in their LCP score.

The majority wins!

But what was exciting is nearly 46.26 percent that is near to half of the websites needed improvement.

I will share with you how to improve your LCP score at last.

2. 53.85% Of Websites Had Optimal First Input Delay (FID) Ratings.

Now, it's time for understanding the First Input Delay (FID).

First Input Delay (FID) is the measure of the time from when they click a link, tap on a button, or use a custom, JavaScript-powered control to the time when the browser has responded to the end-user.

So here's what the FID reports say.

53.83% of websites had a good FID Score.
  • Save

As you can see, 53.83% has good FID, whereas 37.55% needs improvement, and 8.57% has a poor FID score.

You might also have analyzed that FID scores were nearly similar to LCP scores. Isn't it?

But what made me happy was “very few (8.57%) had poor”. Also, almost 40% of the websites that were analyzed need improvement in the First Input Delay (FID).

3. 65.13% Had Optimal Cumulative Layout Shift (CLS) Scores.

Now let us take a look at the Cumulative Layout Shift (CLS) scores from Google Search Console (GCS).

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that is a measure of all the layout shifts that are not generated by user interaction.

The webpages that have a steady loading process have good CLS scores.

So here's what the CLS reports say.

65.13% Of Websites Had A Good CLS Score
  • Save

Almost 65.13% has a good CLS score, 17.03% needs improvement, whereas 17.84% has poor or very low CLS score.

It clearly shows that people have a problem optimizing their CLS score. It means the web has almost 35% of the websites that don't load steadily.

That is almost 35% of the website has to work upon CLS.

Now I will share with you the average score that your website should maintain.

4. The Average LCP Score Is 2,836 Milliseconds.

It's time to set a milestone that you need to reach in order to improve your LCP score and get that green signal on Google Page Speed Insights.

If you want to check the LCP benchmark set by Google, you can refer to this Google's LCP Core Web Vital Guideline.

Now Google has said having LCP under 2.5 seconds is considered good.

The Average LCP Is 2.84 Milliseconds
  • Save

But according to the website that was analyzed, it was observed that websites with the average LCP of 2.8 seconds also performed the same.

So it's just a matter of 336 milliseconds.

What's the problem that causes poor LCP score?

Issues Affecting LCP
  • Save

Here are the issues that you must check:

  • If your website sends huge HTTPS requests and large transfer sizes, you will have a low LCP score.
  • The websites with high network round-trip time have a poor user experience.
  • The Critical Request Chains below show you what resources are loaded with a high priority.
  • If your website has a high initial server response time, your website will have a high load time.
  • If you are not serving images in the next-gen format, your load time will increase.

With this data, you get to know that the biggest problem in having poor LCP scores are:

  1. High HTTP/HTTPS request counts and large transfer sizes.
  2. High network round-trip time.
  3. Critical request chains.

To simply say it, poor LCP score is caused if the pages are heavy because of excess code or have large file sizes.

But you need not worry. I will also share with you some best practices to ensure you have a good LCP score so that you have a better user experience (UX).

5. The Average FID Is 137.4 Milliseconds.

The Average FID Is 137.4 Milliseconds
  • Save

The next data that I got to know about First Input Delay (FID) is “the mean First Input Delay was 137.4 milliseconds”.

Take a look at what's causing poor FID score.

Issues Affecting FID
  • Save

Here are the issues that you must check:

  • Serve static assets with an efficient cache policy.
  • High main-thread work
  • Large JavaScript libraries with smaller alternatives
  • Having unused CSS and JavaScript.
  • Having excessive Document Object Model (DOM) size.

If you see, the caching issues tended to negatively affect FID. It is the only major problem that needs improvement.

Unfriendly code in the form of unused Javascript and Cascading Style Sheet (CSS) was behind many high FID scores.

6. The Average CLS Score Is 0.14.

The next data that I got to know about Cumulative Layout Shift (CLS) is “the average CLS score is 0.14”.

The Average CLS Is 0.14
  • Save

If your score is below 0.1, it means that it is rated as “good” in Google's eyes and even the GSC.

Make sure to check your Web Vital Score using Google Page Speed Insights and Gt Metrix.

Take a look at what's causing poor CLS score.

Issues Affecting CLS
  • Save
  • Many pages had large layout shifts. (Major problem)
  • The website with many Render-blocking resources.
  • Hidden Text during web font load.
  • The key requests are not preloaded.
  • Using improper image dimensions.

That was all about “the benchmark you should keep to optimize your website for Core Web Vitals.

Now, I will share with you the relation between Core Web Vitals and UX. At last, I will give you amazing tips to improve your Core Web Vital Scores.

7. The Relation Between LCP And UX.

As I have said, Core Web Vital has a correlation with User Experience (UX). It's not just me but Google itself that says that in their “Core Web Vitals report” documentation.

And that's what you are going to see now.

Starting with Largest Contentful Paint (LCP).

Core Web Vitals Report From Google.
  • Save

UX metrics are designed to analyze the user behavior on webpages, this includes

  • Bounce rate: % of users leaving a website’s page upon visiting it.
  • Page depth per session: (how many pages users see before leaving the website.)
  • Time on the website: how much time users spend on a website in a single session.

So, if you optimize your websites for Core Web Vitals, it ultimately means you have improved your UX metrics.

You can check these UX metrics such as Bounce rate, Page depth per session, time on the website, etc using Google Analytics.

Then after knowing the UX reports from Google Analytics, I compared it with Core Web Vital using Google Page Speed Insights Tool.

I hope you have understood the clear correlation between Core Web Vitals and UX metrics.

And that's what I have found:

The Relation Between LCP and Bounce Rate.

Relation Between Largest Contentful Paint (LCP) and Bounce Rate.
  • Save

Relation Between LCP and Pages per Session.

Relation Between LCP and Pages Per Sessions.
  • Save

Relation Between LCP and Time on Site.

Relation Between LCP and Time On Site.
  • Save

I know you are thinking from the above data that “there wasn’t any direct relationship between LCP and UX metrics”.

And that is true, I agree with you.

There is no relation between LCP and User Experience but, since Google looks up LCP for ranking signal. So it becomes necessary to optimize for LCP.

8. The Relation Between FID and UX.

Let's now move on to the First Input Delay (FID) and see if there is any relation with UX.

According to the research done, it is found that FID negatively impacts bounce rate,

“Bounce rate is single-page sessions divided by all sessions, or you can say it is the percentage of all sessions on your site in which users viewed only a single page and triggered only a single request to the Analytics server.”

Now let's look at what the relation between FID and User Experience is.*focus on Pages Per Sessions).

The Relation Of FID and Bounce Rate.

Relation Between FID and Bounce Rate.
  • Save

Relation Between FID and Pages Per Sessions

Relation Between FID and Pages Per Sessions.
  • Save

High FID tends to correlate with a low number of pages per session, and the opposite is also true.

Relation Between Time On Site.

Relation Between FID and Time On Site.
  • Save

You can conclude that FID has a slight relationship with Page Views Per Sessions and bounce rate and time on site had no effect on UX.

So, you can say that if you have poor FID, it means you are loosing pages view per session.

9. The Relation Between CLS and UX.

Now it's time to understand the relation between CLS and UX, and what impact does CLS have on UX.

But I know the universal truth: “poor CLS will frustrate your audience and might increase bounce rate and reduce session time”.

As I have said before, 65.13% had a good CLS score, so it is not a big issue. But you have a very poor score, you need to look at optimizing CLS.

Take a look at the data.

The Relation Between CLS and Bounce Rate.

Relation Between CLS and Bounce Rate.
  • Save

Relation Between CLS and Pages Per Session.

Relation Between CLS and Pages Per Session.
  • Save

Relation Between CLS and Time On-Site.

Relation Between CLS and Time On Site.
  • Save

I know you haven't seen any relation between CLS, bounce rate, time on site, or page views.

And it is true CLS can only affect the bounce rate but slightly.

So the conclusion that you can derive from the above complete data is that Core Web Vitals represent metrics for a positive UX on a web page.

And there is a very slight correlation with behavioral metrics and Core Web Vitals.

With that said, now I will share with you some awesome techniques to improve your Core Web Vital Scores.

Core Web Vitals Score Improvement Tips.

These are some of the “Core Web Vitals” improvement tips that include (FID, CLS, LCP).

Note: I will keep adding more tips as I get to know more problems that you are facing. So please comment on your problems and suggestions as well.

1. Reduce JavaScript (JS) execution.

Now, if you are getting a poor FID score, then you should optimize and reduce your JavaScript (JS) execution time.

This request is made between your browser and the JS of your web page.

The lesser the JS on your webpage, the faster the page loading speed. As your browser reserves a new memory that stops the JavaScript.

In order to improve your FID score, I suggest that you defer unused JS.

If your website has unused JavaScript, you can check it by following these steps:

  1. Open your website and press the right mouse click and choose ‘Inspect'.
  2. Click on the ‘Sources' menu.
  3. Add a tool “Coverage”.
  4. After adding it, press the load function.
  5. And when your webpage loading is done, it will show how much JavaScript is unused.

Now you get to know the unused JS, you should optimize it. Either delete the code or defer it.

You can make your work easy with code splitting.

Separate one JavaScript bundle (combined files into one bundle to avoid too many HTTP requests that are required to load a page) into segments.

2. Implement Lazy Loading.

If your website is in a niche like photography and etc. Where you need to upload many images, then you should consider implementing lazy loading

Implementing Lazy Load can help you improve your site's UX and core web vitals score. 

Lazy loading helps all your images load at the exact moment when the users scroll down through the page so that your page doesn't send many requests to the server and loads faster.

Besides, faster page loading speed, lazy load has many other uses like:

  • Your website's performance will drastically increase.
  • Only limited bandwidth will be used.
  • Your website's SEO will improve.
  • Lazy Load will reduce the bounce rate.

SEO case studies say that for those pages containing many images, animations, or videos, lazy loading is considered a must.

So, if you are getting a poor LCP score, you should consider trying lazy loading. The results will definitely shock you.

3. Optimize and Compress Images.

If you inspect your website in GT Metrix, you will get to know that the largest elements are images.

And it’s obvious.

Hence, optimizing them can make your page much lighter.

If you want to cut down your web page size by compressing images, you can try out tiny jpg.

And if you are a WordPress user, you can automate this process of compressing images as you upload by using plugins like “ShortPixels”, “Smush” and etc.

I also suggest that you use the next-generation formats like “JPEG 2000”, “JPEG XR” or “WebP”. It will reduce your page size significantly.

After that, you compress all your images, use CDN for images. Like “Imagify”. Using this, you can serve the images to your audience from their nearest server available.

4. Setting Up Proper Dimension For Your Images.

The poor CLS score is caused by elements like images, ads, or embeds that don’t have specified dimensions in the CSS file.

So to improve your CLS score, giving proper dimensions to your images is very important. It actually helps the browser to allocate the correct amount of memory in the page while the element/s are loading.

If you are facing a larger image shift, you can earlier reserve space where the image should be displayed. Doing this will avoid a larger layout shift if it's loaded off-screen.

Also, make sure you have given proper dimensions for embeds as well.

Like when you embed videos from YouTube. Set a proper dimension for your YouTube iframe.

You can use this code for changing the YouTube iframe dimension:

<iframe width="XXX" height="YYY"
src="Your YouTube Link Here">
</iframe>

Replace XXX with your width and YYY with your height dimension and then paste your link replacing your YouTube Link Here.

Moving on to my next tips.

5. Improve Initial Server Response Time.

Firstly, if you are getting this error, you should know that it's not your fault.

This problem starts if you use a poor hosting provider. To improve this, you can invest in quality hosting providers like Bluehost, Hostgator or NameCheap.

According to Google, “The longer it takes a browser to receive content from the server, the longer it takes to render anything on the screen. A faster server response time directly improves every single page-load metric, including LCP.”

Longer initial server response time can negatively influence not only your User Experience (UX) and SEO.

Google also says that you should have a server's response time lower than 600 milliseconds so that you provide a better UX to your audience.

And the second thing that you can do is ask your hosting company to optimize server response time for you. They will either give you a corrective measure or they will optimize it for you.

Conclusion

The moral of the study is: many websites performed very well. They are ready shields and swords for Google's Core Web Vitals update.

Core Web Vitals represent metrics for a better UX on a website, but there is such correlation between behavioral metrics.

Improving Core Web Vitals scores means improving your user experience, but not behavioral metrics.

Now, it's your turn.

Let me know in the comments did you like this case study? Also, suggest some tips for our community so that they get ready for the June update.

If you have any question feel free to ask.

Core Web Vitals Case Study And Tips Featured Image
  • Save

Leave a Comment

Your email address will not be published. Required fields are marked *

Get The Exclusive Taste Of SEO To Rank Higher And Increase Sales!

Share via
Copy link
Powered by Social Snap