Google introduced the newest ranking factor called Core Web Vitals on 28th May 2020. The update has begun rolling out in mid-June 2021 and has taken a toll on many website search positions. Core Web Vitals are Google’s way of quantifying the user experience and saving the internet from sending misleading data to its users that might not provide them with a really soothing experience.

If you are active on the Google search console, you must have seen the Core Web Vitals dashboard or must have heard about this ranking factor update coming this year. But do you know what actually are Core Web Vitals and how they can impact your search rankings?

In order to get you started, we at WP2Faster has pulled out some important questions that will answer all your question regarding this Core Web Vitals update of Google.

1. What are Core Web Vitals?
2. What is LCP?
3. What does LCP measure?
4. What is FID?
5. What does FID measure?
6. What is CLS?
7. What does CLS measure?
8. Other Web Vitals
9. How to calculate the Core Web Vitals score of your website?
10. How to improve your website’s Core Web Vitals?
11. How to improve LCP?
12. How to improve FID?
13. How to improve CLS?
14. Why are Core Web Vitals Important?
15. What will happen if you ignore Core Web Vitals for your website?
16. Conclusion

What are Core Web Vitals?

Let us begin with the basics. Google is the most used search engine that works to display the best possible results for the search queries. Earlier, the approach of Google’s AI was semantic that focused on high-quality content that matched the search intent. It also checked for mobile friendliness, safe browsing, and other basic criteria.

But with the introduction of Core Web Vitals, Google has set its level high, and it has brought three vital core web vitals that will affect the web page ranking to improve the overall user experience.

Core Web Vitals is a set of Google metrics that help developers understand how users experience a web page. Basically, Google has put forward the essentials that will determine the search ranking.

These metrics include:

• Largest Contentful Paint (LCP): It determines the speed at which the page content loads
• First Input Delay (FID): The speed at which the browser can load a webpage and respond to a user’s input
• Cumulative Layout Shift (CLS): The stability of the content as it loads in the browser

These three metrics run along with Mobile responsiveness, Safe Browsing (HTTPS), and Intrusive Interstitials into the “Page Experience Signal” into the Google signal.

What is LCP (Largest Contentful Paint)?

The first metric of Core Web Vitals is LCP or largest Contentful Paint. It denotes the average loading time of the main content found on a web page.

The main content includes both media and text. Google will now use LCP to determine the loading speed of the first meaningful piece of content (or the LCP). It’s much more than how fast your page loads. LCP is an indicator to show how long does the main visible content takes to appear. 

What does LCP measure?

LCP measures the time taken by the different content blocks to load within the user viewport (current screen). This metric lets you know how quickly content sections displays on the visible screen. The time is determined when all the given factors are considered.

• Images
• Video poster images
• Background images
• Block-level text

Note: According to Google, you should aim to get LCP load within the first 2.5 seconds of the page click. The time-lapse under 4 seconds needs improvement, and you can consider the time duration over that as poorly performing. 

What is FID (First Input Delay)?

Online consumers want pages that are active and easy to engage with. It is what Google kept in mind while framing this metric. FID is a metric that executes when the user gives his first command to the given web page. 

Nowadays, websites use various latest technologies and dynamic content widgets to display content to their audience. First inputs thus include clicking links, buttons, or even pressing keys. While this type of content can enhance content delivery, these enhancements can cause time delays that ask users to wait for their browser to act on their input which provides the users with a bad user experience.

What does FID measure?

FID measures the responsiveness of a web page while loading the element inputs from a user. It means that FID records only the events like clicks and a keypress.

You should note that FID is hard to scale because this data can only be measured in the field. It means your score will depend on variables that are not in your control, like the device capacity of users and Internet speeds experienced by your visitors.

Note: Google’s new vital metrics ask for an FID of less than 100ms to look responsive. The load duration between 100ms and 300ms requires improvement, and you can view anything above the time limit of 300ms is termed as poorly performing.

