Core Web Vitals are the essential metrics that all website owners must optimize to deliver a superb user experience, improve SEO, and reap many benefits.
It focuses on optimizing your site’s loading speed, responsiveness, and stability of all the visuals so that users can view content faster and interact with your site effortlessly.
They need faster, responsive sites to easily interact with and complete desired actions, like ordering food online. The reason is users today hate slow websites that consume a lot of time and lead to frustration.
This is where Core Web Vitals shine!
In this article, I’ll shed more light on Core Web Vitals and how you can improve your site’s Core Web Vitals.
Let’s begin the ride!
What Do You Mean by Core Web Vitals?
Google’s Core Web Vitals are the three essential metrics associated with the page loading speed, interactivity, and visual stability that measure user experience on a website.
These metrics were included by Google as a search engine ranking factor in its algorithm in 2021. Your website gets either a “good” or “bad” score on these metrics, signifying whether your site is optimized for the three vitals or needs improvements.
Core Web Vitals come under Web Vitals applicable to all websites and webpages that site owners must measure and improve.
So, the three metrics of Core Web Vitals are:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Core Web Vitals in Detail
#1. LCP – Largest Contentful Paint (Loading)
Large Contentful Paint (LCP) signifies the page loading speed of a website to ensure the visitors can quickly access your site, which is a significant factor in enhancing the user experience.
And to ensure that, your LCP must be within 2.5 seconds. It implies the time your site takes when the user clicks on the link to view the content on their screen.
- If it’s between 2.5 and 4 seconds, your site needs improvements in page loading.
- Also, if it’s greater than 4 seconds, the page loading speed is poor, and you must quickly work on it.
LCP focuses more on the real-time user experience in terms of page loading speed – allowing the users to see the content on the page and interact with it. It’s different from First Contextual Paint, TTFB, and other page speed measurements.
For example, if your web page has a larger image and simple text, the larger image will be the LCP. It’s because it’s the largest element to load in your browser and makes a significant impression. So, optimizing the image to load faster will help the web page load faster, thus catering to an enhanced user experience.
In other words, LCP is the time the most significant element or piece of content takes to load on the user’s screen. The element can be images, videos, text, or other content types.
#2. FID – First Input Delay (Interactivity)
First Input Delay (FID) measures the responsiveness or interactivity of users with your website. FID is the time the web browser takes to respond when the user first interacts with the web page.
This implies that if the browser responds to the interaction faster, the web page will be more responsive and display the requested content.
To ensure a good site experience for users, maintain your FID within 100 milliseconds (ms).
- If the FID falls between 100 ms and 300 ms, your site needs improvements in terms of responsiveness.
- But if it’s over 300 ms, your site’s responsiveness is poor, and you must immediately fix it to provide a great user experience.
Sometimes delays happen if your browser performs other tasks in the background. Even when it has rendered the page well and the content is visible, when you click on a button, possibly nothing will happen. It means the web page simply doesn’t respond to your interaction; even if it does, it’s sluggish. This can frustrate a user, resulting in a bad experience.
The reason is that the browser is responsible for many tasks and can’t do everything at once, or it may malfunction. Since the websites are becoming more complex, the browser is left with heavier tasks. Hence, optimizing FID has become necessary to make your web page more interactive or responsive to the user’s requests.
#3. CLS – Cumulative Layout Shift (Visual Stability)
Cumulative Layout Shift (CLS) measures the visual stability of a site. It defines how stable the page elements load on the users’ screen and how much it fluctuates.
If the site is not stable, it leads to a bad user experience. For example, a user wants to click on a button displaying on the web page while it’s still loading. When they are about to click on it, the page completes loading, and the button shifts a bit. As a result, the user may end up clicking on something else or nowhere, which increases frustration.
These irregularities and shifts can happen for many reasons, like ads, heavy stuff on the site, etc.
Therefore, optimizing your site’s CLS is essential to keep it running stable at all times, ensuring the layout, designs, and buttons behave as expected.
To ensure a good user experience, the CLS must be under 0.1.
- You must improve your site’s visual stability if the CLS is between 0.1 and 0.25.
- And if it’s more than 0.25, the visual stability is poor and needs quick fixing if you want to provide a better user experience.
To achieve your target for most users, measure each of the metrics of Core Web Vitals at the 75th percentile.
How Important Are Core Web Vitals for SEO?
Google has taken page experience as an essential and official ranking factor as of 2021 for all the sites appearing on its search results.
Now, page experience depends upon many factors. Some of the important metrics are:
- Loading speed
- Visual stability
- Responsiveness
- Mobile-friendliness
- HTTPS
- Safe browsing
Among them, the first three – loading speed, responsiveness, and visual stability – are the Core Web Vitals that every site owner must optimize for securing a good ranking on Google. They have the power to make or break the deal.
So, when you optimize for LCP, FID, and CLS, you enhance your SEO score and user experience, which will help you grow your website. Here are the benefits that you can expect out of it:
Faster loading: People love faster sites that can load in a jiffy. It not only saves their time but also supplies them with information that they are looking for without keeping them waiting. It increases their user experience, and your appearance on search engines improves. Optimizing your LCP can help you achieve this.
Responsiveness: It’s useless if your site loads but does not respond well to users’ requests. But if you improve your site’s FID, you can improve its responsiveness that everyone likes. As a result, more and more people will come and regularly interact with your site to read articles, make purchases, seek information, etc. All this increases your SEO and presence, attracts more visitors, and encourages them to keep coming back.
Performing layouts and elements: No matter how well you have designed your elements like buttons, backgrounds, layouts, etc., they are likely to malfunction during site loading if you don’t optimize them, leading to a bad experience. But optimizing your site’s visual stability would enable each element to perform wonderfully and help users interact with visuals better.
How to Improve Core Web Vitals?
Now that we have discussed improving the core web vitals to provide an excellent user experience, let’s understand how to do that.
#1. How to Improve LCP
Ideally, your site’s Large Contentful Paint (LCP) must be within 2.5 seconds for a minimum of 75% of total page visits.
Many factors affect the browser’s ability to load and render a web page. Any delays or blockage in any of these factors can impact LCP. LCP is the web vital for which most websites need optimization.
LCP measures how fast the main content of a web page loads. So, this metric affects main images, multiple fonts, videos, lazy loading content, background images, etc.
So, to improve your LCP, you will have to streamline the complete loading process and optimize it. Since it can be a bit complex, breaking down the task makes it more accessible.
- Compress file sizes: If you can compress or remove any file’s size, it will help accelerate your page loading speed. You may want to check any code or file not in use and get rid of it. And if you want to compress file size, it’s easier for each file type, whether it’s HTML, CSS, JavaScript, or images.
2. Bring content closer to users: If there’s a high distance between the users and the server where your site’s content is stored, it will take time to load, which we aim to reduce here. Therefore, choose a data center to host your site’s content where your audience is geographically located.
You can also use a CDN unless your audience is from a smaller geographical area. A CDN will help you distribute your content faster no matter the size and offer a better user experience since users can access the content faster whenever and wherever they want.
If possible, use the same server to avoid additional delays while establishing secure connectivity between the server and the user for each connection. You can also use a DNS prefetch or pre-connect to start connections early.
3. Cache resources: Caching resources will help download the resources for the first web page view without necessarily downloading for the subsequent views. Since the resources will be already available, other pages will load faster.
4. Reduce TTFB: Deliver your initial HTML quickly because it directly impacts the next steps. Therefore, reduce your time to the first byte (TTFB) to help improve other page loading metrics.
5. Prioritize resources: Prioritize how the resources on your site are loaded in the rendering path. Ensure they are arranged in their downloading and processing order. You can start by loading the essential resources you want your users to view and then do the rest.
For example, you can first load your main page and critical font stylesheets. You can inline or reduce render-blocking stylesheets and load the critical HTML, JavaScript, and CSS first, then load the rest.
#2. How to Improve FID
LCP and First Contentful Paint (FCP) measure the time taken to load on a web page. However, these metrics don’t measure how responsive the page is to the user’s requests.
So, everything goes in vain even if your site is loaded and the user can’t perform the desired action.
This is where First Input Delay (FID) helps capture the site’s responsiveness or interactivity to the user’s request.
FID measures the time between the user’s first interaction and when the site responds to that interaction, like clicking a button and going to that page. This metric affects third-party code, JavaScript, tracking scripts, etc. The ideal FID is under 100 ms, and the ways to improve FID are:
- Reduce the volume of JavaScript running: If you are using a JavaScript framework, it needs a lot of JavaScript for loading the page, which can consume some time to process in your browser. This is how delays can occur. So, if you use SSR or prerendering, you can transfer this burden to the server and not on your browser.
- Break up your JavaScript: Breaking up your JavaScript into smaller pieces can help you make it run faster. So, find the longer tasks delaying response to the users’ requests and divide them into smaller tasks consuming less time. You can do this with the help of code splitting.
- Moving some JavaScript: Moving some of your JavaScript to another service worker. It makes your code less complex and runs faster in the browser.
Furthermore, you must take care of one more thing. Since the service worker cannot access the Document Object Model (DOM), it cannot make any changes or updates. So, if you want to move your JavaScript to another service worker, ensure a knowledgeable developer can take care of this.
#3. How to Improve CLS
CLS measures how stable your site elements like layouts, buttons, etc., are. It detects how much your visible content shifts in your site’s viewport depending on the content size and distance. It affects image sizes and dimensions, multiple fonts, animations, menus, popups, etc.
Layout shifts could distract users. It makes it challenging for the users to focus on the content they are viewing, such as reading an article or browsing some pictures. It’s hugely annoying, and no one will like to stick around on such a page.
Therefore, you must optimize your site for CLS. Here’s how to do that.
- Optimize images: Allocate the space for images so that they can fill up their space optimally and avoid any shift. For this, you will want to define the width and height of your images within the tag –
.
- Injected content: A layout shift can happen if you dynamically insert a piece of content above your existing content. So, if you plan for it, allocate sufficient space beforehand.
- Fonts: Ensure that one font doesn’t swap with another for the fonts appearing on your site. It must also load on the screen quickly. It’s necessary because if a font is changed, a noticeable shift can happen, such as Flash of Unstyled Text (FOUT) or a Flash of Invisible Text (FOIT). It impacts user experience. Here, using a system font can help. So, when you have nothing to load, there will be no changes or delays to cause any shift.
How to Assess Core Web Vitals for Your Website?
You can use any tool you want to check your site’s Core Web Vitals, such as:
- PageSpeed Insights
- Google Search Console
- Lighthouse
- Chrome extension- Web Vitals
- Chrome DevTools
- CrUX Dashboard Creator
- Third-part plugins like NitroPack, WP Rocket, etc.
Once you use a tool, you can gather the status of your Core Web Vitals. You can view metrics – LCP, FID, CLS, FCP, total blocking time, time to interactive, and speed index.
- First Contentful Paint (FCP): It measures the time taken by the browser of a user to render the site’s DOM elements like SVGs, images, etc. It also determines render-blocking resources. 0-2 seconds is considered a fast FCP, 2-4 seconds moderate, and 4 seconds is considered slow.
- Speed Index: It shows the average time a site’s content takes to display to a user. It determines the volume of excessive JavaScript on your site. 0-4.3 seconds is considered fast, 4.4-5.8 seconds as moderate, while 5.8 seconds is considered slow.
- Time to Interactive (TTI): The time is taken for the content to become fully interactive and functional. It determines web pages with extra JavaScript. 0-3.8 seconds is considered fast, 3.9-7.3 seconds moderate, and 7.3 seconds slow.
- Total blocking time (TBT): It helps you check the time taken by the web page to respond to user input. 0-300 ms is considered fast, 300-600 ms is moderate, and 600 is slow.
The tool will display the performance score of your site’s Core Web Vitals. You can also see the individual scores for each of the above metrics and explain where you are lacking and how to improve your score.
Since providing a great user experience is a continuous journey, always keep an eye on your Core Web Vitals and optimize them regularly.
Conclusion
Providing an excellent user experience is necessary for all websites to thrive on the internet; even Google has recognized this. This is why they introduced Core Web Vitals last year to help deliver a quality user experience. You can use any tool mentioned above to check your site’s Core Web Vitals and find ways to improve them with the tips mentioned above and tricks.
