Performance of a web application

The three Core Web Vitals signals (LCP, INP, CLS) and their thresholds, the rendering path and blocking resources, image and script weight, caching, compression and lazy loading.

33 cards
6 topics
Free

Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

Concepts
Questions
Sort and link
The numbers
Scenarios
Understand

A few cards from the deck

LCP (Largest Contentful Paint): what is it?
Show the answer
The time elapsed before the largest visible element of the page is displayed, often an image or a heading; it is good up to 2.5 s.
It measures when the page looks ready to the person looking at it. Beyond 4 s, it is rated poor.
This page stays blank for too long. Which change frees the first display?

```html
<head>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
`
- Add defer to the script tag
- Add defer to the link tag of the stylesheet
- Add lazy to the script tag of the file
- Remove the stylesheet and style things in JavaScript
Show the answer
Add defer to the script tag
A script without an attribute stops parsing until it has run. defer has no effect on a link, lazy does not exist as a script attribute, and styling in JavaScript delays display even more.
The thresholds of a good score are: LCP up to …, INP up to … and CLS up to ….
Show the answer
The thresholds of a good score are: LCP up to 2.5 s, INP up to 200 ms and CLS up to 0.1.
A poor rating starts at 4 s for LCP, 500 ms for INP and 0.25 for CLS; in between, the page "needs improvement".
INP (Interaction to Next Paint): what is it?
Show the answer
The delay between a user action (click, tap, key) and the visible update of the screen, taken for one of the slowest interactions of the visit; good up to 200 ms.
It measures responsiveness: an interaction waiting on a long main-thread script gives a high INP. Beyond 500 ms, it is poor.

Study this deck