Core Web Vitals are a set of factors that, according to Google, are important to determine the overall user experience of any webpage. You can check Core Web Vitals through Google PageSpeed Insights.
While you will notice different factors, the three main components that measure the page speed and user interaction are:
- Largest Contentful Paint.
- First Input Delay.
- Cumulative Layout Shift.
So, you need to focus on these three parameters, making sure that all these three values are in green.
The question is:
“If these three parameters are important then why do you see other factors in Google PageSpeed Insights?”
Here is the answer:
Core Web Vitals are a SUBSET of all factors that Google uses to determine the page experience score!
So, what are the other web vitals?
There are many other things that are included in the web vitals like:
- Mobile friendly
- HTTPS
- Safe browsing
- No intrusive interstitials
- Visual stability
- Interactivity
- Loading etc.
The last three in the unordered list above are the Core Web Vitals. So, this is what you get:
- Visual Stability = Cumulative Layout Shift or CLS
- Interactivity = First Input Delay or FID
- Loading = Largest Contentful Paint or LCP
You can find your website’s Core Web Vitals in Google Search Console in the Experience tab.
The example you see above is that of a horrible Core Web Vitals.
If you have such a website, should you be worried?
Let’s find out!
Are Core Web Vitals Important?
Google is all set to roll out Page Experience as an important ranking factor. Google clearly mentioned that it will combine Core Web Vitals with its existing ranking signals.
The various ranking signals that determine the overall user experience of any page include:
- Mobile-friendliness – Your website should open and scale properly on a mobile device.
- HTTPS – Your website needs to have an SSL certificate installed.
- Safe browsing – Your website cannot have malware.
- No Interstitial pop ups – They are difficult-to-close pop ups, and they often look spammy. They tend to cover the whole webpage, and show up suddenly. Some of these pop ups will show up before the content loads, while there are others that will show up after a certain time, and people cannot read the content further until they close them!
These aren’t the only ranking signals that Google uses. There are nearly 200 factors, and now, Core Web Vitals will be included in those factors.
However, just ensuring that your website’s Core Web Vitals are all green (that is, all your URLs are good URLs and pass the Core Web Vitals tests), doesn’t necessarily guarantee good ranking for your website.
Google absolutely made it clear:
“A good page experience doesn’t override having great, relevant content.”
So, if you have ‘SHITTY CONTENT,’ but great Core Web Vitals, you are not going to rank well.
That doesn’t also mean that if you have great content, but awful Core Web Vitals your website will rank great!
You need to find a balance.
In other words – your content should be great, and your Core Web Vitals should be good, too, if not great!
Understanding the Components of Core Web Vitals
Okay, now that you know that Core Web Vitals are important, it is time to take a look at individual elements of the Core Web Vitals.
Let’s begin…
Largest Contentful Paint
LCP or Largest Contentful Paint refers to the loading time of a page. But this load time is not from the point of view of Google, but from the point of view of actual users.
In simple words, it is the time required for on-screen display of the majority of the content of a webpage from the time a person clicks on a link.
This means that LCP or Largest Contentful Paint is quite different from other factors that are used for measuring page speed. The other metrics that are used for measuring page speed are Time to First Byte or TTFB, and First Contextual Paint or FCP.
Interestingly, neither TTFB nor FCP doesn’t really represent the actual user experience.
In fact, LCP focuses on what matters the most. And what is that? It is none other than people’s ability to see your page and interact with it.
You can find the LCP data directly from Google PageSpeed Insights. It always shows up right above the lab data.
What’s interesting about Google PageSpeed Insights data is that you can see two sets of data. The first data shows real field data. The next set of data will show you the lab data for your website.
What you should focus on is the field data, because it shows the performance of your website in the real world using Google Chrome browser.
You can also check your LCP data from your Google Search Console.
And guess what?
That’s what I recommend – check your website’s Core Web Vitals from Google Search Console.
Here is the reason why I recommend that:
“By using Search Console, you can get the data for your entire website, that is, for all URLs. If you want to use Google PageSpeed Insights, you need to check random URLs. That will be too much of a task, and not really an effective method.”
Google says that LCP should be within 2.5 seconds.
That can be very difficult to achieve, but not impossible.
In the screenshot above, you can see that there is a CLS (Cumulative Layout Shift) issue. There is no LCP issue.
But that shouldn’t give you a notion that achieving a good score on the LCP is easy. It is not!
There are many things that determine the LCP. There can be high resolution images that can lead to slower load times. There can be third-party scripts, and more!
One common mistake:
Webmasters think that using a CDN will resolve the issue of LCP!
No! That’s not the case!
While using a CDN definitely helps to reduce LCP, it doesn’t necessarily guarantee elimination of the LCP issue completely.
There are several things you need to do to ensure that Largest Contentful Paint is within Google’s accepted range!
What Can You Do to Improve LCP?
Here is what you can do:
1. Code Cleanup: Use a proper theme with clean code. Your theme can be the culprit. I always recommend using GeneratePress.
2. Shun Page Builders: No matter which page builder you are using, it will have bloated CSS codes. They can take a lot of time to render the website. Get rid of page builders. They may look great, but they are almost always a big contributor to higher LCP.
3. Hosting: Switch to a better hosting provider. Shun the shared hosting solution you are using. Move to the cloud. Cloudways, Digital Ocean, Amazon Web Services, Vultr, Google Cloud, etc. are great options. I recommend using Cloudways.
Though a bit expensive, it manages the technical aspects, giving you the feel of working with shared hosting. Better and faster servers translate into faster website load speed and lower LCP.
4. Keep Only the Necessary Third-Party Scripts: Third-party scripts loading from different servers can severely cripple your website’s speeds. Some of the known culprits include:
- Google Analytics
- AdSense or similar ad network codes
- Social sharing buttons
- Chat widgets
- Helper libraries (animations, functional libraries)
- Web fonts
- Embedded comment systems like Disqus
- CDN (yes, CDNs)
You cannot and should not get rid of certain third-party scripts like Analytics, CDN, Ads (if you are relying on ads for revenue), etc.
You can remove the ones that you don’t need. For instance, chat widgets, helper libraries, web fonts, embedded comment systems, etc. should be removed.
If you want to keep social sharing, it is better to use something lightweight like Grow by Mediavine.
Coming to CDN, they also work with certain scripts. You cannot get rid of them. They are a necessary evil.
So, remove that you don’t need.
One easy way to identify the third-party scripts with enormous network payloads is to use Google PageSpeed Insights.
Under the lab data, it will show you the scripts with their size and the time they take to load. You can particularly find them under the section “Avoid long main-thread tasks.”
In the screenshot above, you can see scripts.mediavine.com and some JS files from the website.
These are the scripts with enormous payloads. Some of them are from the Mediavine ad network. Some JS files are created by the cache plugin in use.
Yes, you cannot remove the JS files created by your caching plugin. Removing them will make matters worse.
As for the ad network, the best way to deal with this is to either remove your ads completely, which is not a viable option, or defer them.
So, there are a few things you can do:
- Defer loading of scripts so that they load only and only when the main content shows up first.
- DNS prefetch is another method where you can create browser resource hints. DNS prefetch will allow the users’ browsers to connect with the external domains hosting the scripts at the beginning of the page load itself, thereby minimizing things like DNS lookups, redirects, round-trips for loading scripts, etc. This is very technical, and you need some assistance. Caching plugins like WP-Rocket and LiteSpeed have this feature.
- Localize certain scripts! That’s the third thing you can do. For instance, you can localize web fonts and serve them from your server. Similarly, you can localize the Google Analytics script. Again, they are very technical, and you can always rely on plugins like WP-Rocket to get things done.
5. Remove large page elements: Certain elements on your page will be very large. You have to either remove them completely, or you need to minimize the size. Google PageSpeed Insights will show you the exact element.
In most of the cases, you will see that it is an image. In the example above, you can see that! The image is an SVG image with a defined height and width.
Technically, a SVG image can be much lower in size. The image in the example above is only 6.88 KB, but it is still a large element.
If you need to keep your image, make sure that it is as lightweight as possible! If it is possible, place the image Below the Fold, that is below the text segment that shows up on the screen when the website loads. That segment is called Above the Fold.
Only when a user starts scrolling, he or she reaches the Below the Fold segment.
Summary:
Delete some script, localize some scripts, and prefetch some! That’s all it takes. A few things will remain like JS files created by the caching plugin and CDN that you are using. You cannot remove them.
Also, use a lightweight theme, reduce image sizes, do not use unnecessary things, avoid page builders at all cost.
FID or First Input Delay
Once the LCP happens, your webpage has achieved what is called FCP or First Contentful Paint. The question is, are the users able to interact with your webpage?
Just because some content has displayed on your website or webpage, it doesn’t necessarily indicate that the users will be able to interact with it.
That is what FID will measure – THE TIME IT TAKES FOR ANY USER TO INTERACT WITH YOUR WEBPAGE.
What kind of interactions?
Here are a few:
- Click on a link on your webpage.
- Click and select a menu.
- Open or close accordion texts or boxes.
- Entering email address or other data.
Can your visitor do those things quickly enough?
FID or First Input Delay will look into exactly how users are interacting with your web page in the real world.
Google says that FID is good if it is 100 milliseconds or less. You need to improve if it is within 100 and 300 milliseconds. Anything beyond 300 milliseconds is a poor performance.
Usually for blog pages (like this one) or news pages, FID is almost always good, because the interaction involved is usually scrolling down or pinch zoom in or zoom out.
Here is an example:
This reflects in the search console data where no FID is reported:
The only issue that search console is showing is CLS. There is no LCP either.
FID really becomes vital when you have a website where users need to login. For instance, a forum, or a social network like Reddit or Twitter or Facebook!
This is where things can get messy!
If people cannot immediately input the data and they need to wait long, Google is not going to like that at all. Neither are the users going to like it.
What Can You Do to Improve FID?
If you have a site where FID can be an issue, there are a few things you should do to fix the problem. Here is what you need to do:
1. Defer or Minimize JS: JavaScripts are one of the major culprits to lower the FID score. It is almost impossible for users to interact with a web page until some JavaScripts finish loading. So, you need to ensure that your website’s functionality isn’t dependent too much on JavaScripts.
If there are (and most likely there will be) JavaScripts on your website, try to minimize them. If that is not a possibility, you need to defer the loading of those JavaScripts.
Sounds technical?
Well, it is technical. So, if you are using WordPress, you can rely on various optimization plugins that will allow you to defer JS files. There are standalone plugins available, but you can always use a caching plugin like WP-Rocket or LiteSpeed Cache for doing that.
All it takes is flipping on the option for deferring JS. Sometimes, this automation can lead to breaking of website functionalities, because certain JS files are considered as critical JS. In other words, they are critical for the proper functioning of the website.
In cases like that, you need to selectively prevent such JavaScripts from deferred loading. Almost all plugins allow doing that. You need to figure out which JS files are critical.
This can definitely get technical.
2. Third-Party Script Removal: Even third-party scripts play a significant role in increasing FID. Heatmaps, Google Analytics, etc., are good examples.
It is absolutely necessary that you remove third-party scripts as much as possible. Of course, removing certain third-party scripts is not a desirable thing. For those scripts, either defer loading them from a third-party domain, or if possible, localize them and serve them locally.
3. Browser Caching: One easiest way to deal with high First Input Delay time is to enable browser caching. Browsers will save cached files of your website when someone visits your site for the first time.
So, instead of requesting and downloading all files again and again, the browsers will cache and save certain static files, which include JS files. These files don’t usually change.
With browser caching enabled, browsers will serve some static files from the locally saved caches. This will ensure that the website loads faster when the visitor visits your website the second time and any subsequent number of times.
Most of the caching plugins available today will allow you to enable browser caching. So, implementing this option shouldn’t be a big issue.
Summary:
To reduce FID, defer JS loading or reduce the use of JS. At the same time, make sure that you are removing unnecessary third-party scripts and enabling browser caching.
Cumulative Layout Shifts
Cumulative Layout Shift or CLS refers to the visual stability of a web page. In other words, the page elements should be stable in their position when a web page loads.
You must have noticed how text or a button, or an image jumps up and down when the page loads.
The problem with such unexpected jumps and layout shifts is that when someone tries to click on something, the sudden layout shift can make them click on something else.
This can lead to very poor user experience.
Even worse, layout shifts were once deliberately introduced by many webmasters to make people click on an ad or a purchase button even though it was not their intention.
Here is what it means:
Notice how the layout of the demo site design above shifted. The ad block suddenly appears on the top of the text.
Now imagine what would happen if there was a link at the top of the text. Someone wants to click on the link, but suddenly the ad appears out of nowhere right when the person is about to click.
The click will be registered on the ad, and not on the link!
The whole purpose of CLS is to get rid of this malpractice and to ensure a good user experience. This is a serious issue.
Google PageSpeed Insights will show you whether there is a CLS issue present or not. This is what you will notice when you are testing your website or any URL of your website using Google PageSpeed Insights:
You can see the CLS data for your entire site from your Google Search Console dashboard. This is what you will notice:
Notice how the website in question has only CLS issues. 963 URLs have all poor CLS values.
Now, what is a good CLS value?
According to Google, CLS should be between 0 and 0.1. Anything above that is poor or bad.
CLS is not a measurement of time. It is a value.
The problem with CLS is that everytime a webpage loads, users need to relearn where the main elements of the page are. The elements here refer to links, text, images, videos, etc.
What causes CLS?
There are many things that cause CLS. There is no single determining factor. Here are some factors:
1. Deliberate Implementation: As explained earlier, some webmasters engage in deliberate implementation of CLS for financial gains.
2. Advertisements: Not everyone engages in affiliate marketing or other alternative monetization methods for websites. Most of the webmasters depend on advertisements. Even big websites like WebMD use advertisements. Advertisement blocks are often the culprit.
Most ad networks will collapse the space allocated for an ad block and move the content up or down if no ads are available.
Even Google AdSense does that. However, AdSense will allow you the choice of either collapsing the space or leaving the space as is with a yellow placeholder.
However, some ad networks do not do that. They will simply collapse the area, causing CLS.
3. Lazy Loading: Lazy loading images is a common practice to improve LCP or Largest Contentful Paint. Images can be quite heavy, and hence, it is indeed a good idea to use lazy loading.
However, the problem with lazy loading is that it leads to CLS. When the image loads at a later point in time, the content or the text is pushed down. This is not ideal.
4. Aggressive CSS Combining and Deferring: Minification of CSS is fine, but combining CSS and deferring them is not a good idea always. Some CSS are critical for ensuring that the websites get their proper structure. Aggressively combining and deferring CSS can lead to FOUC or Flash of Unstyled Content.
FOUC is, without an iota of doubt, a major reason for CLS.
What Can You Do to Avoid CLS?
You need to get smarter to avoid CLS. Here are a few things you can do:
1. Reserved Space for Ads: Make sure that you are reserving space for ad blocks. If the space is reserved, it will not collapse. At the most, people will see a blank space. To ensure that visitors are left clueless about the blank space, try using a colored blank placeholder. This will give the visitors a fair idea that the space is reserved for ads.
If you are using ad networks like Mediavine, you will not get this feature. They use lazy loading for ads. This means that ads show up only when users start scrolling.
If no paid advertisements are available, they will simply collapse the space instead of showing a placeholder.
The best you can do is to increase the fill rate. Those ad networks may offer non-paying community ads that will show up if no paid advertisements are available. This ensures that people still see something instead of layout shifts.
There is a downside to this. Activating too many ads can slow down your website in the LCP department, because the ads are all served from third-party network sites.
So, it is better to reduce the number of ads per page. That will slightly reduce your ad revenue, but ad networks can offer more fill rate for paid ads using fewer advertisers. So, the need for collapsing an available ad space doesn’t come up at all!
2. Specific Dimensions: If you are using lazy loading of images or other rich media like videos, GIFs, infographics, etc., specific the dimensions, that is, specify the width and height. This will ensure that even though lazy loading is available, the specified dimensions will ensure that the space remains reserved.
LiteSpeed caching with QUIC.cloud CND will show a very low quality image placeholder for initial load. If you are not using LiteSpeed tech, you can use dimensions for space reservation.
Mentioning the dimensions ensure that the space doesn’t change on-the-fly as the page keeps loading.
3. Below the Fold: It is better to put new UI elements like ads, videos, etc. Below the Fold. If the Above the Fold content remains in place without shifting, users will have a better user experience, because there will be nothing that pushes the content down.
4. Take Care of CSS: Again, I will recommend not using any page builder. There is a two-prong problem with page builders.
First, they have bloated CSS that leads to increased LCP or Largest Contentful Paint. The second problem is that the CSS they use is critical for them. So, deferring the CSS or even aggressively combining them will cause FOUC or Flash of Unstyled Content. This in turn, will lead to CLS.
I usually do not recommend deferring CSS unless you clearly know which CSS files are critical, and which are not! In that case, you can simply avoid deferring of critical CSS.
There is another way out. You can combine and defer CSS, but use a caching plugin or another plugin that allows regenerating critical CSS.
Critical CSS or CCSS, as it is called, will use only that portion of the CSS that is required for immediately displaying the Above the Fold content. The rest of the CSS can load asynchronously without impacting user experience through CLS caused by FOUC.
Summary:
Reserve space for ads, define media dimensions, add UI elements Below the Fold, and use regeneration of CCSS for above the fold to eliminate FOUC. These things will reduce CLS.
Conclusion
You need to understand it very clearly – every website is different, and hence, optimization steps you take will differ from what has worked for others. There is no golden rule of thumb that you can use. There is no magic formula that will work with a flip of a button.
You have to do things. You have to experiment with different solutions and see what works for you. For instance, if images are causing the LCP issue, you can try optimizing the images even further, or even better, use SVG images if possible. But SVG might not necessarily be lightweight, and it may not be an apt solution for you.
If your ad network is responsible for the CLS, you have to work with them to get the issue fixed. If you are using too many third-party scripts, that will cause both LCP and FID issues. So, you need to shun some and find an appropriate solution for the rest!
If you cannot deal with these technicalities by yourself, it is better to get some professional help, because Core Web Vitals is going to become a real deal very soon! If your website isn’t ready, you will take a hit. The scale or the intensity of the impact will be distributed on various factors, but Core Web Vitals will have its say.
So, be prepared!
