What is Core Web Vitals?  How to optimize them better?

What is Core Web Vitals? How to optimize them better?

[ad_1]

If you are entering Google Search Console and see the left side appear Core Web Vitals

Next is a series of warning charts on Mobile and Desktop.

Are you suddenly surprised that Core Web Vital has any impact on the website?

Then in this article, the Hawk will explain what Core Web Vitals is and how to fix this error.

What is Core Web Vitals?

Core Web Vitals are a set of specific factors put forth by Google to evaluate the overall user experience on a website.

There are three calculations that measure the speed at which a user interacts with a page: largest contentful paint, first input delay, and cumulative layout shift.

In short Core Web Vitals is a subset of the factors included in the Google Page Experience score. This will be GG’s way of determining the user’s experience on the website.

CORE-WEB-VITAL

You can find information about Core Web Vital on Google Search Console under Experience.

Right to the right you will see a table showing the percentage of URLs you score well.

page-experience

Also below are the number of URLs that have not met and other criteria.

page-experience-signals

Why is Core Web Vital important?

Google has planned to turn page experience become official ranking factor from last year.

introduce-core-web-vital

Up to now, it has come true and can be seen right on GG Search Console.

Page experience or page experience will be a set of factors that Google evaluates as important to user experience, including:

  • HTTPS – SSL required
  • Mobile-friendly – ​​friendly with mobile devices.
  • Lack of interstitial pop ups – fewer pop ups.
  • “Safe-browsing” – no malicious code on the site.

Based on the above factors, it can be seen that Core Web Vitals are very important in Page Experience.

But that doesn’t mean you will be on Top 1 GG with 100% good page experience.

Google says that it is one of the (about 200) factors they rank websites on search engines.

introduce-core-web-vital1

GG also announced that in 2021 this update will be officially applied.

If you still don’t know what it is or don’t care, now is the time to change it immediately.

In this article, I will analyze 3 Core Web Vitals factors and how to optimize them.

Largest Contentful Paint (LCP)

LCP is the time it takes to load a page from the perspective of an actual user.

In other words: it’s the time from when a user clicks a link to view the majority of the content on the screen.

LCP is completely different from other page speed measurements, many other page speed metrics (like TTBF and First Contextual Paint) are not really representative of how a user opens a web page.

On the other hand, LCP focuses on what really matters when it comes to page speed: (user’s ability to view and interact with the page).

You can check your LCP score with Google PageSpeed ​​Insights.

Google-PageSpeed-Insight

The blue part means pass, yellow and red are the points that need improvement.

The nice thing about using Google Pagespeed Insights is that you can see how your page performs in the real world (based on data from Chrome).

Details of which pages need improvement can be found on Google Search Console.

core-web-vitals-mobile-details

Just like Google PageSpeed ​​Insights, the data in Search Console comes from the Chrome User Experience Report.

But unlike PageSpeed ​​Insights, you can view LCP data across your entire site.

So instead of analyzing each page at random, you get a list of URLs that are good, bad… or in need of improvement.

Regarding this criterion, Google has LCP . principle Specifically. They divided LCP speeds into three groups: Good, Needs Improvement, and Poor.

  • Blue 2s go down
  • Yellow4s go down
  • Red6s

In short, if you want to be all green, every page on your site must have an LCP of less than 2.5 .

This can be a real challenge for large sites, or sites with lots of features.

For example, the Hawk has a lot of images and infographics, so it’s not easy to get below 2.5.

LCP-issue

Even so, we can still improve LCP in a few ways below:

  • Remove unnecessary third-party scripts: 3rd party scripts are what slow down the website quite a lot, so it is best to delete the scripts that are not really needed.

remove-javascript

  • Enable lazy loading: Lazy loading will help images load only when scrolled, which means LCP will be significantly faster.
  • Remove large elements on the page: Google PageSpeed ​​Insights will warn you which element is slowing down your website.

LCP-GG-pagespeed-insight

  • Remove unnecessary CSS: Too many effects can affect the speed -> Instructions to remove Unused CSS.
  • Upgrade hosting package: Finally, if you’ve done everything, upgrading your hosting should be something you should consider.

First Input Delay (FID)

Next, to the second element on Core Web Vital First Input Delay.

This metric measures the actual time users spend on your page.

Some examples of user interactions:

  • Click and choose from the menu.
  • Click a link in any on the web.
  • Enter your email in the field or registration form.
  • Open an “accordion” text on a mobile device

Google considers FID important because it takes into account how actual users interact with web pages.

And like FCP, they have specific criteria for judging what is good, acceptable, and bad.

  • Blue 100ms go down
  • Yellow300ms go down
  • Red500s

If it’s technically lightning, FID measures how long an event takes to happen on the page.

So in that sense it’s a page speed score but it’s more accurate and realistic.

For a site with 100% of the content is plain text like personal blogs, news sites, electronic newspapers.

This FID score is probably not that important because the most used operation is just “scroll” (scroll).

For example, in the Google Search Console of the Hawk, there is also no report of any FID.

core-web-vitals-mobile-details

This is also very understandable because Hawk is just a basic blog and news site, there is not too much for users to interact with.

But there are still some things that you can improve the FID like:

  • Minify (or delay) JavaScript: It is nearly impossible for the user to interact with a page while the browser is loading JS. So minimizing or delaying the JS on the page is key for FID.
  • Remove unimportant third-party javascript: As with FCP, third-party scripts (like Google Analytics, heatmap, etc.) can negatively impact FID.
  • Use browser cache: This helps to load the content on your page faster.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift is how stable a page is under load (aka “image stability”).

In simpler words: if the elements on your page change continuously while the page is loading -> will result in high CLS.

Cumulative layout change example

Therefore, you should limit the page layout to change continuously while the website is loading.

That way the user doesn’t have to re-learn where the links, images, and fields are when the page is fully loaded. Or click on something by mistake.

Here are the specific criteria that Google offers for CLS.

  • Blue 0.1 go down
  • Yellow0.25 go down
  • Red0.3

There are several steps you can take to reduce CLS.

  • Use size attribute dimensions for media files (videos, images, GIFs, infographics, etc.): That way, the user’s browser knows exactly how much space the element will take up on that page. And won’t change it immediately when the page loads completely.
  • Make sure ad elements have enough space: Otherwise, they can suddenly appear on the page, pushing the content down, up, or to the side.
  • Put elements below the fold: If you have an element that changes constantly or keeps it below the fold, they don’t push the content down that the user “expects” to stay where it is.

Summary

Each website will have a different UX and UI, so there are no specific instructions on Core Web Vitals for you.

Be patient and apply the above steps slowly to find the right method.

You can learn more about Basic of UX this is the material provided from Google (very suitable for learning and studying).

In addition, you can also refer to how to speed up WordPress, to improve user experience.

If you have any comments or suggestions, please comment below to discuss.

[ad_2]

Click to rate this post!
[Total: 0 Average: 0]
23
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x