With the recent announcement of Google’s web vitals, it is extremely important to update your website in accordance with the newly defined ranking metrics. Previously, the ranking of a website was dependent on three main factors, is it mobile-friendly, does it offer HTTPS, and is it free of intrusive interstitials? These signals were used as indicators for page experience and helped Google to rank websites on their search engine accordingly. As of early September, Google has shifted to a new set of indicators known as the Web Vitals. It is believed that coupled with the aforementioned factors, this would allow them to enhance the experience of a user over the internet.
What Are The Core Web Vitals?
This brings us to the question, what are Web Vitals? As the name suggests, it is a combination of estimators that are used to rate the page experience of a user. But this is not it! Essentially, Google has redefined the way it rated user experience. Now Web Vitals is the new game. Web vitals can be divided into two major segments, Core Web Vitals, and Non-Core Web Vitals. While this article mainly focuses upon core web vitals, non-core web vitals would also be discussed in the following paragraphs.
Largest Contentful Paint
Core Web Vitals is based upon three metrics, Loading, Interactivity, and Visual Stability. Loading is measured using Largest Content Paint (LPC). LPC measures the time required by the website to load its largest text block or image element. A low LPC would ensure that the website loads fast enough that it is readily accessible to its users. As a result, it would enable the search engine to identify websites that users can access swiftly. Furthermore, a lower LPC would be given preference because it guarantees that a website is useful. LPC can vary from page to page. Hence, it is important to identify LPC candidates for every page and make sure that they are displayed as quickly as possible. You can adjust your website structure in a manner that the overall loading time is reduced and server-side adjustments can also be made. A good LPC score is 2.5 seconds or less whereas, a poor LPC score is anything more than 4 seconds.
First Input Delay
Interactivity is the second most important metric and is assessed using First Input Delay (FID). FID is the delay caused when the user interacts with the website and its ability to respond to that interaction. It is measured in milliseconds and does not account for scrolling and zooming etc. It is important to note that FDI is also not affected by a browser’s ability to execute a command as it varies across devices. Similar to LPC, the lower the FDI the better. FDI is of great importance as it is the direct representation of how responsive a website is. Usually, complex java scripts result in a poor FDI score. Thus, the FDI score can be improved by reducing JavaScript execution time and by reducing work in the main thread. An FDI score above 100ms needs improvement but anything below it is good enough.
Cumulative Layout Shift
The last but equally important estimator is visual stability. It is based upon Cumulative Layout Shift (CLS) and unlike the other two, it is not measured in seconds. CLS is a measure of all the unexpected shifts in the layout of the page. Since, visual stability greatly defines user experience, having a good score would enhance the user experience. CLS score is calculated using two components, impact fraction and distance fraction. Impact Fraction is the area utilized by an unstable element and distance fraction is the distance traveled by the same element between two frames. A poor CLS score can be due to many reasons such as ads and images with undefined dimensions and situations where content is entangled with the already loaded content. Therefore, the CLS score can be improved by defining size attributes to the images and videos included on your website and by preventing overlapping of content. A good CLS score is below 0.1.
Apart from the Core Web Vitals, Non-Core Web Vitals were also introduced by Google. These are a great aid to the overall website design as they can enhance user experience and further increase the ranking of a website. Non-core Vitals include Total Blocking Time (TBT), First Contentful Paint (FCP), Speed Index (SI), and Time to Interactive (TTI).
Conclusion
Over the past few years, great emphasis has been placed on enhancing the experience of the users. Through these new Core Web Vitals, Google has taken the lead in introducing user-centric algorithms that provide additional utility to its users. As the technology is relatively new, early adapters would definitely gain from this opportunity. Hence, if there is one piece of advice for developers and web designers, it is to start making UX improvements for your websites.