How to Improve Core Web Vitals With Speed Reports

Have you been wondering about what core web vitals are and How they would impact the website? Do you want to know how you can improve core web vitals reports of your site? Well, you have landed in the perfect place. In this article, we will be clearing all queries related to Core Web Vitals and lastly, we will show you a practical approach to optimize the core web vitals of your WordPress website.




What are Core Web Vitals?

In simple words, Core Web Vitals are the set of metrics Google has been using to measure the user experience of the website. As of June 2021, Google is going to consider core web vitals along with other page experience factors as a ranking signal.

Although there are several metrics or factors are available which determine the overall page experience of the web page, but under Core Web Vitals, you will find these three main metrics:

Largest Contentful Paint (LCP):

This core web vital measures the time a web page takes to load or render its main content on the device viewport or screen. A web page should aim to load the main content within 2.5 seconds in order to score a good LCP.




Consider this example given by Google to understand the concept of LCP: 

In the above example, two slides are there, basically, this is how a Google Page Speed or browser loads your website page when requested. In both slides, you would notice that the largest content has been changing continuously as the content is loading. 

In slide 1 the new content has been adding to the DOM according to the server speed and this will also change the largest content. For example, first, the largest element on the web page is the top heading but as soon as the image loads the tag of the largest content would be given to the image, and hence that image is considered as the largest element of this webpage.

The time a web page took to load its largest element is defined as your LCP score.




In slide 2, Google trying to show that page scrolling or moment in the page layout also changes the largest element accordingly. With this regards, you must have optimized your whole web page in order to get a good LCP score 

First Input Delay (FID):

This is the second core web vital which measures the time a web page takes to paint the first image or text on the device viewport or in other words the time when users are allowed to interact with your web page. According to Google, a web page should become interactive in less than 100 milliseconds to get a good FID score.

Cumulative Layout Shift (CLS):

CLS measures web page stability or in other words, it measures how much elements of a web page move or shift as the page loads. A web page should maintain or score less than 0.1 CLS to provide a good user experience.




Some of the bad CLS examples are: when you reading something on the website and suddenly you lost your place or the web page scrolls automatically, when you click on a link but ended up on another link etc. Such type of shift in page layout leads to a bad user experience and hence impacts badly on the CLS score.

In the below example, Google demonstrated how the bad layout or elements unwanted moments affect the layout and hence page and user experience

BAD CLS Example Shown by Google

To find out what causes a bad CLS score and how to improve the CLS score, keep reading. We will discuss this shortly.

Apart from these Core Web Vitals, you should also consider improving other web vitals like:

  • First Contentful Paint (FCP): which measures how much time a web page takes to start rendering the first content on the viewport or device screen.
  • Time to Interactive (TTI): which measures how long a web page takes to become fully interactive.
  • Total Blocking Time (TBT): which measures the time difference between FCP and TTI.

Why Should You Improve Core Web Vitals?

After going through the above section, you should understand the meaning and concept of Core Web Vitals. But have you ever wondered, why measuring the Core web vitals is important for your site? How does the low or good core web vitals score have impacted your site?




The two main reasons to improve core web vitals are:

For Better User Experience:

Imagine a user comes on your site and due to the slow loading speed of your web page, he goes away without actually reading a single line of your content. The whole point of making a website or content became meaningless. But as soon as you take action to measure and improve the core web vitals of your web page, users will start spending time on your website and also take action on your site. By improving the page experience you not only delight the users but also boosting your conversions.

For Better Search Engine Rankings:

Your site may have the best content in the world for a particular query or you might have been successful in creating hundreds of backlinks for your website, but still, the Page experience or user experience contributes much more than any ranking factor in the search engine rankings.

User experience consists of a lot of factors like website speed, website responsiveness, loading speed, bounce rate, etc.

With the help of these core web vital metrics, you can identify the problems that impact the user experience of your site and take necessary actions.

Infact, Google already confirmed that they are going to consider core web vitals reports and other page experience reports from this upcoming June as a ranking factor.

What are the best ways to Improve Core Web Vitals?

The process of improving core web vitals is basically divided into 2 parts: Measuring and Improving.