What is CLS (Cumulative Layout Shift)?

 Cumulative Layout Shift (CLS) is a metric that measures your web page stability while it loads. If elements on your website move around as the page loads, then you’ve got a high CLS which causes a bad impact on your Google rankings.

UX and design are essential components for a great user experience, and if the elements on the web page shift while a user is reading, he will become frustrated. Thus, CLS helps the website developers check and rectify if images or links move on the page so the website owners can improve usability, drive click-through rates, and improve online sales.

What does CLS measure?

CLS is a metric that checks whether the elements in the visible viewport move from their fixed position between two rendered frames while the page is loading. In easy words, it helps website developers learn if content like text, buttons, and banners moves around while your audience is reading content on that particular web page.

While the elements change, their position makes the users confused and restricts their user experience on a page. So it’s essential to ensure that the content must stay fixed in its place after the page loads on the user’s device. CLS looks at core metrics to check the visual stability of a page from a user perspective. Some of the main factors include:

• Layout shift
• Impact fraction
• Distance fraction

Note: Google terms anything below 0.1 good, whereas anything from 0.1 to 0.25 requires improvement. You can think of everything above 0.25 as poor. 

Other Web Vitals

After completing the discussion on Core Web Vitals, we will further discuss other important web vitals that you must check to improve your website’s user experience. 

Though these metrics are not considered a part of the user experience metrics directly, if ignored can impact your website score adversely. 

So let’s take a quick look at a few other metrics you must acknowledge to understand the experience visitors have on your website.

• First Contentful Paint: First Contentful Paint (FCP) measures the time duration it takes for a user’s browser to render colorful elements (images, non-white elements, and SVGs). This metric classifies render-blocking resources and is measured in seconds, with a given scale of FCP scores:
• 0–2 seconds: Green (fast), good time range
• 2–4 seconds: Orange (moderate), needs improvement
• 4+ seconds: Red (slow), poorly performing
• Speed Index: Modern websites offer you smooth online experiences, and the Speed Index (SI) tells you the average time that content on your website takes to become visible for a user. This metric will distinguish excessive JavaScript on a web page. The SI is measured in milliseconds, with a scale of SI scores:
• 0–4.3 seconds: Green (fast), good time range
• 4.4–5.8 seconds: Orange (moderate), needs improvement
• 5.8+ seconds: Red (slow), poorly performing
• Time to Interactive: Time to Interactive (TTI) is the total time duration taken for the content on a web page to become completely functional or fully interactive. TTI assists you in recognizing pages with unnecessary JavaScript. TTI is measured in seconds, with a scale of TTI amounts:
• 0–3.8 seconds: Green (fast), good time range
• 3.9–7.3 seconds: Orange (moderate) needs improvement
• 7.3+ seconds: Red (slow), poorly performing
• Total Blocking Time: Total Blocking Time (TBT) assists website developers in monitoring how long does a web page take to respond to particular user input. This metric will recognize pages with unnecessary JavaScript, and TBT is estimated in milliseconds with a scale of TBT counts:
• 0–300 ms: Green (fast), good time range
• 300–600 ms: Orange (moderate), needs improvement
• 600+ ms: Red (slow), poorly performing
• Page Performance Scores: A Page Performance Score is a single metric that analyzes all of Core Web Vitals’ important user experience metrics. This score applies an aggregate scoring system over all mobile and desktop visits. It takes the weighted average to produce a particular score to distinguish the pages that need a quick closer examination.

While these metrics are analyzed in the Page Performance Score metric, developers can have reference scores in every category based on the precise number:

• 90: Green (good),
• 50–90: Orange (needs improvement),
• Below 50: Red (poor).

How to calculate the Core Web Vitals score of your website?

There are a variety of tools to help you monitor Web Vitals and improve your site’s performance. We have mentioned some of the most important core web vitals measuring tools that can help you improve your website health.

