Google Core Web Vitals Optimization

A simple yet comprehensive guide to master Core Web Vitals

Google’s algorithm was recently updated in June 2021 to include page experience as one of its primary ranking signals. And will continuously be upgraded during the following months too according to a Google news release.

This adjustment aims to take into account the user experience of pages returned in the SERPs rather than the more traditional and objective signals such as on-page targeting and PageRank that have been adopted in the past.

With the impending upgrade, it’s more important than ever to understand the various aspects of web page experience and optimize your website for each of these aspects.

 

Fortunately, Google has detailed the various factors that go into deciding a page’s overall experience. These are the following:

Core Web Vitals

A mix of three essential performance indicators that assess the visual loading, interaction, and visual stability of your page as it loads for the user – First Input Delay, Largest Contentful Paint, and Cumulative Layout Shift.

Mobile-Friendliness

More users are drawn to their phones than other gadgets nowadays. This factor examines how easy it is to use and navigate websites on phones and other mobile devices, including content readability and clickability. It also looks at the accessibility of links and on-page components.

Safe Browsing

Checks for malware, phishing, and compromised content on a website to guarantee that users may browse safely.

HTTPS

Determines whether or not a website’s connection is secure and whether or not the site is served via HTTPS, as recommended.

Non-Intrusive Interstitials

This factor sees to it that visitors’ access to critical on-page material is not hindered while they browse.

Core web Vitals are part of Google's overall Evaluation of "page Experience"

Core web vitals

Loading

Largest Contentful Paint (LCP)

Interactivity

First Input Delay

Visual Stability

Largest Contentful Paint (LCP)

Other web vitals

Mobile Friendly

Safe browsing

Https

No Intrusive Interstitials

Our Focus in this Article is Core Web Vitals, so we’ll be exploring what the core web vitals are and how to improve them on your WordPress site.

What are Core Web Vitals

Core Web Vitals are a collection of three unique web vitals that Google considers are most appropriate for evaluating a web page’s user experience.

They are the parameters that the website owner should monitor and, if necessary, enhance. Each of the Core Web Vitals’ three components reflects a distinct part of a web user’s experience.

Google is constantly striving to provide the best possible experience for its users and has conducted extensive testing of the numerous criteria used to quantify the user’s experience on every web page. This is a continuous process.

Google is currently concentrating its efforts on three components of the user experience:

  • Loading
  • Interactivity
  • visual stability