In this section first, we introduce you to the 2 best measuring tools from which you can discover any issues and errors that are impacting the core web vitals of your webpage then we will go in deep to analyze how you can improve LCP Score, FID Score, and CLS score by giving solution to every possible error.

Methods to Measuring Core Web Vitals

The ultimate goal of yours’s by measuring the core web vitals is to identify the cause and opportunity to resolve the core web vital errors .

According to our research, we have found that these are the best ways to measuring core web vitals:

  • Using Google Dev Tools
  • Using MonsterInsights Plugin Speed Reports (Recommended and Easiest)

Note: In the next section, you will see the practical steps to measuring Core Web Vitals with the help of the MonsterInsights plugin.

Using Google Dev Tools

There are tons of tools available in the market for this task. Even Google has its own set of dev tools for measuring core web vitals including Page Speed Insights, Chrome UX report, Search Console, Chrome Dev Tools, Lighthouse, and Web Vitals Extension.

The major advantage a user gets while measuring Core Web Vitals with any of the Google Dev tools is that they don’t have to pay anything for that. However, the main problem with these tools is that they are best for web developers not for users who don’t have knowledge of how the back end of your website works.

The solutions or the suggestions recommended by Google Dev tools to improve the core web vitals are complicated. WordPress users may face problems while implementing suggestions provided by the Google Dev Tools.

Also, users have to insert all URLs of the website to gather audit reports which are very time-consuming. This can be a lot easier with the case of the MonsterInsights plugin.

In a nutshell, Google Dev tools are best for measuring the site speed performance or core web vital report of the website but the solutions recommended by them are hard to implement.

Let me show you with the help of an example:

Suppose I wanted to check my Core Web Vital report with the Google PageSpeed Insights tool, so I ran an audit on a webpage and it shows 54% FCP (First Contentful Paint). To improve the score of this web vital report, the Google PageSpeed tool suggests different solutions. You can find them under their opportunity section.

Google Core Web Vitals Audit Report
Google Core Web Vitals Audit Report : Source – Google PageSpeed Insights
Suggestions to Improve Core Web Vitals
Suggestions to Improve Core Web Vitals – Source – Google PageSpeed Insights

The solutions suggested by this tool are hard to implement. For example, you can see in the 2nd screenshot that one of the solutions this tool suggested is “Reduce JavaScript execution time”. And under that, it mentioned all unnecessary scripts that cause the problem at page speed and increasing the FCP (web vital) time.

But how would you implement this suggestion? If you tap on the “learn more” button, Google recommends a few solutions which are again best for Non-WordPress users or web developers.

For WordPress users, we highly recommend the next method to measure core web vitals.

Using MonsterInsights Speed Reports

MonsterInsights is the WordPress Analytics Plugin basically used for extracting a different kind of reports in a much easier way than you have normally seen in Google Analytics. With this plugin, you can extract reports like Pageviews, website speed reports, Bounce rate, Traffic source, Top Posts/Pages, etc. Further, this plugin is also used for implementing different types of tracking on your site without coding.

Well when we talk about core web vitals, MonsterInsights recently released a new feature called Site Speed Report which not only measures but also helps you to improve core web vitals report of your site.

The main advantage of MonsterInsights Speed reports that it automatically audits your website pages regularly, offers a goal for each metric, and gives you complete details on how you can improve core web vitals as well as the performance of your website.

The suggestions recommended by the MonsterInsights Speed Reports are clear and easy to implement, unlike Google Dev tools.

Let’s see the live demo to enable MonsterInsights Speed Reports on your WordPress website and improve core web vitals.

How to Measure and Improve Core Web Vitals with MonsterInsights Speed Report
Step 3 Improve Core Web Vitals and Other Performance Issues

In this section, you will learn how you can audit and improve core web vitals issues with the help of the MonsterInsights Speed Report.

Total Time: 5 minutes

Step 1: Purchase MonsterInsights Pro Plugin and Install on your Website

Step 1 Purchase MonsterInsights Pro Plugin and Install on your Website

Although MonsterInsights is also available in a free version but for the Site Speed Report feature, you will require its paid plugin. There are 3 plans available: Plus, Pro & Agency. Choose accordingly. After making the payment, download the plugin then upload and install it to your WordPress website.

