If like me, you are a resident of a thriving metropolis, you will come across people from many countries, and many cultures, people who dress in different styles and speak different languages. Whether you wait your turn in the morning at the busy coffee shop or are travelling on the Metro to work, you can observe people around you busy conversing with someone or more often, glued to their mobile phones- busy chatting with someone or browsing the Internet.
In a melting pot of such proportions, some phrases and words have become common across all languages. One such term = “google it” means the same across any language on the face of the Earth. Looking for some information? Just google it! Want to find a good deal for something – just google it!
Google is all-encompassing and has become a foundational part of our existence. While Google as a company runs many services, its first and still major product was the “search engine”. It is the most visited website in the world that handles more than 3.5 billion searches a day and has almost 93% share of the global search engine market.
When your business depends on your website, naturally you would want your website to rate highly in Google searches and in terms of user experience.
Google uses a ranking system to rate websites and it is in everybody’s interest to ensure their website is configured to rank well in this system not just today but in future as well.
How to achieve this? Thankfully, Google provides a set of metrics- some of these metrics are CORE or fundamental and some are secondary. The importance of the core web vitals cannot be overstated. Why, you may ask? Let us see why the core vitals matter first and then we shall see what those metrics are in some detail.
- A website exists essentially to meet a user need – how well it serves this purpose is of the highest importance to Google’s ranking algorithm.
- A great user experience will make users visit the website often and recommend it to peers.
- For a great page experience, core web vitals are an essential ingredient.
Let us now examine what these Core Web Vitals are.
Largest Contentful Paint or LCP:
This metric measures how quickly a page loads, from the perspective of a user. Simply put, it is the time taken from clicking on the page’s link (url) to the moment the user is able to view most, if not all content of the page on their screen.
The loading time of a page is often impacted by the time taken to load the largest object on that page. Such an object is also often the essence of that page’s content. The faster the page loads, the better the user experience will be.
Ideally, this value should be no more than 2.5 seconds, the less the better.
Google rates the LCP in the below manner,
For pages with loads of high-res images, third-party scripts running in the background etc., the LCP can be inordinately long, causing the page to be rated “poor”. It can also be impacted by the performance of the hosting partner where your page is hosted.
First Input Delay or FID:
This metric is equally important and measures the “interactivity” of the page. After all, no one wants to click on a button or a link and then wait interminably! FID refers to the time taken by the browser to actually process the first user interaction on a given page.
Common user interactions are when a user selects an option from a dropdown menu or submits a text in a field.
Obviously, for static pages (blog posts, articles etc.), FID is not much of a concern but for interactive pages, this is a very important metric. An instance where the entire content is loaded but the page is not responding is not of any use to anyone.
Google rates the FID in the below manner,
Cumulative Layout Shift (CLS):
This metric measures the visual stability of a page as the content on the page changes or new content falls into place.
Imagine a situation where in the midst of reading an interesting blog, the text moves around when some pictures or an advertisement loads. It can only be described as a visually disturbing or jarring experience.
The most common occurrence of content shift is when a page is loading, different elements of the page’s content juggle a bit before they settle into their intended place on the page. The quick a page stabilizes the better it is for the user. I can recall many an instance where I clicked (or I thought I clicked) on a link but the actual link that loaded was different, most times an ad or a consent for cookies that I did not want to give!
Google rates the CLS in the below manner,
Now that we know what the Core Web Vitals are, the next logical question is how to measure them. After all, you can not improve something unless you can measure it.
The first place to go to is your Google Search Console (GSC). It very helpfully provides the Core Web Vitals report for your site. It relies on data collected from Google Chrome UX (user experience) reports which is nothing but real-life users’ experience. Using this report, one can easily identify the pages that need the most attention for a given metric.
Google PageSpeed Insights is another tool which combines both the field data (collected from Chrome users) and the lab data (collected in labs by developers) to give you an indication of the performance of your site on both desktops as well as mobile devices. This report is easy to interpret even for a beginner and can highlight the issues with a specific page, both in the lab and field scenarios.
For an advanced developer, Google Chrome UX report is a powerful dataset based on real-world users browsing millions of websites. The users who have opted into submitting their Chrome UX data contribute to this dataset and it is made publicly available. This report is typically used by developers to compare the performance of their sites against those of their peers or competitors.
Other tools such as web.dev and javascript libraries along with some lab tools such as Chrome Web Vitals Extension, Chrome DevTools and Lighthouse are also used by the developer community to analyze and optimize their sites.
