Core Web Vitals are what google uses to rank your website and provide a user experience.
When core web vital parameters are improved, the page loads faster, be more SEO friendly (more inbound links), & have better security (fewer vulnerabilities).
You may not be aware of what core web vitals are, but they play a huge role in determining the quality of your content, user experience, & ranking as well.
This blog post will discuss 17 easy tips that you can implement, & that too in just 5 minutes that’ll drastically increase your core web vitals score & gain higher SERP rankings.
Note: If you’re only looking for tips on how to improve your Core Web Vitals Score, you can jump to this section here.
What are Google Core Web Vitals?
As of this month (June 2021), Core Web Vitals will become a part of Google’s Page Experience ranking signals.
But what actually are Core Web Vitals & why do they matter?
Core Web Vitals is a set of 3 metrics that measure specific aspects of page speed.
These metrics include:
- Largest Contentful Paint or LCP,
- Cumulative Layout Shift or CLS, &
- First Input Delay or FID
Before discussing them & also figure out how to improve them, first, we need to test & measure our website for these Core Web Vitals scores.
Until & unless we don’t know how to test & measure these scores individually, we won’t be able to improve them.
How to Test & Measure Google Core Web Vitals Metrics For Your Website?
Measuring Core Web Vitals is pretty easy. There are 4 ways to test your Google Core Web Vitals Score for all the 3 parameters.
These are:
Using Tools Like Google PageSpeed Insights
The process is simple, you need to go to Google PageSpeed Insights & just enter your page URL.
It’ll take approx 30 seconds to analyze & will give you a detailed report about your Core Web Vitals scores.
The results in Google PageSpeed Insights look like shown above.
You can scroll to the bottom or expand certain options to know in detail what parameters on your web pages are causing certain issues.
Using Google Search Console
Google Search Console is yet another helpful tool that can help you with determining your Core Web Vitals Metrics.
If you haven’t registered your site on Google Search Console, I’d suggest you go & create a free account there.
When in Search Console dashboard, go to Experience -> Core Web Vitals -> Mobile -> Pages Report
This will give you an entire breakdown of your sites like which part or page is causing issues like LCP, CLS, or FID.
You can then go to these sections individually & improve your scores by rectifying the problems.
Using Built-In Google Chrome Browser Dev Tools Like Lighthouse & Chrome User Experience Report (CRUX)
Open your website on google chrome & follow the steps below.
Step 1: Right Click on the web page & click Inspect (or use shortcuts for Windows: Ctrl + Shift + J. Mac: Cmd + Opt +J)
Step 2: Go To Lighthouse -> Click Generate Report
The generated report will look like this & you can expand sections to find errors.
TIP: Before Clicking Generate Report in Lighthouse, make sure you’ve applied the settings mentioned below:
If you’re a web developer & know how the stuff works, you can also take the help of the Chrome User Experience Report (CRUX) as well.
To know how to use CRUX, you can refer to this article here.
Using Core Web Vitals Chrome Extension
The Chrome Web Vitals extension for desktop is a useful tool that helps you find and diagnose problems earlier in your development cycle.
It can also be used as a diagnostic tool to analyze Core Web Vitals’ performance while browsing the web.
Download Web Vitals Chrome Extension Here
The extension is simple, yet powerful.
After clicking on the extension, you will be able to measure Core Web Vitals.
It clearly shows the 3 Core Web Vitals of your webpage–using numbers and standard colors as shown above.
Now we have an idea of how our website is performing for the Core Web Vitals, let’s head over to each element of the Core Web Vital & understand what are they, why they occur & how to improve them.
#1 What Is Largest Contentful Paint or LCP?
Google’s Core Web Vitals Largest Contentful Paint, or LCP for short, measures the time it takes for the most meaningful content on your site to load.
In simple words, it’s the unit of time taken for a part of the page to get painted/rendered by the browser.
Typically this is either a page’s main section, mostly images, and sometimes other sections of main importance such as an article’s introduction paragraph.
Let’s understand it with an example.
You land on a site and don’t see the top image fully displayed right away.
You would be annoyed, right?
A user will also think about leaving the page as soon as possible if they are unable to interact with it or is unable to understand what is going on in any way.
The Largest Contentful Paint metric takes into account more than just how long your website loads time.
It accounts for everything that happens when you go from landing on a webpage all of sudden & not being able to view an important part, without scrolling down first.
What Is A Good Largest Contentful Paint or LCP Score?
You’ve probably wondered what a good LCP time is.
Luckily, Google has set some thresholds for us:
- Good – Less than or equal to 2.5 seconds
- Needs Improvement – Less than or equal to 4.0 seconds
- Poor – More Than 4 Seconds
Why Largest Contentful Paint or LCP occurs?
LCP occurs due to the presence of large elements on the web page.
When the page is loading, these elements take up a lot more time to get rendered by the browser & come up in the view.
These can be an image with a large dimension, fancy fonts, or any other largest element on the web page.
As of few previous years, Google had defined these 3 types of main elements that contribute most to LCP.
These are:
<img>elements<image>elements inside an<svg>element<video>elements (the poster image is used)- An element with a background image loaded via the
url()function (as opposed to a CSS gradient) - Block-level elements containing text nodes or other inline-level text elements children.
As of now, there are more elements that have been added that contribute to LCP, but let’s not discuss them in detail here to avoid confusion.
How To Improve Your Largest Contentful Paint or LCP Score?
There are 7 major ways that you can use to improve your LCP Score. These are:
#1 Caching Your Web Page
#2 Implementing Browser Caching
#3 Using Optimized & Unbloated Code
#4 Using Gzip Or Brotli Server Level Compression
#5 Using A Push CDN Service
#6 Using DNS Prefetch & Preconnect
#7 Optimizing Your Images For Web Standards
As it has been observed, images are the largest contributing factor to increasing LCP.
Make sure you’re paying full attention & are optimizing your images according to web standards.
If you need help regarding Image Optimization, check out this article: 13+ Image SEO & Optimization Tips To 17X Your Blog Traffic
By following these instructions, your LCP Score will definitely improve.
Also, if you aren’t a developer, then I’m pretty sure that WP Rocket will be the best ally for you when you’re optimizing your site for LCP.
WP Rocket makes the best practices of boosting your site’s load speed seem like a piece of cake.
WP Rocket sets up page caching and server-level compression, preconnect & DNS prefetch, browser caching, Gzip & compression & more all by itself (no manual work & no developer/skills needed).
Plus it includes tons of other features to help you optimize your website code for performance without any extra work on your part–all this reduces LCP time significantly!
#2 What Is Cumulative Layout Shift or CLS?
The Cumulative Layout Shift (CLS) is the number that represents how much your site’s content shifts below as it is loading.
In simple words, in some sites, when the page is loading, the layout keeps on shifting to the bottom while certain other elements are still loading.
The basic purpose of CLS is to measure the visual stability of a web page.
Let’s understand it with an example.
You are about to click on a link, but before you do so, all of your content has shifted down, and now there isn’t enough room for the button anymore.
This is often seen because something was loading in after that particular page loaded – like an ad display, or external website domain loadings (fonts, google ads, FB pixels, etc).
Or maybe you’ve been reading an article when all of a sudden ads pop up for products from different companies with no clear indication which is actually related to coming up on the screen?
This can be frustrating not only for users but also annoying if someone else who isn’t tech-savvy ends up getting their email address half filled in the input boxes, & then that page shifts down without clicking the submit button.
Here, how it looks like:
What Is A Good Cumulative Layout Shift or CLS Score?
- Good – Less than or equal to 0.1 seconds
- Needs Improvement – Less than or equal to 0.25 seconds
- Poor – More than 0.25 seconds
Why Cumulative Layout Shift or CLS occurs?
Whenever an unexpected layout shift is observed.
It’s mainly due to these basic 4 reasons:
#1 Using Fonts From Other Websites
#2 Images That Don’t Have Specified Dimensions
#3 Dynamically Injected Content Can Sometimes Create CLS
#4 Ads From Ad Networks, Embeds, Or IFrames That Don’t Have A Specified Dimension
How To Improve Your Cumulative Layout Shift or CLS Score?
#1 Try To Use Locally Hosted Fonts & Stick To Only 1 Font For Your Entire Website
#2 Use Good Caching Plugins That’ll Specify Image Dimensions For You Automatically
#3 Verify Any Third-Party Injected Content Being Loaded On Your Web Page
#4 Have A Fixed Space Reserved For Ads, Embeds & IFrames. Explicitly Declare Their Dimensions
If you’re looking to streamline your site for a much better CLS score and don’t know where to start, I highly recommend checking out this plugin, WP Rocket.
It has a number of features that will make optimizing much easier on the user including automatic optimization for Google Fonts as well as easy ways to optimize other fonts with their Minify or Combine CSS options.
Moreover, WP Rocket also helps in hosting Google Analytics & Facebook Pixel Code locally on our server, thus also reducing multiple DNS requests.
If you need help making sure your site is ready for prime time in terms of loading speed, there’s no better way than using WordPress plugins like WP Rocket – it’ll take care of all those pesky problems without too much effort from your side!
#3 What Is First Input Delay or FID?
First Input Delay is a Core Web Vitals metric and measures how long it takes for the browser to respond to the first user’s interaction with a page — that is, clicking on a link, tapping on the button, or interacting with another element.
Let’s say you land on site and click one of those links.
Of course, you would expect an answer soon, right?
Unfortunately not always true because your request might be too complicated for some browsers who are busy processing other requests at this time.
Unlike Total Blocking Time (TBT), which measures interactivity and responsiveness without any user interaction.
You need to be present for an accurate assessment of FID because TBT cannot measure delays caused by network latency or other unforeseen issues, such as waiting for scripts to initialize before displaying content after clicking a link on your page.
But these additional factors affect how time-sensitive users perceive performance.
The way a website communicates is just as important as the performance.
And it can be improved by improving TBT.
FID is so high in weight that it outranks LCP when measuring your page speed grade–and you should see improvements too!
What Is A Good First Input Delay or FID Score?
Google considers these metrics while determining your FID scores:
- Good – Less than or equal to 100 ms
- Needs Improvement – Less than or equal to 300 ms
- Poor – More than 300 ms.
Why First Input Delay or FID occurs?
Now, this is the most complicated task as it’s related to the optimization of the code.
FID mostly occurs when the page has a lot of tasks running in the background.
It’s basically due to heavy Javascript, or unused javascript that hinders the rendering of the web pages.
How To Improve Your Good First Input Delay or FID Score?
In order to improve your FID score, you should use an optimized WordPress theme that is also reputed in the market.
Related: 17 Best WordPress Themes For Business: Ranked & Reviewed
You can add async or add defer to certain javascript tasks that are not necessary for the page to load.
Ex. if you’re running AdSense ads, then adding “defer” to the ad’s script tag, will tell the browser to execute that ad script only when the whole page has been rendered.
If you’ve been struggling to improve FID, a plugin like WP Rocket might be able to help.
It can make it easier for less technical people out there who want more control over these settings without having an advanced degree in computer science or being a regular on StackExchange.
What Is The True SEO Advantage Of Having A Good Core Web Vital Score?
From June 2021, Core Web Vitals has become a new ranking factor and could affect your SEO performance.
It’s important that you’re using HTTPS security, safe browsing and mobile-friendliness so don’t forget about those too when the time comes for the switch.
The good news?
Even if you haven’t been using AMP before now – no worries because it won’t count against your site anymore as of this changeover date.
The intent is to provide people with the best user & page experience, but your site needs to meet specific Core Web Vital scores if you want it to appear in Top Stories search results.
In short: If you care about SEO performance & google rankings, then improving your website’s Core Web Vitals score is now recommended than ever!
However, there are more than 200+ factors that Google considers for your site to get ranked & since this update is new.
I hardly expect that it’ll affect you much.
But in the upcoming times, the Core Web Vitals are going to be a tie-breaker between the top-ranking sites.
Example: If you & your rival are ranking & competing consecutively for the same keyword, then the site having a better Core Web Vital Score will definitely take over.
[mo-optin-form id=”xbWCPSIgYB”]
17 Powerful Tips To Optimize & Improve Your Google Core Web Vitals Scores For SEO
These 17 simple but powerful tips, will definitely improve your Core Web Vital scores.
- Implement Server Level Caching On Your Website
- Implement Browser Caching
- Use Optimized & Unbloated Themes (Code)
- Use Gzip Or Brotli Server Level Compression
- Use A Push CDN Service
- Optimize Your Images For Web Standards
- Use Locally Hosted Fonts
- Use DNS Prefetch & Preconnect
- Specify Image Dimensions
- Verify Any Third-Party Injected Content
- Add Fixed Dimensions To Ads, Embeds & IFrames
- Compress Your JS & CSS Files
- Lazyload All Images, & Media Files
- Use Database Optimization
- Defer Non Critical JS & CSS
- Host Google Analytics, Facebook Pixels Locally
- Avoid Too Many External DNS Requests
Optimizing these many things might be a problem for you people if you’re a non-techie.
And even if you’re a techie, you will waste a huge amount of time in optimizing these & can get easily distracted too from creating meaningful content.
So, to make things easy for you & simple, I’d recommend that you should go with WP Rocket.
I’ve been using WP Rocket for more than a year & my site’s performance is top-notch.
Personally telling, before WP Rocket, I tried many caching plugins (both free & paid) but the features & ease of setting up that WP Rocket offers, wasn’t found anywhere else.
I bet that after using WP Rocket, more than 80% of your Core Web Vitals issues will get resolved automatically.
To further refine your performance, you should go with a good web hosting like Cloudways.
Unlike other shared hostings like Bluehost, Hostinger, or any other hosting companies, Cloudways offers you a full private VPS server at the cost of (just slightly above) shared hosting.
This blog is also hosted on Cloudways as well.
You can also use Perfmatters plugin that’ll help you optimize your individual blog pages as per your needs.
Suppose, you’re using a plugin on your blog & you require that plugin to be loaded onto your single page rather than every page.
Perfmatters will help you accomplish this easily.
I’m pretty sure that after making these tweaks & optimizations, your Core Web Vitals score will skyrocket.
If still, you’re having issues, you can definitely hire someone on Fiverr to do the tech-related stuff for you.
Check out these:
General FAQ On Google Core Web Vitals?
What Are The Three Core Web Vitals?
The 3 Core Web Vitals are:
Largest Contentful Paint or LCP,
Cumulative Layout Shift or CLS, &
First Input Delay or FID
What’s Core Web Vitals Chrome Extension & How To Get It?
Core Web Vitals Chrome Extension is a utility that helps you to assess a web page’s web vital scores. However, it’ll only show you the scores but it won’t guide you on which areas to improve. You can find that extension here.
What Is LCP In Core Web Vitals?
The Google Core Web Vitals Largest Contentful Paint, or LCP for short measures the time it takes for most of a page’s meaningful content to load.
In other words, you could say that this is the unit of time taken by web browsers like Chrome and Safari (which are used as standards) before they will paint your site in their “painting window” which displays what part has been loaded already on said website.
Typically these sections include images and text: such as an article’s introduction paragraph–but not always! To know more about how to optimize your site for a better LCP score, kindly check out this article.
What Is Core Web Vitals Why Is It Important?
Core Web Vitals are a set of factors that Google considers important for measuring the user experience on web pages.
Core Web Vital is made up of three specific measurements: largest contentful paint, first input delay, and cumulative layout shift.
You might be wondering why Google is so intent on providing the best user experience & page load times for their users.
It’s because if your website doesn’t meet specific Core Web Vital scores, then it will never appear in Top Stories search results!
How To Take A Google Core Web Vitals Check?
You can take a Google Core Web Vitals check by following 5 methods:
Using Google PageSpeed Insights
Using Google Search Console
Using Built-In Google Chrome Browser Dev Tools Like Lighthouse
Using Built-In Google Chrome Browser Dev Tools Like Lighthouse
Using Chrome User Experience Report (CRUX)
To know how to use these tools fully, feel free to check out this article here
How Much Important Is Core Web Vitals For SEO?
In the competitive online marketing landscape, your website’s search engine ranking performance has never been more important.
To meet Google’s new Core Web Vitals standards and appear in Top Stories search results, you must now optimize to a 70/100 CWS score or higher!
What Is FID In Core Web Vitals?
First Input Delay is a Core Web Vitals metric that measures how long it takes for the browser to respond after your input.
This time includes waiting on external resources, such as data from an API or social media feed.
How To Measure Core Web Vitals?
You can measure your Google Core Web Vitals score by following 5 methods:
Using Google PageSpeed Insights
Using Google Search Console
Using Built-In Google Chrome Browser Dev Tools Like Lighthouse
Using Chrome User Experience Report (CRUX)
To know how to use these tools fully, feel free to check out this article here
On Which Date Will Core Web Vitals Come Out?
Google has rolled out the Core Web Vitals update From June 2021. To know how much is that important & how it’ll affect your website, feel free to check out this article here.
What Is Lab Data In Google Core Web Vitals?
Lab data is gathered with the help of people but without any involvement from real users.
Lab data may not always be the best indicator of how a product will work in the real world.
What Is Field Data In Google Core Web Vitals?
Field data is collected from real users and gathered by the Chrome User Experience Report (CRUX).
The report goes through a rigorous process of finding out what people think about their experience with chrome browsers in order to make it better for everyone who uses them.
Conclusion: Google Core Web Vitals
Your website needs to meet specific Core Web Vital scores if you want it to appear in Top Stories search results.
In short, your site’s SEO performance hinges on how well optimized and user-friendly the page is.
If you care about what Google thinks of your web pages, be sure that they are following best practices for UX (User Experience).
The good news:
There’s a plugin that can help make this happen!
WP Rocket optimizes WordPress websites so they load faster and are mobile-friendly – which not only boosts rankings but also improves usability by improving visitor conversion rates.
I’m also using WP Rocket on this blog & even after placing multiple Google ads on my blog posts, I get a score of 85+ in my Core Web Vitals.
If I’ll remove the ads, my score reaches 95+.
All thanks to WP Rocket.
And if still, you don’t see significant changes, I’ll advise you to go with a better hosting provider like Cloudways.
I recommend Cloudways because I’m quite happy with them & it’s been more than 8 months being with them at the time of writing this article.
Their performance & pricing, both are top-notch.
And If you’ve any doubts regarding any topics above, message me on social media, or E-mail me at [email protected].
I’m highly active on Facebook, Twitter & Linkedin, so make sure you follow me there.
Do subscribe to my newsletter to get notified of my future blogging articles, & if you found this post helpful, do share this post with your friends.
Till Then, have A Nice Day 🙂