Step 2: Navigate to Site Speed Report

Step 2 Navigate to Site Speed Report

After the plugin activation, from the WordPress dashboard navigate to Insights > Site Speed. Here you will see your overall website performance report which also covers Core web vital reports. You can also export this report in PDF format.

Step 3: Improve Core Web Vitals and Other Performance Issues

Step 3 Improve Core Web Vitals and Other Performance Issues

On the same page, you will see the suggestions recommended by the MonsterInsights speed report to improve website performance. Also, MonsterInsights offers you a goal for each metric which you should aim for while resolving the issues.

For example, As you can see in the screenshot, the Site Speed Reports detected an issue in the First Contentful Paint web vital metrics and under that, the easy to implement instructions are also mentioned.

Estimated Cost: 99.50 USD

Supply:

  • MonsterInsights Plugin
  • WordPress Website

Tools:

  • MonsterInsights Plugin
  • WordPress Website

Materials: MonsterInsights Plugin WordPress Website

Methods to Fix CLS Issue: More than 0.25

Has your webpage scored more than 0.1 or 0.25? Well if the CLS score exceeds 0.25 then you should implement a necessary solution. Although, there could be lots of reasons for the high CLS score, but we are trying to give you the solution for every possible reason.

I hope at this point you have figured out the reason for bad CLS by measured out your web page core web vital with any of the methods explained in the above section. Now let’s check out the solutions or methods to fix the CLS Issues.

The list of top reasons that affect the webpage CLS score are:

  • Missing Image dimensions
  • Adding or loading of elements dynamically above the fold
  • Web Fonts
  • Ad widget unexpected moment
  • Unreserved Embeds dimensions
  • Dynamic Animations

CLS Issue 1: Missing Image Dimensions

Are you facing this error “Image elements do not have explicit width and height” when measuring the core web vitals of your web page in Google Page Speed?

CLS Error Image elements do not have explicit width and height - Google Page Speed

This is happening because some of the images/videos used on your website are missing the size attribute and their size is usually controlled by the CSS code dynamically. When there is no width and height is defined explicitly, the browser could not able reserve the space for such elements. At the moment such images or videos load, the other elements of a web page like HTML text or CSS shift upwards or downwards, leading to a bad page experience and impacting the CLS score.

CLS Fix 1: How to Add Missing Image and Video Dimensions Manually

Well if you are a non WordPress user or you know about web development then this method would be best suited for you. With the Google Page Speed core web vital report, you can able to find the image name that does not have the width and height mentioned.

After finding the name of such images and videos, you need to edit the HTML code of the web page. And then add the missing pixel dimensions to the image height and width like this:

<img src=”image_name.png” width=”500″ height=”500″ alt=”myimage”>

Well if you are a WordPress user and want to add missing dimensions manually simply open up the post/page in an edit mode and tap on the image and from the right enter the missing height or width.

adding missing image dimensions in WordPress manually to improve the CLS core web vital score
CLS Fix 2: How to Add Missing Image and Videos Dimensions Automatically

Well, for those who are lazy or don’t want to waste their time on fixing the missing dimension of the images one by one, then a plugin like WP-Rocket could be the best approach for them. It will save a huge time and further prevents all the future CLS shift issues related to missing image dimensions.

Basically, WP-Rocket is the world’s best site performance optimization plugin for WordPress. They have tons of features like caching, file optimization, CDN, lazy loading, compression support, etc. Even major bloggers recommend this plugin as their first choice when we talk about the site optimization

By installing this plugin, your site won’t be facing any issue related to missing image dimensions because WP-Rocket.net will take care of this automatically. It will add missing height and width attributes as soon as your website page starts loading.

You just need to enable the “Add missing image dimensions” module located under the Media tab and you are good to go.

CLS Issue 2: Adding or loading of elements dynamically above the fold

Google has clearly mentioned in their CLS optimization guide, that a webpage should avoid any elements that would load unexpectedly above the fold or in other words above the existed content.

This is mostly seen in a website where a publisher adds some kind of banner, pop-up, or sticky bar in the header or uses ads on a website. Such types of elements are appearing dynamically and hence causing a shift to the position of the below elements.

