- We Build Your Dream

info@atztechnology.com

How to improve Google Core Web Vitals Announcement Updated Ranking Factor in 2021

Do you know about Google’s core web vitals update? Google created quite an excitement a few months ago. They announced a new ranking factor for 2021: Page Experience. 

User experience has always been an essential aspect of creating the most fantastic website, but it will now play a vital role for your clients. 

New metrics powered all of this, the most important question which is the Google Core Web Vitals. It’s finally time to meet LCP, FID, and CLS!

So in this article, I’m going to explain what core web vitals are, why they’re important, and how to improve core web vitals for SEO.

NB: The Page Experience rankings factor will progressively start in June 2021. On April 19, 2021, Google revealed.

Google Core Web Vitals — A Complete Guide

Google Core Web Vitals

Google incorporates Core Web Vitals, including mobile-friendliness, safe HTTPS security, third-party and intrusive interstitial requirements, with existing search signals.

Though there is a lot to know. This article will only inform you of the basic knowledge you must learn about Google core web vitals. I’ll also show you how to make them SEO-friendly.

First, let me explain to you what core web vitals is? So without further talking, let’s jump into the article.

What Are Core Web Vitals?

Core Web Vitals is a set of factors that Google considers vital in user website surfing experience. Core Web Vitals consist of three unique page speeds and metrics for user interaction: 

  1. Largest Contentful Paint
  2. First Input Delay
  3. Cumulative Layout Shift

In short, the core web vitals are a subset of factors that will make up the “page experience” score of Google (in principle, the way Google sizes up the overall UX of your page).

Google Core Web Vitals Tools

There are several tools for monitoring and improving your website’s performance. I want to mention the essential ones here:

Google Core Web Vitals Tools

PageSpeed Insights: PageSpeed Insights has become a complete measuring tool with both field and laboratory data. In addition, you will get advice on how to improve.

Lighthouse: As a tool to audit PWAs, Google has designed Lighthouse, but it’s an excellent tool for monitoring performance. It offers other controls that are not available for PageSpeed Insights and even some SEO controls.

Search Console Core Web Vitals Report: Now, you may access insights directly from your website through the Search Console. Great to see the way how your website performs.

Chrome has Various Developer Tools: A Core Web Vitals Report (from Chrome 88) and an overlay Core Web Vitals (from Chrome 90). Also, more are coming.

What are the Core Web Vitals Elements

Core web vitals are made of three metrics that measure specific aspects of page speed. 

What are the Core Web Vitals Elements

These metrics include visual load – measured by the largest contentful paint, visual stability of your web page – measured by cumulative layout, shift, and interactivity, which is done with the first input delay. 

The core web vitals cannot be seen individually, as can many other google ranking factors. Some of Google’s page experience ranking factors include things like mobile-friendliness, browsing, HTTPS, and intrusive interstitials, such as pop-ups. 

No one knows precisely how significant the impact will be, seeing as it’s still very up. Regardless, it’s probably still worth improving your core web vitals because page speed improves conversions. 

In Google’s case study, users were 24% lower to quit page load if the site means the optimal threshold for three core web vital metrics.

They noticed a 22% reduction in new site abandonment and a 24% reduction in shopping site abandonment. Now, let’s talk about the 03 major elements of Google core web vitals – 

Largest Contentful Paint (LCP)

The first metric is the largest contentful paint or LCP, which tells us about visual loading performance. 

LCP is simply the single most prominent visible element loaded in the viewport. LCP is the part of the web page that a user can see.

In our blog post, the featured image is the section of LCP on Google core web vitals.

Other typical sections might include a background image, the H1 tag, and even a paragraph. The recommended goal is to have your LCP load under 2.5 seconds to check LCP for a page. 

You can use any tools mentioned like page speed insights, the lighthouse core web vitals chrome extension, or Chrome Devtools.

According to Google, the four most common causes of poor LCP are –

  • Slow server response times 
  • Render-blocking JavaScript and CSS 
  • Slow resource load times 
  • Client-side rendering

If you’ve implemented the basic optimizations for page speed, like good hosting, the use of a CDN, and caching image optimizations, then that should improve your site’s loading performance. 

However, if you have issues with render-blocking JS or CSS, then it gets a bit more technical. To make effective optimizations, you must first understand how browsers render pages.

So let’s say a user enters the URL in their browser. The browser will then send a get request to get the contents of the request.

Then a DNS lookup happens, which maps out domain names to IP addresses of servers. Once the server IP is found, the request is sent through a connection made with the server. 

Here you can perform a few things to improve the LCP of your site –

