Overview
Websites are built using different technical stacks, but search engines like Google generally prefer pages that rely primarily on fast-rendering HTML and CSS. These technologies allow the page to load quickly without delays, layout shifts, or performance issues.
When a webpage contains render-blocking resources such as CSS and JavaScript, it increases the time required for downloading, parsing, and execution. This slows down the initial paint and overall rendering process. That said, completely eliminating JavaScript isn’t practical, as it is essential for interactive elements, visual effects, and event tracking.
To optimize Core Web Vitals, the focus should be on reducing and refining page resources—CSS, JavaScript, HTML nodes, and other assets—so the browser can render the page as efficiently as possible.
Google ranks pages in its search results based on Core Web Vitals performance. A higher score increases the chances of appearing at the top of search results. This is especially crucial for news publishers, media houses, and businesses of all sizes, as better rankings directly translate to higher organic traffic. Increased visibility brings more visitors, which ultimately helps drive growth and revenue for publishers and businesses alike.
There are three key metrics you will primarily focus on when addressing website performance issues. These metrics are:
- Largest Contentful Paint (LCP) that measures loading performance
- Interaction to Next Paint (INP) that measures interactivity
- 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.
This was followed by a revision with INP in May 2023. You can read more about it here.
Glossary
It is important to understand what all abbreviations mean, as they are going to be used throughout the course.
| Abbreviation | Long Form | Description |
|---|---|---|
| CWV | Core Web Vitals | The factors or signals for page experience |
| PSI | Page Speed Insights | Tool for analysing and testing the page speed insights |
| FID | First Input Delay | Interactivity |
| INP | Interaction to Next Paint | Overall page Interactivity |
| FCP | First Contentful Paint | Show content as fast as possible. |
| TBT | Total Blocking Time | The main thread is not yet ready for user inputs |
| LCP | Large Contentful Paint | Loading |
| CLS | Cumulative Layout Shift | Visual Stability |
| TTI | Time to Interactive | Time after which user can start interacting with page |