• PageSpeed Insights: PageSpeed Insights is an important full-service mapping tool with both field and lab data. It becomes more reliable because you get advice on what to fix.
• Lighthouse: Lighthouse is a tool developed by Google to audit PWAs, but now it has become a great tool to check the website’s performance. It does several reviews about what PageSpeed Insights doesn’t have. It even runs some SEO tests.
• Search Console Core Web Vitals report: You can now get insights for your website directly from Search Console! It helps you analyze how your website is performing on the given metrics of Google.
• Chrome developer tools: There are several tools in the chrome web browser, a Core Web Vitals summary (from Chrome 88) and a Core Web Vitals report (from Chrome 90), with more on the way, are major web vital tools.
• CrUX Dashboard Creator from Github
• Experte Core Web Vitals Check

How to improve your website’s Core Web Vitals?

Now that you’ve got a complete knowledge of Core Web Vitals and, hopefully, have analyzed your website’s overall score, you’ll want to know the means by which you can improve it.

At this stage, you need to start discussing the possibilities with your website developer, as you may require technical assistance to achieve solutions to the significant problems.

Yet, we have drawn an outline for you to distinguish the problems your website is facing and how to improve those from your web developer.

How to improve LCP?

LCP is one of the major Core Web Vital metrics, and you need to ensure that the time cunt for ICP is good. For improving LCP, the website developer must check that all pictures are compressed and are placed in next-generation format, which means that the image files are 100 KB or less in size and do not require a lot of effort to load fully. Cropping images and resizing them can also help to get solutions to solve issues with LCP. It ensures that photos are loading as large or small as desired.

Here are some of the primary actions you can do to improve your website’s LCP:

• Remove any unnecessary third-party scripts: We have recently studied page speed and found that each third-party script reduced a page speed down by 34 ms.
• Update your web hosting: Better hosting is equal to overall faster load time (including LCP).
• Set up lazy loading technique: Lazy loading makes the images load only when someone scrolls down your web page. It means that you can accomplish LCP comparatively faster.
• Eliminate big page elements: Google PageSpeed Insights will notify you if your web page has a component that’s reducing your page’s LCP.

How to improve FID?

To correct the second important core web vital metric is to improve the FID score. Try executing smaller JavaScript payloads that enable the browsers to perform too many large tasks simultaneously. Eliminating redundant JavaScript and CSS, often carried forward from the theme applied to develop the site or from third-party widgets or plugins that remain unused, helps improve FID. Additionally, reducing render-blocking JavaScript can help you to solve FID issues.

Here are some vital factors you can work upon to improve your website’s FID numbers.

• Reduce (or suspend) JavaScript: It’s complicated for users to associate with a page while the browser is piling up JS. So decreasing or balancing JS on your page is the key to getting a good FID time score.
• Eliminate any non-critical third-party scripts: Just like to improve FCP, you need to reduce third-party scripts (like Google Analytics, heatmaps, etc.). Similarly, third-party scripts can negatively impact FID, so you need to reduce them for a better FID score.
• Apply a browser cache: This supports loading content on your page quicker, which improves your user’s browser experience through JS loading even faster.

How to improve CLS?

Yet another essential core web vital metric is CLS. Cropping images correctly and determining their sizes helps to uphold CLS. When the dimensions of photos are unclear, the browser loading them is doubtful about the size they should be. So they might be presented considerably larger or smaller than proposed and could be loading quicker than the above-presented content. Ignore any events of CLS by assuring that no content loads above previously loaded content except required by the user.

Here are some easy points mentioned that you can do to reduce CLS load time.

• Apply fixed size dimensions for any media (videos, pictures, GIFs, infographics, etc.): Following this way helps the user’s browser know precisely how much space that component will take up on that page. And won’t modify it on the go in between the page completely loads.
• Make sure ads components have a saved space: Failing to do so might cause the element to suddenly appear on the page, shifting content down, up, or to any of the sides.
• Add new UI ingredients below the fold: In that case, they don’t shift the content down from the place the user “presumes” it to stay.