Table of Content
In the previous part of interpreting Google’s Web Vitals, we discussed the Core Web Vitals and their benefits in enhancing the user experience for a website.
Key Takeaways:
- Advanced Web Vitals metricsprovidedeeper insights into user experience beyond the core three indicators.
- Metrics such as INP and TTFB reveal server and interaction bottlenecks that affect responsiveness.
- Proper resource management, such as reducing script overhead,improves bothperformance and stability.
- Continuous monitoring ensures that Web Vitals do not degrade as new features and content are added.
- Enhanced Web Vital performance correlates with higher conversion and engagement rates.
With such increasing competition on the internet, even the small things in the user experience design can greatly affect the visitors.
As you already know that Google Web Vitals help you to track, monitor, and gain insights related to the user experience of your site’s design, it is recommended that you use these tools to your advantage.
In this article, I am going to show you how to use Google’s Web Vitals to gain all the necessary insights related to your site’s user experience.
Why is User Experience(UX) Important?
User Experience or UX as they call it in technical terms relates to how well of an experience your site provides to a visitor when they access your site. This includes how fast your site loads, how easy it is to navigate through your site, etc.
Sites focus on the user experience as it determines whether a visitor will stay or come back to your site or not.
For example, let’s say you visit a new eCommerce site, you always notice how fast it loads, how easy it is to find a product, how easy the checkout process is, etc.
If a site satisfies all of your above queries nicely, you will most likely visit that site again. This is mostly because of a pleasant user experience.
Bad user experience can be very bad for your site as data suggests that 88% of the visitors never return to a site after a bad user experience.
Ultimately, user experience carries a lot of importance especially if you are an eCommerce business as it is a very competitive sector.
Although user experience carries so much importance yet it is quite surprising to see that a lot of businesses never conduct any test related to user experience report for their website.
Stats indicate that only 55% of the companies conduct user experience testing for their websites.
Over the past few years, Google’s Web Vitals have helped a lot in monitoring the user experience for websites. It is time that you too use these tools to your advantage.
Google’s Core Web Vitals
As of now, there are three Core Web Vitals offered by Google. These will increase in the future as there will be more resources to measure other matrices as well.
Let’s understand the role of the three Core Web Vitals one-by-one:
LCP
One of the key factors that play an important role in the user experience for your site is the loading time. Pretty much everyone has a good internet connection these days and people want sites to load faster.
So much so that 39% of the visitors will stop interacting with your site if it takes too long to load the images or content.
Well, this is where LCP comes into play. LCP or Largest Contentful Paint measures the loading performance of your website. In technicality, it measures the time your site takes to load the largest element on a web page.
LCP is only concerned with the largest block in the viewport. This could be anything from an image to a video or a text block on a web page. eCommerce sites need to have a good LCP score as they have many images and dynamic elements to display on the screen.
Ideally, LCP should occur within 2.5 seconds when a web page starts loading. If LCP occurs after 4 seconds then it is a poor sign and it implies that you need to work on the loading time of your site.
FID
The second one is FID or First Input Delay and it is concerned with the interactivity of your website.
FID measures the input delay between the user’s first interaction with the web page and the browser’s response. Now this interaction could be anything like a user clicking on a link and then the browser’s response to it.
Let’s say that you are reading an affiliate list on a blog and you find a product interesting. You click on the ‘Buy Now’ button and it redirects you to Amazon or any other platform. So the time it takes for the browser from your click on buy now to redirecting you can be called FID.
FID of 100 milliseconds or less is a good spot for any site. FID exceeding 300 milliseconds is considered poor.
CLS
CLS or Cumulative Layout Shift is related to the visual stability of a website. You might have noticed the frames changing on your smartphone when you scroll down on a website. The more smooth and stable these frame transitions are, the better it is for visual stability.
A CLS score of 0.1 or less is good for any web page. If the CLS score is more than 0.25 then it is a poor indicator.
How to Measure Core Web Vitals?
Google has made it very easy for everyone to measure the Core Web Vitals for their site. It doesn’t matter if you are a developer or an owner. You can easily measure Google’s Web Vitals by several methods.
Pro Tip:
Use synthetic and real-user monitoring together to build a complete view of performance issues.
Method 1: Using the Measure Website
This method is the simplest way to use Google’s Web Vitals.
- All you have to do is just go to https://pagespeed.web.dev/ and then enter the URL for your site.
- For example, I just entered the URL of Beebom to measure some of the user experience parameters.
- Then you have to click on ‘RUN AUDIT’
- Wait for a while till the process completes and you will have all the important data related to the user experience for your website.
As you can see from the image, it provides all the necessary data needed to analyze the user experience for your site. Additionally, you can also click on ‘View Report’ to get the latest Lighthouse report.
The report will give you more insights and ideas for improvement in every area that requires improvement.
Method 2: PageSpeed Insights
Another fairly easy way to get the Core Web Vitals report.
Firstly, go to the PageSpeed Insights web page.
Now enter the URL of your website.
Click on ‘ANALYZE’.
Wait for the process to be completed.
That’s it and now you will have all the important data including FCP, LCP, FID, and CLS.
Done!
Method 3: ChromeDev Tools and Lighthouse
This method is great for a lab environment especially if you are in a development phase. You can use ChromeDev Tools or Lighthouse to measure Google’s Web Vitals.
Method 4: Using A Chrome Extension
Additionally, there is a Chrome Extension too and it lets you measure Google’s Core Web Vitals.
Just go to the Chrome Web Store and download the extension.
Method 5: Using JavaScript
The Core Web Vitals can also be measured in JavaScript using standard web APIs. All you have to do is run the following JavaScript Code:
import {getCLS, getFID, getLCP} from ‘web-vitals’;
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon(‘/analytics’, body)) ||
fetch(‘/analytics’, {body, method: ‘POST’, keepalive: true});
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
Improving Core Web Vitals
Now, let’s say that you have all the insights related to the Core Web Vitals and you notice that there are some improvements to be made. What is the next step?
Well, you will need someone with proper knowledge of front-end and back-end development to make all the changes. However, here are some tips to optimize the Core Web Vitals:
Tips to Optimize LCP
- One of the biggest reasons for slow LCP is slow loading times from the server side. So keep your server well-optimized and you should also cache the assets.
- Scripts and stylesheets are responsible for delayed FCP resulting in delayed LCP as they are render-blocking resources. So it is good to reduce CSS blocking time.
- You should optimize and compress images and text files.
- If you are making a client-side rendered site, you should also minimize critical JavaScript, use server-side rendering, and pre-rendering.
Pro Tip:
Implement performance budgets to enforce limits on page weight and script execution.
Tips to Optimize FID
- To optimize FID, you should break the long tasks into smaller asynchronous tasks.
- You should also Optimize your page for interaction readiness.
- Oftentimes, a blocked main thread can affect FID and you can reduce that by running JavaScript on a background thread using a Web Worker.
- Finally, FID can also be improved by Reducing the JavaScript execution time.
Tips to Optimize CLS
Well, to improve the CLS score for any site, it is important to know the reasons behind bad CLS scores and by just solving those problems, one can improve CLS score for their site easily. Here are the possible reasons:
- Adding Images without dimensions
- Ads, embeds, and iframes without any dimensions
- Dynamically injected content
- Web Fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM
So, to improve the CLS score make sure that you do not make any of the above mistakes.
Conclusion
Many businesses still do not use any user experience testing for their websites, which is why they have a lot of problems in delivering the best user experience to the visitors.
You can use these tools to analyze the user experience provided by your website and improve it by making all the necessary changes. This will bring more visitors to your site and a good user experience will compel them to revisit your site, boosting your business.