How to Fix this CLS issue: Adding or Loading of Elements Dynamically above the Fold

Well, the only way to fix this issue is to either load such dynamic elements below the fold or you must have defined or reserved a space for those elements (if you still want them to appear at the top of the content).

With the core web vitals measuring tools, you can identify the element or scripts which cause a shift in the CLS. However, the process of removing or shifting such elements below the fold (or existed content) is varied and depends on the element itself.

Non-Plugin Approach: 

If you used any plugin to add banners or popup, then consider change its settings or remove the plugin itself. Else you may need to edit the website code to change the position of that element in order to shift that problematic element below the fold. This can be a tricker and if you are a beginner in web development, you should take the help of a web developer to resolve this task, otherwise, you could end up breaking your site. Sites like Fiverr could hook you up with cheap web development services starting from just $5.

Plugin Approach

Luckily if you are a WordPress user and you prefer plugins over manual optimization, then WP-Rocket could resolve this problem. With this site optimization plugin, you cannot move the dynamic content below the fold.

However, you can control or delay the appearance of such dynamic injected content. 

With the WP-Rocket Delay Javascript Execution feature, you can delay all those scripts that are injected dynamically above the fold until user interaction. By doing this the CLS of your webpage won’t be impacted, because as per the Google Core Web Vitals guidelines, only those layout shifts are counted which occurs before the user interaction.

The process to delay all those dynamic content scripts that appearing above the fold and causing the CLS are as follows:

First, you have to gather all those problematic scripts from the Google Page Speed that are currently appearing above the fold. Well, check these sections of Google Page Speed for finding such scripts: 

  • Reduce JavaScript Execution time
  • Reduce the impact of 3rd party code
  • Remove Unused JavaScript

On my website, these scripts causing the problem and impacting the CLS score of my website. 

dynamic scripts impacting the CLS Score - Google Page Speed Core web vital report

Then simply (purchase and) install the WP-Rocket plugin on your website. Navigate to the Delay JS execution module and enable it. Then insert the URLs of all those scripts which has been injecting dynamically and save settings. (Check Google Page Speed)

delaying loading of dynamic contents to improve CLS score

Now all those scripts you have put above will be delayed and only execute when there is a user interaction occur on the page.

CLS Issue 3: Web Fonts

Well, if your site is using fonts hosted from another site for example Google Fonts, then this might be impacting the CLS score of your site and also increasing the blocking time of the page (see image). 

CLS Issue - Google or online fonts

Let me explain to you in simple words: 

Suppose your website theme uses fonts that are hosted on a third-party server, then whenever someone opens your website page the browser takes time to download that font from the server. The time required will depend on the speed of your font hosting server. 

During this time, all those elements that using that hosted font will be hidden (FOIT), and the browser shows a fallback font or unstyled text which is defined in the CSS file (FOUT)

FOIT: Flash of invisible text

FOUT: Flash of unstyled text

As soon as the hosted fonts are downloaded, the browser will replace these fallback fonts with them and it may cause CLS shift because of the font size difference. 

By applying the rel=preload attribute, you can force the browsers to download such fonts as a priority, or in other words, browsers will download such resources in the early phase of the page lifecycle.

Even Google Page Speed suggests you apply preload on all those high-priority resources that should be served as soon as possible.

Google Page Speed suggest to apply preload on all those fonts which impacting the CLS Score
CLS Fix 1: How to Fix the issue of Online Hosted Fonts Manually

Well, if you like the manual coding approach then this solution is for you. Suppose the fonts are hosted from Google fonts servers, then you will find the link of the google fonts stored in the header.php file of your website.

I would suggest you to take a backup of the website before making any changes to the header.php file

If you are a WordPress user, you can find the header.php file by navigating to the Appearance > Theme editor > Header.php.

You will probably see the Google font’s script in the header.php file similar to this:

<link href="/assets/vendor/googleapis/css?family=Roboto" rel="stylesheet">

Now we just need to add a rel=preload attribute and link back to the CSS file. After that it looks like this:

<link href="/assets/vendor/googleapis/css?family=Roboto" rel="preload" as="style" onload="this.rel='stylesheet'">

