Overview

The websites can have different technical stack. Ideally search engines like Google would want the HTML + CSS stack that renders the page faster and without any delays or layout shifts, or any kind of poor performance. The webpage which has blocking things like CSS, and javascripts will increase the downloading, parsing and execution time which will further increase blockers for the initial paint and rendering of the page. However, it might be impossible to not have any Javascripts on the web pages as there are many visual interactions, effects and events tracking we need to do.

The strategies that would work best for optimizing core web vitals are all about minimizing and optimizing the resources like CSS, Javascripts, HTML Nodes, etc.

The Google search engine will rank pages in Google search based on the core web vitals score. The higher the score, more will be the changes for the website to get ranked at the top of the search. This is very important for news publishers or media houses and even the small or large scale business website owners. Their organic traffic will be higher if the website is ranking good in Google search results. This will in turn give businesses and publishers more traffic and eventually more revenue.

There are mainly 3 metrics you will mostly see in and work for, to solve the issues with the performance of the website, they are as following: 

  1. Largest Contentful Paint (LCP) that measures loading performance
  2. First Input Delay (FID) that measures interactivity
  3. Cumulative Layout Shift (CLS) that measures visual stability

Google had announced this search engine update in May 2020, and rolled it out in  May 2021

You can read more about it here.

Glossary

It is important to understand what all the abbreviations mean as it is going to be used throughout the course.

AbbreviationLong FormDescription
CWVCore Web VitalsThe factors or signals for page experience
PSIPage Speed InsightsTool for analysing and testing the page speed insights
FIDFirst Input DelayInteractivity
FCPFirst Contentful PaintShow content as Fast as Possible
TBTTotal Blocking TimeMain Thread is not yet ready for user inputs
LCPLarge Contentful PaintLoading
CLSCumulative Layout ShiftVisual Stability
TTITime to InteractiveTime after which user can start interacting with page