The following are the critical web vitals:

  • Largest Contentful Paint: Also known as LCP, the largest contentful paint evaluates the webpage’s loading performance. A good LCP is always below 2.5 seconds.
  • FID (First Input Delay: The FDI is a metric that indicates how interactive a page is. A good FID must be lower than 100 milliseconds.
  • Cumulative Layout Shift (CLS): CLS quantifies the webpage’s stability. A CLS of less than 0.1 is optimal.

Largest Contentful Paint (LCP)

LCP evaluates the page’s loading performance. We’re not focused on the page’s actual loading speed here, but instead its perceived speed. It refers to the point at which the user perceives the page to be fully loaded.

LCP does not track how long it takes for the entire page to load. It calculates the time it takes for the page’s first central impressionable element to load.

Typically, pages load element by element in consecutive stages. As a result, the most critical material at the top of a web page needs to load rapidly. The LCP will be better if it happens sooner.

According to Google, a page’s LCP should never go beyond 2.5 seconds.

First Input Delay (FID)

FID is a metric that measures a user’s first assessment of a website. Again, we’re talking about how rapidly the user can engage with the page, not how quickly it loads. This Core Web Vital indicator measures the time between a user’s first interaction with a page and the browser’s ability to respond to that engagement.

When people click a link, taps a button, or fill out a custom form, they interact. When a link becomes clickable, we are looking at the time it takes for it to become clickable. The FID is high if the user fills out a form and then has to be patient for the following page to load so the browser can load other portions of the web page. As the user fills out the information and needs to move onto another page, this causes dissatisfaction.

Users will enjoy a good experience with a First Input Delay of below 100 milliseconds.

Cumulative Layout Shift (CLS)

CLS is a metric that evaluates how often a user’s layout shifts throughout a web page’s loading. Because numerous page contents are loaded non-synchronously, or the DOM components are put on top of existing content, an unanticipated layout change occurs.

Ads, photos, videos, fonts, and headings, for example, all change size dynamically. It is inconvenient and upsetting for the user since he may wish to click something, and instead, the shift occurs, causing him to do something different.

A CLS score of below 0.1 indicates that the user experience is satisfactory.

How to optimize the user experience

Step 1:

In Search Console, discover the pages that are causing problems.

The first step is to look into the issues that Google Search Console has detected. Examine the ‘Core Web Vitals’ report to identify pages that require immediate attention and modification and mark them as such. By the way, those are the most crucial pages on your website.

Step 2:

Analyzing sites using PageSpeed Insights

You may obtain the PageSpeed Insight reports from the Search Console dashboard. Upon tapping the URL, a panel will open on the right side of the screen. By selecting the ‘PageSpeed Insight,’ you will be taken to a new tab where you may read the report. Examine the report and make an educated guess as to what is causing the problem.

Step 3:

Using Lighthouse, you may acquire more detailed information on the pages you are seeing

Although PageSpeed and Lighthouse provide identical recommendations and reports, Lighthouse offers a few additional features.
Because of this, it is recommended that you do a Lighthouse audit on the page in order to gather additional information.

Step 4:

Collaborate with web.dev on prioritization

Many suggestions for improving the user experience on your website will be sent your way; however, you must prioritize the changes you intend to make. You can accomplish this using web.dev/measure, or you can do it on your own without using a tool.

Auditing your website on web.dev will provide you with a prioritized list of ideas.

Step 5:

Resolve the issues that are affecting your site

Now, one by one, work your way through each obstacle. All of the tests you’ve taken have provided you with sufficient information and recommendations to enable you to determine what needs to be done.

How to Improve CWV on a WordPress site

I’ve put together some recommendations for optimizing your website for the important areas of webpage experience to help you make sure it’s ready for this shift.

These include things like improved mobile usability and website security, as well as faster and more convenient visual loading.

1. To reduce visual load times, preload key resources.

The emergence of above-the-fold content is one of the first cues for a visitor to load a page.

This is where the first Core Web Vitals statistic, Largest Contentful Paint (LCP), comes in to quantify how quickly the primary on-page element loads.

Once you know what the LCP element is, you can utilize the Performance tab in Chrome DevTools to view the visual progress of how rapidly it loads.

Simply analyze the website in Chrome DevTools to see what the LCP element is, and it will be displayed in the Performance tab’s waterfall chart.

Ensure Screenshots are checked, and then begin profiling the page as it loads.

When you’ve finished your profile, hover your mouse over the load chart at the top to see a screenshot of the website as it loaded over time.

This will allow you to see how quickly the various elements of the page load.

Consider using preloading to notify the browser to retrieve these resources first as a preference to assist accelerate the loading of the LCP section and above-the-fold content.

The browser sends a request to the server, which the server fulfills with the packages requested by the browser. The longer the browser takes to receive the response, the longer the browser will take to render the page in question.

A faster server response time adds directly to a faster total page speed. To ensure that the WordPress website loads quickly, a powerful and fast web hosting provider is essential.

The first step is to get a high-quality WordPress hosting service, and then everything else will fall into place. No further improvements will be possible to increase the loading speed if the server response time is very long.

A delay in response time will occur if the performance of your server is not appropriately optimized.

CMS platforms like WordPress, among others, require servers with specific configurations in order to give the best performance. WordPress can be installed on any server, however for the best results, use servers that have been particularly optimized for these platforms

Switching to a more trustworthy hosting service can quickly alleviate this problem.

A Content Delivery Network (CDN) is a large network of computers that are dispersed around the world in computing. The content delivery network (CDN) stores your content on a server close to the user, and the browser downloads the page from the CDN server instead of the webserver when the user returns to the website.

As a result, the browser does not have to demand a response from a faraway server but rather from the nearest server. As a result, the server’s latency time is lowered, and its overall response time is enhanced. There are a plethora of free CDNs available all over the world. CloudFlare is one.

2. Minimize long tasks to improve main thread activity.

Various issues can prompt a user to have to hold for the browser to react to their taps or click on a website behind the scenes.

This is what the next Core Web Vitals metric, First Input Delay, measures.

While this can be a frustrating experience for users, we can take steps to address the problem and shorten the delay between human contacts and browser answers.

Long tasks are a typical cause of this problem.

Essentially, they are lines of JavaScript code that cause the page to stall and become unresponsive by blocking the main thread for an extended length of time.

Long tasks in Chrome DevTools are marked with a red triangle at the head of the waterfall chart underneath the Main tab.

When you go to the Bottom-Up tab on a long task, it breaks down the various actions that took place within the task, like assembling and parsing scripts.

The solution needed will differ depending on the tasks that are causing main thread blockages; however, code splitting and providing scripts in smaller parts is a frequent solution for addressing protracted chores.

3. Make sure there's enough room for images and embeds to load

The next Core Web Vitals metric, the Cumulative Layout Shift (CLS), measures how much a page’s visual layout shifts as it loads. The following are some of the most common causes of a low CLS:

  • Images with no dimensions
  • embeds, ads, and iframes with no dimension
  • Injection of Dynamic Content

The CLS score rises when photos are missing the width and length attributes.

If the picture size is not supplied, leave the blank area on the page as the page loads from top to bottom (length and width).

Developers used to add the Length and Width properties to image tags in the beginning, but those tags were in pixels. Despite the image’s size, the pixel dimension is provided, and the browser leaves that space for the image. The image must fill the entire space of 640360 pixels.

But then came responsive design, and developers stopped adding width and length attributes to their code. Instead, they began resizing the photos according to the device’s display using CSS.

This strategy works, but there is a drawback. Only after the image has been downloaded can the browser determine its size. The page’s content would re-assign itself as the image loaded. Users losing their location on the page due to a rapid pop down of the screen has grown commonplace.

Aspect ratios were created to alleviate this problem. The width-to-height ratio is referred to as the aspect ratio.

The browser can find the alternative dimension and aspect ratio if it knows one. The Modern Web, on the other hand, made extensive use of aspect ratio, SRCSET, and CSS.

The front-end of WordPress allows you to modify the picture size. You don’t have to bother about responsive images because they’re a standard part of WordPress.

One of the key causes of the low CLS score is advertisements. For the best performance/revenue, site owners frequently offer dynamic ad sizes, as larger ad sizes result in more clicks. However, huge advertising can occasionally detract from the user experience since they push down the content that the user is trying to read.

Best practices for avoiding such a problem include:

  • Reserve the space for the advertising in the same way that you did for the photos.
  • Don’t compress the space if the advertising isn’t placed in the designated area.
  • After reviewing the previous data, choose the optimal size for the adverts.

If you must, make sure to secure a position at the top of the page.

However, there is a chance that smaller advertising will cover the vast space or that no ad will appear at all, but this is a risk you must accept for a better user experience.

For this, you can utilize a variety of WordPress Ad Inserter plugins. The Ad Inserter plugins allow you to customize the size of the ad space.

Portable content, such as YouTube videos, Google Maps, and Tweets can be added to a WordPress page.

Browsers have no way of knowing how big these embeds will be. The embeds, for example, are dynamic and might alter. WordPress can’t tell how big the embeds are, so it can’t set aside space for them.

They will eventually load, and the structure of the page will be affected. Precalculating the size of the embeds and leaving a placeholder on the page is the best solution to this problem. You will, however, require the services of a web developer for this.

Examine the embeds after they’ve loaded, and make sure they’re the right size. Create a dummy with the same dimensions as the original.

Apart from advertisements, there’s so much material that webmasters try to push by injecting it on top of already displayed content. A service ad, a form, or updated privacy policies are all examples of things that can detract from the page’s overall experience.

Another example:

  • Download our native app.
  • GDPR warning
  • material that is related
  • Orders are still being taken.
  • Subscribe to our e-newsletter!

The answer is the same. If you’re going to load something, make sure there’s enough room on the page, so it doesn’t mess with the layout