Note: This hack might not work if you are using page builders. In that case, you first need to disable google fonts which are enabled by default and then apply the rel=preload.

CLS Fix 2: How to Fix the issue of Online Hosted Fonts Automatically

Well, those who don’t want to involve in a manual coding mess, can take the help of a plugin like WP-Rocket. As I already discussed this site optimization plugin in the above section, you will be glad to know that WP-Rocket.net also helps you to resolve font-related errors. 

Whether you want to optimize Google-hosted fonts or self domain hosted fonts WP-Rocket got you covered.

When you want to optimize self-hosted fonts and improve the core web vital score of your site, you can take the help of the WP-Rocket preload module. The steps to enable preloading on self-hosted fonts with WP-Rocket is very easy:

First simply copy the link of the fonts shown in the Google Page Speed Core web vital report, then paste it into the “fonts to preload” section. You will find this section under the Preload tab.

preload-fonts using wp-rocket plugin to resolve CLS core web vital issue
Source: WP-Rocket Plugin

When you want to optimize Google fonts simply, install this plugin on your website and navigate to the Tools tab and then enable the Google font optimization module. 

optimizing google fonts using WP-Rocket wordpress plugin to increase CLS score
Source: WP-Rocket Plugin

CLS Issue 4: Ad Widget Unexpected Moment

Are you using Ads on your website? Then you may feel bad by knowing the fact that ads are one of the major elements that cause a bad shift in the website layout. 

In today’s world of advertising, almost every ad network using dynamic ads, and due to this, we could not define a fixed space for ads. The size of ads served totally depends on the ad network. 

Due to this, you cannot specify a fixed size for the ad widget on our website.

Since ads are hosted on other server’s we cannot control the ads text, graphics, etc directly, and hence there is no chance to eliminate the complete effect of ads on the CLS, however, we can reduce or minimize it with the help of these tips mentioned below:

How to Fix this CLS Issue: Ad Widget Unexpected Moment
  • Reserved as much space as you could for the ads on your website. You can get information about the maximum ad size (dimension) from the ad network website itself. Or you can also use the historical ad data to determine the most served ad size.
  • Define fallback images to replace the ad widget area when ads don’t appear on the website. This way the area where ads are supposed to appear won’t collapse and the layout will not affect.
  • Make sure that your website ads loads upon user scroll within 0.5 seconds, because as per the Google core web vital guidelines, the layout shift occurs by the user input such as tap, touch, click, etc within 0.5 seconds are negligible or in other words, it would not affect the CLS score of the website.

Now you may wonder…how would I load my website ads within 0.5 seconds?

The answer is simple: use the fastest hosting like Rocket.net, do not use slideshows, optimize images, optimize javascript, optimize main thread, etc. 

Note: Whatever ad network you are using for serving ads, the website speed will suffer for sure. If you are using shared hosting, consider upgrading your hosting provider to a hosting provider which has built-in CDN like Rocket.net

Even if we are using Rocket.net hosting on this site with the running ads, have you experience any issue with loading speed? I am sure, you did not. This is the power of Rocket.net hosting.

  • The best alternative approach in place of upgrading web hosting is to use a plugin like WP-Rocket. As we already discussed in the CLS issue 2 section that WP-Rocket helps in delaying all those scripts until user interaction which is injecting dynamically above the fold. Gladly Google ads script is one of them. WP-Rocket automatically delays the execution of the Google ads script. No manual actions are needed. Apart from this if your website running ads served through other ads networks then you can manually insert links of those scripts under the “Scripts to delay” box available inside WP-Rocket.

The other great advantage of this WP-Rocket plugin approach, that you don’t have to manually reserve a space for the ads to protect the CLS score, because all ads script would be executed after user interaction and hence they wouldn’t be counted under a layout shift.

CLS Issue 5: Unreserved Embeds Dimensions

Have you often using YouTube videos, Maps, social media posts, or other third-party elements on your website? Then, you have definitely aware of the embeds feature available in the WordPress editor.

Well, most of the embeds will be load on the website in the following forms including iFrames, inline HTML Code, or JS tag with HTML fallback.

The problem with Embeds that the browser doesn’t know what embeds is supposed to contain until they are requesting from the server. It could be a YouTube video, GPS Maps, Facebook Post, Instagram Story, and whatnot.

