What Are Google Core Web Vitals | Everything You Need To Know

Core web vitals is expected to be a ranking factor in 2021. Learn what they are and how to improve them now.
Core web vitals as it relates to the whole page experience
What Are Google Core Web Vitals | Everything You Need To Know

Disclosure: This blog is reader supported

What this means: Any purchase(s) made through links on this site could result in an affiliate commission for WP Explaind at no additional cost to you. 

Google core web vitals are 3 signals that Google considers important to the overall user experience. They were designed to measure how users experience speed, responsiveness, and visual stability of a page.

In this article we are going to explore CWV metrics and how you can improve them. 

Why Core Web Vitals are important

Google is planning to make page experience an official ranking factor in 2021. The page experience update is believed to hit sometime in May 2021, but you can start preparing for it now.

Judging by the name, these 3 signals will make up a good chunk of the overall page experience update, but there are other factors as well. 

These metrics are a good indicator of how the end user experiences your website. Think about the last time you visited a site…

If it took to long to load, you probably abandoned the site. Large shifts in the layout made it difficult to read also causing you to leave. These are things to consider about your own site.

The percentage of sites that have passing grades is relatively small, but this presents you with an opportunity to improve and increase your rankings.

What percentage of sites have passing CWV grades?

Screaming frog did a study on Core Web Vitals and determined a small percentage, 12% of mobile and 13% of desktop results passed the assessment. They analyzed 2,500 keywords and 20,000 URLs. 

This is a small sample size but it is indicative that there is much room for improvement. If your site has failing grades for these metrics, don’t fret because you are not alone and you still have time to improve.  

Having passing grades for these signals won’t magically push you to first page results but it will be a factor.  It is important to note that there are over 200 factors that Google considers when ranking a page. 

Their ultimate goal is to serve the most relevant results for the query so keep that in mind. 

Core Web Vitals Consist of 3 Signals

  1. FID First Input Delay
  2. LCP Largest Contentful Paint
  3. CLS Cumulative Layout Shift

First Input Delay (FID)

core web vitals- first input delay

First Input Delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.

FID measures the time it takes for a user to actually interact with your page. As you can see from the image above a good score is less than 100 ms.

Interactions include:

  • Clicking a link 
  • Filling a form 
  • Selecting an option from a menu 
  • Playing a video

Largest Contentful Paint (LCP)

core web vitals- largest contentful paint

LCP measures when the largest content element in the viewport becomes visible. It can be used to determine when the main content of the page has finished rendering on the screen.

This is the perceived time it takes to your visitors to view the content of the page. As you can see from the image above, less than 2.5 seconds is what you want to aim for.

This can be difficult for pages with a lot of elements.

Cumulative Layout Shift (CLS)

core web vitals- cumulative layout shift

CLS measures the visual stability of content. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.

Have you ever visited a page, began reading only to have the entire page shift? This is CLS and is not a good user experience. 

This shift can be caused by several things including font swaps, slow loading third party scripts, etc…

Other Page Experience Signals

  1. Mobile friendliness (responsiveness) 
  2. Safe browsing (no malware)
  3. Https (security)
  4. No interstitials (intrusive popups)

Mobile friendliness

Is your site responsive? I would say the vast majority of sites are now mobile responsive, but to be sure you pass you can evaluate it using the mobile friendly test.

If all goes well with your test you should see the image below: “Page is mobile friendly”.

mobile friendly test results

A mobile friendly design ensures your pages perform well on all devices.

Safe Browsing

Google wants to make sure that they are delivering results that are safe to view and contain nothing malicious. 

“Pages or sites affected by a security issue can appear with a warning label in search results or an interstitial warning page in the browser when a user tries to visit them.” – Google Support

You can check for any security issues in search console “securities report

Https- SSL Certificate

Is your site encrypted with an SSL certificate? Google has been pushing web security over the last few years. Even if you are not selling anything, make sure your site is secured with SSL. 

If you still have insecure content, Google may flag your site as unsafe. Learn how to install an SSL certificate on a WordPress site for free.

Many hosting companies have partnered up with Let’s Encrypt to bring you free certificates so there’s really no excuse anymore for not securing your site.

No intrusive interstitials 

This signal is more about accessibility and particularly important for mobile. No full page ads. Popups are ok but be sure your main content is still visible. 

The image below depicts what is acceptable and what is not.

Interstitial guidelines for page experience
To improve the mobile search experience, after January 10, 2017, pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as highly.
Google Search Central

How to test for these Page Experience Metrics

There are several tools you can use to test your site including Google’s own, ‘Page Speed Insights’ testing tool where you will be provided with opportunities for improvement.

PSI- opportunities for improvement

In addition to the page speed insights tool, you can also use chrome dev tools within your browser by right clicking and selecting “inspect” > “lighthouse” 

lighthouse scores

or accessing it from Search Console under “enhancements. This will provide you with an overview of your entire site and how each page performs. 

Improving Your Web Vitals

Every site is different and will require personalized tweaks for improvement, but here are some general guidelines for improving your web vitals.

Upgrade your hosting: Shared hosting means share resources and ultimately slower loading times. We recommend Flywheel. It’s a little more expensive but your site will load faster.

Set up lazy loading: This will defer downloading your offscreen images until they appear in the viewport.

Add image dimensions: Adding missing width and height attributes to your images tells the browser to reserve that space and helps reduce layout shifts. WP Rocket can now add missing dimensions to your images simply by checking a box.

Minimize third party scripts: Third party scripts like Google Analytics are out of your control and difficult to optimize so only add what’s necessary.

Minify your CSS: CSS files are render blocking which means they need to download before the page can be rendered. Reducing their size by minifying them can help reduce LCP.

Defer JavaScript: This eliminates render-blocking JS on your site and can improve load time.

Leverage browser caching: Caching your files in your browser will speed up delivery for second time visitors.

Clean your database: your database can become bloated with post revisions and transients. Clean it up weekly for optimal performance.

This can seem overwhelming especially if you’re not a front end developer. Luckily, there is a plugin we recommend that can help with many of these optimizations.

Recommended Plugin For Improving Page Experience

WP Rocket is a plugin that will solve many of the recommendations you will receive in page speed insights.

WP Rocket will take care of most of the recommendations, but not all. To further improve, I recommend using an image compression plugin that will efficiently encode images and serve them in next gen format.

For this we recommend either WP Smush or Imagify.


Delivering a good user experience is at the top Google’s list this year. As it stands a large portion of the web is not ready for this, but luckily you still have time. Don’t wait until the last minute.

Begin improving your UX today!

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
0 0 vote
Article Rating
Notify of
Inline Feedbacks
View all comments

Related Posts



Speed Optimization
Speed up your with a website with our Wordpress speed optimization service
Malware Removal
Remove unwanted viruses with our Wordpress Malware Removal Service

Our Sponsors

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest