Google rolls out significant algorithm improvements periodically. Starting in June 2021, Google will update the ranking algorithm, and the most significant change is the introduction of the Core Web Vitals.
These metrics evaluate a website’s speed, responsiveness, and visual stability. From June, these will impact the ranking position of your site. You should take action and improve them if you don’t want to lose organic traffic.
Here is a complete guide filled with actionable tips to improve the Core Web Vitals. Roll up your sleeves, carefully read each paragraph, and put the suggestions into practice.
IMPORTANT: Initially, in November 2020, Google informed webmasters that Core Web Vitals will impact the search ranking starting in May 2021. Later, Google posted an update letting us know that it had delayed the rollout to mid-June 2021. This change won’t suddenly shake up the search results; it will be a gradual rollout. Expect a full impact on your site at the end of August.
What Are Core Web Vitals?
Credits: Google Search Central.
Google doesn’t update its algorithm to annoy webmasters. User satisfaction is Google’s top priority, and this update is a step further to delight its users. As a result, sites ensuring the best user experience will get a ranking boost.
Core Web Vitals are indicators aimed at simplifying the site performance landscape. This set of metrics better quantify the site performance and help webmasters fix the weak points. It’s not a simple algorithm tweak. Google rarely offers so much information about its major rollouts.
In fact, Google didn’t offer hints about many major updates, and webmasters needed to figure out the major changes by themselves.
It might be a new Google policy to inform webmasters about the significant algorithm updates, or this change has a powerful impact. Either way, you should do everything possible to position your site in the green areas of these metrics.
Largest Content Paint
Largest Content Paint (LCP) reports the time it takes a web page’s largest element to load. A webpage qualifies as “Good” on this metric if LCP is less than 2.5 seconds. Webpages with LCP between 2.5 and 4 seconds fall under the “Needs Improvements” category, while pages with LCP above 4 seconds should immediately be fixed.
In plain English, LCP measures how fast the site loads the largest content element. It may be an image or video, but it can also be the header. Use Page Speed Insights to identify the LCP; for instance, a blog post’s featured image was the LCP of the blog homepage.
How to Improve LCP
Let’s analyze each factor that affects LCP and see how to make your site fall under the “Good” category. Four factors affect LCP:
- Slow server response times.
- Render-blocking JavaScript and CSS.
- Resource load times.
- Client-side rendering.
Slow server response times mean, more or less, that the hosting platform isn’t good enough. It doesn’t necessarily mean that you should change the host, but consider upgrading to a superior plan. Usually, the more expensive plans come with superior performance. The server cache methods and the caching plugin you use on your site affect the server response time.
A content delivery network (CDN) is another method for improving the response time. It delivers the site content to the end-users based on their location. The closest edge point of the CDN delivers the content to the users and reduces the loading time, implicitly the LCP.
The second factor relates to the CSS and JavaScript files that block the webpage rendering. Minify the CSS files by removing comments, spaces, indentations, and other non-vital items. Delete or move the unused CSS code to another file. The non-technical users shouldn’t despair – there are free plugins to do it. Just go to the WordPress repository and look for performance plugins.
Not only do CSS or JavaScript files slow down your site, but other items on your site do as well especially images. Optimize and compress all the images of your site. I guarantee that the site’s overall performance will be better by doing that.
Client-side rendering refers mostly to the ways of reducing the load of JavaScript scripts, and, once again, you can do it with the help of a plugin.
First Input Delay
First Input Delay (FID) measures the time it takes for the browser to respond to the user’s interaction. This input can be a checkbox click, a button, or a link tap, but zooming out or scrolling doesn’t count. Practically, it measures the interactivity of the site.
You are in the green area with an FID of less than 100 milliseconds. FID between 100 and 300 milliseconds means that you have to bring improvements to your site. FID above 300 milliseconds is a serious warning that you must act immediately.
How to Improve FID
While the browser executes JavaScript code, it can’t respond to the user’s interaction. It results in a poor FID. Reduce heavy JavaScript execution to improve the FID. You can do this in the following ways:
- Break up long tasks.
- Optimize your page for interaction readiness.
- Use a web worker.
- Reduce JavaScript execution time.
A long task is a code sequence that blocks the main thread for 50 milliseconds or more. Break up long tasks into smaller and asynchronous tasks. Pay attention to third-party scripts (analytics, heatmaps, forms) because these include JavaScript lines of codes that slow down the loading speed – aka redden the FID of your site.
Luckily, blog posts don’t rely on heavy JavaScript execution. It is a huge relief for bloggers. However, pages containing forms, widgets, and other JavaScript sequences of code need special attention.
Cumulative Layout Shift
Cumulative Layout Shift (CLS) measures the stability of a webpage. CLS is the sum of all layout shifts, and it determines the severity of the movement. Layouts with large movements hurt user experience, and Google aims to penalize these sites.
Stable layouts with no insignificant movements get a mark under 0.1 and are in the green area. The layout needs improvements if it’s between 0.1 and 0.25, and any value above 0.25 is a serious threat to your site.
How to Improve CLS
Elements that severely move on the layout should be fixed. You don’t need Google advice to do it because it’s obvious people don’t like it. Test your site in Google PageSpeed Insights and check the Large Layout Shifts section to see which element affects the layout stability.
The culprits of a poor CLS are:
- Images without dimensions.
- Ads, embeds, and iframes without dimensions.
- Dynamically injected content.
Always specify the width and height size attributes of the images, videos, gifs, or infographics. The browser will know exactly how much space the elements need and won’t change the layout when the page loads.
Ads generate revenue, so it’s hard to give up on them. Unfortunately, these chip in for a poor CLS. Make sure that these have enough space for the layout. Elsewhere, the ads move or appear above the content. Embedded items, such as videos or maps, also affect the layout stability.
Finally, the dynamic content such as top or bottom pop-ups impacts the CLS score. Test all these pop-ups before using them and check how the site loads.
Tools to Measure the Core Web Vitals
You have a clear idea about Core Web Vitals and what you should do to improve the scores. Next, you should learn which tools measure these metrics. Thankfully, Google provides a few effective tools to measure the Core Web Vitals. Check this rundown of tools aimed at informing you about the scores of these important metrics.
This provides a rating for both mobile and desktop versions and is probably the most frequently used tool for assessing site performance. Page Speed Insights allows the analysis of a single webpage and comes with scores and detailed explanations.
The Core Web Vitals are marked with a blue ribbon and, by scrolling down the page, you get a detailed list of things to improve. Certainly, by applying PageSpeed Insights suggestions, your site will fall into the “Good” category.
Google Search Console
All webmasters consult Google Search Console (GSC) to get information about the site’s performance. Therefore, it won’t be a problem to check the LCP, FID, and CLS scores from GSC. Note that Google omits the pages that don’t have a minimum amount of reporting data from these reports.
Another simple but effective method of assessing your site is web.dev Measure. Just enter the webpage URL, and it provides a complete set of recommendations in addition to the LCP and CLS scores. FID is a field indicator – it needs the user’s input and web.dev Measure uses Total Blocking Time instead, which is a lab indicator.
Lighthouse is a powerful tool for assessing the Core Vitals and improving the site performance. There are three ways to run Lighthouse:
- Chrome DevTools.
- Node command line.
- Google Chrome extension.
Lighthouse documentation explains in-depth how to run Lighthouse, so you won’t face any problems using this excellent tool. Lighthouse doesn’t resume only at Web Core Vitals – it offers a complete report about the webpage analyzed in terms of performance, accessibility, best practices, and SEO.
Webmasters who don’t like coding may find Chrome DevTool frightening. However, it deserves mention because experienced webmasters and developers use this tool a lot.
Open DevTools (Ctrl+Shift+J or Cmd+Option+J) and head to the Performance panel. Tick the Core Web Vitals checkbox, and you will get plenty of data about these metrics. Take a look at Chrome DevTool documentation to learn how to get the most from it.
If you don’t need a huge amount of data from Chrome DevTool, Web Vitals Chrome extension is the perfect choice for you. Just install and use it the same way you do with other browser extensions. Click on it when you are on the webpage to assess, and the extension will display the LCP, FID, and CLS scores.
Over to You
It’s pretty impossible to predict Google’s reactions. Google doesn’t say a word about algorithm updates often, and only after many harsh online debates, a Google expert confirms or denies the change.
Now webmasters have at their disposal plenty of information about the new rollout. You have no excuse for ignoring the Core Web Vitals. Start improving your site’s scores to avoid losing organic traffic generated through Google.
