What Are Core Web Vitals? + How to Improve Yours

Long gone are the days of dial-up internet, when web pages were loaded line by line.

Today’s internet users expect an immediate answer. 93% of users leave a website because it didn’t load properly. Nobody wastes time on a bad experience.

To improve the online experience, Google released Core Web Vitals – a set of metrics that website owners can use to measure the speed, responsiveness, and visual stability of their pages.

The Core Web Vitals report gives you an insight into page performance so you can improve your website experience and let the Google bots know it deserves a high search ranking.

But why are speed and user experience important to your business?

• If the page load time increases from 1 second to 3 seconds, the bounce rate increases by 32%.

• If the page load time increases from 1 second to 6 seconds, the bounce rate increases by 106%. (Google)

A high bounce rate hurts your bottom line. Prospects will simply jump to a competing site if yours is loading slowly.

However, as you learn what metrics to hit and start improving your pages, Google will reward you with better rankings – and you will provide potential customers with a more enjoyable experience.

To do this, you need to understand the metrics that make up the Core Web Vitals:

• Largest Contentful Paint (LCP) measures the loading performance of a page. It takes into account the time it takes to load the largest amount of content (usually a video, image, or block of text) when a user requests the URL. Google recommends websites Keep LCP below 2.5 seconds for 75% of page loads.
• First Input Delay (FID) measures the interactivity of a page. It is the time between an action (think, click a button or link) and the time a browser responds to that action. The FID measurement takes place from each element that is clicked first and changes the page from static to interactive. Responsiveness is critical to making a great first impression on visitors by showing that your website is reliable and working smoothly. Google recommends websites Keep the FID below 100 milliseconds for 75% of page loads.
• The cumulative layout shift (CLS) measures all of the layout shifts that occur on a page. It is rated from zero (no shift) to a positive number (more shift). Common causes of shifts are drop-down banner ads, displayed buttons, or images that cause a block of text to move. All of these contribute to a negative user experience, which is why it is important to reduce the drifts on your website. Google recommends websites Aim for a CLS value of 0.1 or less.

Image source

After analyzing millions of pages, Google found that users were 24% less likely to stop loading if a website met the above requirements. For more information, see the information on Defining Thresholds for the Core Web Vitals.

How to improve key web vitals

The first thing you need is basic metrics for your site. Go through these steps to know your starting point:

1. Paste your URL into Google’s PageSpeed ​​Insights tool.
2. Click on “Analyze”.
3. Check your performance. The labels “Bad,” “Needs Improvement,” and “Good” are assigned to your URL on both mobile and desktop devices. Switch between the two in the upper left corner of the page.

This is what it looks like when I did an analysis on HubSpot.

Image source

You can see that the desktop version performs better than the usual one for mobile devices. In a study of five million pages, Backlinko found that an average webpage on mobile devices takes 87.84% longer to load compared to desktops. Some important factors that influenced the speed: the type of CMS, CDNs and hosting, and the page weight.

If your URL doesn’t have enough data for a particular Core Web Vitals metric, that metric won’t appear in the report. Once your URL has enough data, your page status will reflect the metric that is doing the worst.

Resolving issues in Core Web Vitals

It will take some work to improve the performance of your pages, but you can start addressing problems one by one.

1. Prioritize problems by label: First, tackle anything that is labeled “Bad”. Then choose your work based on the major issues affecting the highest number of URLs or the top URLs. Next up are problems with the “Needs Improvement” label.
2. Make a list: Create a prioritized work list for the team updating the site. Add these general page fixes for reference:

• Reduce the page size to less than 500 KB.
• Limit each page to 50 resources for optimal mobile performance.
• Optimize your page for fast loading with AMP.

3. Share common corrections: Each Core Web Vitals metric offers a dozen ways to improve the threshold. Below I’ve outlined the basic reasons for a “bad” status and how to fix them.

Improvement of the LCP is affected by slow server response times, client-side rendering, render-blocking JavaScript and CSS, and slow resource load times. You can improve the LCD by tweaking any of the following site elements:

Improve FID The point here is to measure how quickly your website responds to user actions. This is where you want to fix all of the bad first experiences people have had on a site. To see how to improve your FID threshold and see how users are interacting with your website, you can run a performance check using Chrome’s Lighthouse tool. You can also try the following tweaks to increase your score.

To improve CLS and reduce unexpected shifts, there are some best practices that need to be followed. Say goodbye to nervous banners and those accidental ad clicks.

• Include size attributes or CSS aspect ratio fields for pictures and videos. These numbers tell the browser how much space to allocate to the page element when it loads, preventing it from shifting when elements become visible.
• Do not add content on top of existing content. The only exception is when it is a user action that is expected to be moved.
• Specify the context for transitions. All animations and transitions within a layout must have context and continuity as you move users from one part of the page to another.

When you think a specific issue has been resolved, you can check the Search Console Core Web Vitals report to see if your thresholds have improved. Click Start Tracking to start a 28-day validation session that will monitor your site for signs of the problem. If it does not appear during this time, consider it resolved.

Like all ranking factors, the devil is in the detail. As a developer or technician, if you need more information on optimizing Core Web Vitals, check out Google’s guides on how to optimize LCP, FID or CSL.

Timeline for the ranking of the most important web vitals

Core Web Vitals will be included in the Google search ranking from May 2021. They originally announced plans for the May 2020 update, but postponed the release due to the global impact of COVID-19.

And Dave Brong, CTO of WebMechanix, said: “Core Web Vitals is the ‘Web 3.0’ that our generation of SEO and web development professionals are facing.”

“By shifting the focus from weak metrics to the server level and more to user experience (UX), Google is paving the way for a more accessible web in the future.”

When preparing your website for the Core Web Vitals, keep in mind that these are only part of Google’s existing search signals. Search also takes into account mobile usability, HTTPS security, safe browsing, and intrusive interstitial guidelines.

Part of the Core Web Vitals will include several changes that are important for website owners:

“The change that non-AMP content can be displayed in the” Mobile Top Stories “function in search will also be introduced in May 2021. Any page that complies with the Google News content guidelines is eligible and we prioritize pages with excellent page experience, whether implemented with AMP or another web technology, how we evaluate the results. “(Google)

Deciding to improve your website’s Core Web Vitals doesn’t seem like an easy task. However, by prioritizing the most problematic pages and coordinating with your web team, you can work towards a “good” label and provide a great experience to everyone who visits your website.