How to identify and fix Google Core Web Vitals on your site

Core Web Vitals are a set of metrics developed by Google to measure the quality of the user experience on a website. Knowing how to identify and fix Google Core Web Vitals is important to make sure your website loads fast and generates good organic traffic.

In this guide you will learn:

These metrics of core web vitals focus on three key areas: loading speed, interactivity, and visual stability.

In other words, they measure how quickly the page loads, how responsive it is to user input, and how stable the page layout is during loading.

Today, we’ll take a deep dive into what Core Web Vitals are, why they matter for SEO, and how you can identify and fix any issues on your site that may be impacting your scores.

From optimizing your images and code to improving server response times, we’ll provide you with practical tips and tools to help you boost your Core Web Vitals and improve your site’s overall performance.

So, whether you’re a seasoned web design pro or just getting started, read on to learn how to master the art of optimizing for Core Web Vitals.

Google Algorithm Updates

In the year 2021, Google introduced Core Web Vitals as a new search ranking factor. Although content remains a crucial element, page experience now has a more significant impact on the ranking score than ever before.

As a result, the latest algorithm update has had a profound effect on the search results of many websites.

As of now, the statistics of Core Web Vitals directly impact your Google ranking. Therefore, it is crucial to understand what they are, how to access them, and most importantly, how to improve your website’s Core Web Vitals to meet this new standard.

In this way, you can enhance the user experience of your website, which in turn can lead to better search engine rankings and increased traffic to your site.

Check the latest Google Search Ranking Updates.

What are the Core Web Vitals?

In 2020 Google already signalled that page experience will be included in SERP rankings and mobile-friendly experience, safe browsing, HTTPS, and a lack of pop-ups will be a factor in becoming months. At the end of the year, three new page experience elements were reviled called Care Web Vitals. These three vitals are:

  • Largest Contentful Paint (LCP),
  • First Input Delay (FID),
  • Cumulative Layout Shift (CLS)

What is measured in Core Web Vitals

All three Google core web vitals are crucial for your ranking in Google organic search and your page position. There are three measured statuses for user experience: Good, Needs Improvement, and Poor. It is important to score ‘Good’ in all three vital elements, otherwise, the Google algorithm will favour more user-friendly pages and the position of your page will drop in Google search.

Three Google Core Web Vitals explained
ElementRankingMeaning
Largest Contentful Paint0-2,5s -> Good
2,6s-4s -> Needs Improvement
over 4s -> Poor
LCP measures the amount of time it takes for the largest visible image or text block on the page to load.
First Input Delay0-100ms -> Good
101s-300s-> Needs Improvement
over 300s -> Poor
FID measures the time from when a user first interacts with the site when the browser responds.
Cumulative Layout Shift0-0,1 -> Good
0,1-0,25 -> Needs Improvement
over 0.25 -> Poor
CLS scores and measures how much page content and elements shift while the site is still rendering.

As you can see above, all three Google core web vitals will measure how long it will take the user to wait for your website to load, and be able to interact with the page. Also, it checks if there are no shifts of elements on the page that would break the user experience.

How to find out the website status of Core Web Vitals

Knowing what we look for, now it is time to check the actual status of the page.

#1 Google Core Web Vitals report in Search Console

Core-web-vitals

Go to Google Search Console. Click on Core Web Vitals and Open Report to get detailed information about the status of your pages.

Core-web-vitals-report
Google Core Web Vitals in Google Search Console

As you can see above LCP on some pages is longer than 4 seconds. You can click on the Details listing to see sample pages that affect the score.

#2 Page Speed Insight

Page Speed Insight is a Google-dedicated page to check a page speed test and get recommendations on how to fix any issues related to your website. In the picture below, you have precisely listed what are values of the LCPFID, and CLS.

PageSpeed-Insights-report
Google Core Web Vitals in Page Speed Insights

#3 Lighthouse Report

  1. Open Google Chrome.
  2. Navigate to the page you want to test.
  3. Right-click anywhere on the page and select Inspect from a dropdown list.
  4. Find Lighthouse. It is located on the top menu on the right. You may click ‘>>’ to get to the Lighthouse menu item.
  5. Click on Lighthouse and Generate Report.
Lighthouse-Report
Google Core Web Vitals in Lighthouse

The report will look similar to this one:

sample-lighthouse-report
Improve Googe Core Web Vitals – Sample Lighthouse Report

As you can see the same page can provide slightly different metrics. The time of the day may also have an impact on your page scores.

Steps to improve your website score

Once you run tests and know core web vitals for mobile and desktop it is time to identify issues and fix them. Please note that mobile score is most important as Google gives it priority.

#1 Fix LCP loading time

If there is a problem with the Largest Contentful Paint (LCP) and metrics show more than 4 seconds for the initial load, first check what is identified as LCP. It could be an image or text.

LCP

If it is an image make sure it is optimised. As a rule of thumb, don’t use images over 70 kb and make proper dimensions as well.

As you can see in the above image width and height (800 x 600) are provided and the image is only 49 kb. It’s crucial to make sure images are light because this will improve loading speed. You can compress images with Optimizilla – a free online compressor.

#2 Implement the lazy loading

Lazy loading allows for delaying a load of images or other objects until they are actually needed. This significantly improves the performance of the website.

Loading of images can be delayed until the user scrolls the page. This means the page will finish rendering on the ‘above the fold line of the page – the upper half of the front page. All tools will show a preview of a page, so you can easily identify it. For pages with many images, videos, or animations lazy loading is a must.