Remove any Inappropriate Scripts from Third Parties: Our recent page speed study indicates that each third-party script slowed down a page by 34 ms.

Upgrade Your Host: Better hosting implies faster overall loading times (including LCP).

Lazy Loading Configuration: Lazy loading only makes pictures load when someone scrolls down your page. In this way, you can reach LCP much faster.

Remove Large Page Elements: PageSpeed Insights from Google will notify you if an element on your page slows the page’s LCP down.

Minify your CSS: Bulky CSS can significantly delay the LCP times. 

First Input Delay (FID)

Alright, the following metric is first input delay or FID, which measures interactivity. This metric aims to understand a user’s first impression of a site, interactivity, and responsiveness. 

It measures when a user first interacts with a page to when the browser can respond to that interaction. 

For example, if you look at the gif from requestmetrics.com, you’ll find that they’ve created what appears to be a simple script. Click the button, and it stops running the heavy JavaScript. 

First Input Delay (FID)

But the time between clicking and completing the script took over 1.4 seconds, which isn’t ideal for users. The recommended speed for FID is to stay under 100 milliseconds. 

Now, different types of interactions will include –

  • Clicking a link or button
  • Inputting text into a blank field
  • Selecting a drop-down menu

Now, the leading cause for slow FID is heavy JavaScript execution. A user is trying to interact with the website, but the browser can’t respond because the main thread is busy doing something else.

So, the four recommendations that Google provides is to –

  • Break up long tasks
  • Optimize their pages for interaction readiness
  • Use a web worker
  • Introduced JavaScript execution time

Editing JS is going to be very situational for each person’s scripts. Here are a few ways you can implement to boost the FID scores on your site –

Minimize (or delay) JavaScript: Users cannot interact with a page when the browser loads JS. To minimize or delay JS is crucial to FID on your page.

Removal of Non-critical Scripts from Third Parties: As with FCP, FID can be impacted by scripts of third parties (like Google Analytics or heatmaps, etc.).

Use a Cache Browser: It will help you load your website information more quickly. Cache allows your browser to expand even more swiftly through JS loading tasks.

Cumulative Layout Shift (CLS)

Alright, the third and final metric is cumulative layout shift or CLS, which measures visual stability. 

CLS looks at how much physical content has shifted in the viewport. It measures the distance of the affective elements for shifting. 

For example, if we visit several web pages and start scrolling down, we’ll see that ads begin to appear out of nowhere, shifting the content. It’s annoying because it is a bad user experience, which is probably why CLS exists now. 

Cumulative Layout Shift (CLS)

They used this metric to measure stability even after the page had loaded continually. But recently, Google decided to measure CLS in five-second sessions. 

And the metric they now report is the five-second time frame with the most shifting occurring. So, it’s not cumulative anymore, but I guess that’s beside the point. 

The recommended threshold by Google is to have a score of less than 0.1, and you can check these in the same tools that I’ve already discussed.

The most common causes of CLS are – 

  • Images without dimensions 
  • Ads, embeds, and iframes without dimensions 
  • Dynamically injecting content
  • Fonts or styles are applied too late in the code

Fixing any of these issues without dimensions is pretty easy for images and videos. Just add width and height attributes to your elements.

Alternatively, you can use CSS aspect ratio boxes. For ads embedded in iframes, you can create static elements to reserve space for them. 

Here are a few basic things to reduce CLS –

Use Size Property Dimensions: In this way, the browser knows just how much space this element occupies on this page. And will not update it when the page loads properly. 

So, it’s recommended to use size attribute dimensions for any media (video, photos, GIFs, computer graphing, etc.) 

Reserved the Space for Ad Elements: Otherwise, they may appear unexpectedly on the page and push content up or down to the side.

Add New UI Elements Below the Fold: This method doesn’t push content down that the user “expects” to stay where it is.

Other Elements Affecting Search Signals for Page Experience

Page experience is a blend of factors that Google believes vital for user experience:

Mobile-Friendliness – This means that the sites “shrink” to the size of a mobile phone screen.

Safe Browsing – This is about containing no viruses or malware on your site.

HTTPS – This refers to the web pages and the protocol SSL/TLS to secure the HTTP of the website. Before your website schema, you need this small emblem with a locked padlock!

No Intrusive Interstitials – This is the case with intrusion-related pop-up ads on mobile devices that obscure or cover most of the website’s content, if not the entire content.

Conclusion

In short, the experience of real-life users on every page will rank Google’s algorithm in June 2021 through core web vitals. 

Google core web vitals are several metrics used by Google to determine the real-world experience of users. Use the tools available to you to monitor the performance of your website. 

Also, make any necessary adjustments before that day to ensure that your website is prepared.

×