How does Google consider a web page to be ideal for a user? How does Google decide which website goes first on the Search Engine Results Page (SERP)? As a budding digital marketer, if all these questions keep on kicking around in your brain, you’re at the right place.
Initially, developers and designers used to have a tough time designing web pages and optimizing them as they were barely aware of how ranking works and how the audience interacted with the web pages (which was one of the primary ranking factors).
That slowly changed after the release of metrics called Core Web Vitals by Google. These were standardized metrics released by Google to help developers and designers understand the website experience of users.
- What are the Core Web Vitals?
- How to measure Core Web Vitals? What are the tools available?
- Tips to improve the core web vitals and optimize performance
- Concluding thoughts
What are the Core Web Vitals?
The 3 core web vitals are determined based on 3 major aspects of user experience:
| Loading | Largest Contentful Paint (LCP) |
| Visual Stability | Cumulative Layout Shift (CLS) |
| Interactivity | First Input Delay (FID) |
Let us get into explaining what these three core web vitals mean, and let us take the google homepage as an example.
When we headed to Google HomePage and ran the Lighthouse test (to be discussed later in the article), we received the following data.
Disclaimer: The score changes with respect to time and is never static
Let’s get into the three primary metrics that come under the core web vitals.
Largest Contentful Paint (LCP)
This metric indicates how long an image, video, or any content, the largest size, takes when the page is loading.
Taking Google’s Homepage as a reference: It takes 1.2 seconds for the Google homepage’s LCP to load, which is a pretty good score, when compared to the benchmarks, which is excellent if 2.5 seconds or less. The reason is that the more time it takes for a page to load, the higher the chances of users navigating away from the page.
- As per Google Developers, if your LCP is <2.5 seconds, you have a very good performance
- If between 2.5 seconds and 4 seconds, your page needs improvement
- If >4seconds, the performance is poor
If you take a closer look at the LCP data, you will find an in-depth analysis as shown in the image.
Now, let’s move on to the second core web vital metric- Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS)
This metric indicates the instability of the website. The lower the score indicates better stability of the website. For instance, you would have come across websites whose layouts keep shifting as you scroll through them, and it is an irritating aspect to deal with.
For the Google homepage we audited, the CLS score was 0.065 seconds, an excellent score. That is because the lesser the content block jump around when the user scrolls, the better the user experience on the site.
- As per Google Developers, if your CLS is <1 second, you have a very good performance
- If between 0.1 and 0.25 seconds, your page needs improvement
- If >2.5 seconds, the performance is poor
Ideal CLS performance scores as published on the official Google Developers site are as below:
First Input Delay (FID)
The metric measures the time taken for the web browser to respond to the user’s first interaction. It shows the responsiveness of the web page to the user’s interaction. And the faster the interaction, the better the user experience. Because, at the end of the day, nobody likes a sluggish and non-responsive webpage.
Ideal FID performance scores as published on the official Google Developers site
- As per Google Developers, if your FID is <100 milliseconds, you have a very good performance
- If between 100 and 300 milliseconds, your page needs improvement
- If >300 milliseconds, the performance is poor
Just in: Also, there is a chatter going on about a new responsiveness metric that will be introduced, which is said to replace the First Input Delay.
How to measure Core Web Vitals? What are the tools available?
Google Lighthouse (My Personal Favorite)
The tool we used to measure the core web vitals above was the Lighthouse, available for free on your Chrome browser. And if you are a developer/ designer, this tool gives you deeper insights into these metrics at the grassroots level. Its functionality surpasses the other tools, and you must give this a check.
PageSpeed Insights
This is a very easy-to-understand tool. The tool has modules that can help in diagnosis and provides insights on where improvements can be made.
Google Search Console
The tool gives you insights into the URL’s performance and helps you identify pages that need improvement. The primary difference between this tool and the others is that the Search Console provides field data, while the other tools provide lab data. And when it comes to the real world, field data plays more relevance than lab data.
Now that you have a good understanding of the core web vitals and how they can be useful for your website, it is time to check if your website is performing up to the benchmarks.
Tips to improve the core web vitals and optimize performance
For developers/website owners who are looking out for techniques for boosting up the page performance to match Google’s primary ranking factors, here are a few for starters.
- Speed up Visuals Load Time by Pre-loading Key Resources
This pertains to the first core web vital – the Largest Contentful Paint (LCP). First, you have to identify what the LCP element of the page is. The next step is to ensure that the LCP loads faster by incorporating methods like pre-loading to help the browser fetch these resources – the LCP elements as the first priority.
- Minimizing Long Tasks
This technique pertains to the second core web vital – First Input Delay (FID). Imagine clicking on an actionable item and waiting forever for it to load. Neither I nor you have the patience to wait for so long.
The primary contributing factor to this issue is the Long Tasks. These are pieces of Javascript code that block the main thread and cause the page to become unresponsive and freeze. Although fixing this varies depending on the factors contributing to the blockages, the common fix is by splitting the code and serving scripts in smaller sections.
- Reserving space for Images and Embeds
The third technique pertains to the third web vital – Cumulative Layout Shift (CLS). One of the main factors that cause this score to drop is a poorly designed UX – not allocating reserved spaces for images and embedded sources. Hence, while designing the page UX/UI, ensure that spaces are reserved for images and other resources on the page.
- Mobile-friendly web pages
More than 50% of online content is viewed through mobile devices. Hence, it is absolutely necessary to make your website pages mobile-friendly.
You can check the mobile-friendliness of the website by monitoring the Mobile Usability Report section available in Google Search Console (formerly known as the Google Webmaster).
Another option to figure out the mobile usability score is by running the key page templates through Google’s Mobile-Friendly Test.
- Ensure HTTPS encryption for your website
The absence of secure HTTP connections possess risks and vulnerabilities to users and their data. Hence, having an HTTPS (Hypertext Transfer Protocol Secure) security incorporated into the web pages is a way of signaling to Google that your website is safe for users.
- Ensure website security
Website security plays a major role in determining page experience. Google ensures that all the websites present in the SERP are safe for users, and would penalize sites that do not have proper security practices in place.
Security issues related to phishing, unwanted software, malware, and deceptive content are factors that Google considers harmful, and one must ensure that their websites do not possess any of them. A very simple method to audit your website’s security is to take a look at Google Search Console’s Security Issues report to be found under Security & Manual Actions.
Concluding thoughts
Google periodically releases updates and press releases on core web vitals that developers and designers can leverage to improve their website performance. And the community has been indirectly stressing the factor that these web vitals are one of the ranking factors on the Search Engine Results Page (SERP).
If you are interested in the world of digital marketing and would like to get your hands on one of the most thoughtful planned digital marketing programs, check the PG Program in Strategic Digital Marketing. The program is designed for future digital marketing professionals and follows a project-based learning approach.
Note: The last major update was in May 2022, and we are yet to understand what changes have been made to the algorithms. Stay tuned to our blogs to stay updated with the latest trends.