#3 Activate CDN

Content Delivery Network (CDN) is a geographically distributed group of servers that work together to provide fast delivery. In simple words – the user will receive requested content from the closest server to his location. And this means the website content will be delivered much faster.

Many hosting providers offer CDN for free. For example, Siteground, Bluehost or Cloudways have CDN already included in their hosting plans.

#4 Reduce Cumulative Layout Shifts

No one likes when elements on the page move in an unexpected way.

For example, the user intended to click on a button but the page moved and the user clicked on an ad. Actions like this will generate a negative user experience.

To improve your Core Web Vitals score and reduce Cumulative Layout Shifts (CLS), here are some tips:

  1. Specify the dimensions of images and videos: When images and videos are loaded without specified dimensions, the browser may not know how much space to allocate for them, resulting in layout shifts. By specifying the dimensions in the HTML, the browser can reserve the necessary space for them in advance, reducing the likelihood of layout shifts.
  2. Use pre-loading techniques: By pre-loading resources such as images and videos, you can ensure that they are ready to be displayed when they are needed. This can prevent layout shifts caused by elements loading too slowly or not loading at all.
  3. Avoid inserting new elements above existing ones: When new elements are inserted above existing content, it can push the existing content down and cause layout shifts. To prevent this, try to add new elements below the existing ones or use placeholder elements to reserve space.
  4. Load web fonts with a fallback font: Web fonts can cause layout shifts when they are not immediately available, so it is important to load them with a fallback font. This ensures that the text remains visible until the web font is loaded.

By implementing these tips, you can reduce the likelihood of layout shifts and improve your Core Web Vitals score, resulting in a better user experience on your website.

#5 Reduce JavaScript execution time

It is an important factor for First Input Delay (FID) measure because all front-end actions are affected by JavaScript.

Users will have a negative experience if after clicking on a link nothing happens because the website is slowly processing JavaScript jobs in the background.

FID score is not directly available but Total Blocking Time (TBT) is so if TBT is not red FID should be fine too.

TBT
Improve Googe Core Web Vitals – Reduce Javascript execution time

One of the options to reduce JavaScript and CSS size is to minify it. Minifying is a process of minimizing code and markup by removing unwanted spaces, characters and part of the code that is not needed, making a file size much smaller.

This does not sound like a human job, right? Indeed, there are WordPress plugins designed to fix these issues. The one worth looking at is WP Rocket, one of the best on the market.

#6 Improve server response time

In general, faster server response will improve your SEO, but also your user experience. It is important to identify issues related to server response time.

There are many factors that can influence server response time.

Web Hosting – check stats before buying it!

The most obvious one is web hosting. Web hosting providers store your website files and make your website available on the internet (saying in short). If the web hosting provider has slow servers or their share hosting space is too small it will affect how fast your website is loading.

Before buying your web hosting always check if they are reliable. This website is running with Cloudways and is very fast.

Check the latest statistics for the fastest web hosting providers.

Website Builder – select one that is light

When I was trying to fix my server response time for our Travel Spiced Life blog, I struggled for a while to identify what was wrong as my page score was on some pages between 25 and 40. You cannot really rank well with Google with a score like that.

Over time I learned that the website builder I used was heavy by default and whatever I was doing to improve my score nothing worked.

The best way to check how heavy is your website builder is to create an empty page and run a speed test on it. If you find that the blank page score is lower than 70, how you can achieve a better score when you add text, images or videos?

Our first website builder was Elementor and I really liked it in the beginning as it was user-friendly.

Because I could not achieve better Google Core Web Vitals I decided to upgrade my website from Elementor to a super-fast, Gutenberg blocks theme – Kadence.

Now, this website and my other websites score more than 90 on mobile and desktop.

Unnecessary plugins

Plugins can be an excellent way to add extra functionality to your blog and enhance its performance.

However, it’s essential to keep in mind that having too many plugins installed can have adverse effects on your website’s loading speed.

It’s crucial to assess how many plugins you have installed and their impact on your site’s performance. Each plugin can add to the overall weight of your site, contributing to slower loading times.

Therefore, it’s vital to deactivate and uninstall any plugins that are unnecessary or redundant.

By reducing the number of plugins you have installed, you can significantly improve your website’s loading speed and provide your users with a better experience. It’s also a good idea to regularly review your plugin usage and ensure that you only have the ones you need.

In addition to removing unnecessary plugins, you can also optimize your site’s performance by choosing lightweight plugins or combining multiple plugins into one.

By doing so, you can streamline your site’s functionality and reduce the number of requests required to load your page, resulting in faster load times and improved user experience.

How to improve Google Core Web Vitals – Summary

As you see there are many things that can affect your Google Core Web Vitals. Fortunately, most of them are easily fixable.

If you are starting a blog, or started recently, don’t wait too long and fix your website before it is too late. Long-term existing bloggers should also make necessary updates as all websites that don’t meet new Google criteria will deteriorate in ranking over time.

You don’t need to make all changes at once. In general, try to start from the below steps and I can guarantee your website will rank higher.

  1. Check if your web hosting provider is fast and recommended.
  2. Check if your website builder is not heavy, otherwise, switch to a light WordPress theme like Kadence.
  3. Use WP Rocket to reduce server response time.

I hope by doing these simple steps you can keep ranking high with Google.

Leave a Reply

Your email address will not be published. Required fields are marked *