Due to this, a browser can’t reserve an exact size for embeds. And this leads to a shift in Layout and hence impacted the CLS core web vital of your website.

Let’s understand with the example given by Google:

Embeds in a Website without reserved space causing CLS – Source: Google Dev
Embeds with predefined space – No Impact on CLS – Source: Google dev

Unlike Ads, We have full control over the type of embeds added to the website and that’s why we could able to determine the dimensions of the embeds and reserve the space for them.

When we have this information, we can easily adjust or style the height of the placeholder accordingly. With this approach, you can eliminate the unnecessary layout shifts causing by embeddable widgets.

How to Fix this CLS issue: Unreserved Embeds Dimensions

To define or reserve the required space of the Embeds we want on our website, first, we have to actually add or load them into our website. For demo purposes, I am going to embed a YouTube video through the WordPress Gutenberg editor. 

Simply open up any post where you want to embed a YouTube video and tap on the add block (+) button and choose YouTube/Embed. After that insert the URL of the video which you want to embed.

Then preview the page, now we have to determine the final height of this YouTube embed.

For this right-click on the browser and choose Inspect. I am using Mozilla, but it could also be done on Google Chrome. On the inspect window you need to search the “Embed” word, Or simply hover on the HTML code until the YouTube Embed frame or container is highlighted. Note down the height dimensions of the YouTube embed block.

In our case the maximum height a YouTube embed will require to load perfectly is 416.25 pixels. 

determining the space required for the embed to load with inspect element tool - fixing CLS issue

Now with the help of CSS, you can reserve the correct height for the embed box. To apply a CSS style to the embed block of our website, either edit the CSS stylesheet file of your website or insert the CSS code in the “Additional CSS” box. Navigate to Appearance > Customize then you will find this Additional CSS tab.

Before adding a CSS code to the embed box, first, we need to find its class name. The process is the same. Open the inspect window, hover on the embed iFrame to get the class name. Once you find the CSS class name for the Embed wrapper/block, enter the below CSS code.

The CSS code to define the fixed height for the embed block is mentioned below:

.wp-block-embed__wrapper{
	height:416.25px;
}
reserve the space for the embeds to fix layout shift and improving the CLS score

Note: Replace the class name of the Embed box. This might be different on your website. Also, change the height dimension according to the type of Embed you want to reserve the space for on your website.

After this procedure whenever the embeds load on your website, the container or the embed block of your website will be resized to the fit size automatically according to the dimensions of the embedded content. As a result, the layout or the CLS score of your website won’t be impacted.

Conclusion: How to Improve Core Web Vitals with Speed Reports

We highly recommend that you should start considering your website performance as a serious thing from today. As you can see, Google will be considering Page Experience as a ranking factor very soon. This is the perfect time to audit your website and make sure there will be no issues in Core web vitals reports. For WordPress users, the MonsterInsights Speed Reports feature is the perfect and quick solution to audit as well as resolving page experience issues.

Better “Page Experience” leads to Better “Search Engine Ranking”

I strongly believe that this article, How to Improve Core Web Vitals, helped you to improve the page experience of your website. If you like this article, please share it with your friends. If you want more blogging tips, follow BlogVwant on FacebookTwitter, and YouTube.

FAQ: Improve Core Web Vitals with Speed Reports

Does MonsterInsights work on Non-WordPress websites?

No.

Does MonsterInsights offer a free trial?

No.

After Improving Core Web Vitals, Would my website rank on the first page of Google?

Well, Page experience is not only a ranking factor. Google has more than 200 ranking factors. However, you must see an improvement in your website ranking after optimizing the page experience as well as the Core Web Vitals of your site.

Comments Rating 0 (0 reviews)




Leave a Reply

Sending

Your subscription could not be saved. Please try again.
Thanks for your Interest. Please check your Inbox to Confirm your Email.

Get An IconCreator Software (Worth $97) for Free

Create an unlimited number of professional icons for free and use them on your blogs or websites without any limit.

 Software is available for both Windows and Mac. 

No terms. Software is 100% free. Just Subscribe to our newsletter to get the software.