Web PerformancePerformance Metrics & Core Web Vitals

58 items

1

Measuring CLS in the Loading Pipeline

Code Quiz
2

Core Web Vitals & Loading Pipeline

Quiz
3

Measuring CLS with PerformanceObserver

Code Quiz
4

Core Web Vitals: LCP, CLS, INP

Quiz
5

Observing LCP with PerformanceObserver

Code Quiz
6

Understanding LCP and CLS

Quiz
7

Time to First Byte (TTFB)

Slides / Video
8

LCP Thresholds

Code Quiz
9

web-vitals Library

Code Quiz
10

PerformanceObserver Setup

Code Quiz
11

Navigation Timing

Code Quiz
12

Total Blocking Time

Code Quiz
13

Measuring FCP

Code Quiz
14

Computing TTFB

Code Quiz
15

FID Calculation

Code Quiz
16

INP Thresholds

Code Quiz
17

CLS Thresholds

Code Quiz
18

Rating Boundaries

Code Quiz
19

p75 Percentile

Code Quiz
20

Lab vs Field Data

Code Quiz
21

Largest Contentful Paint (LCP)

Slides / Video
22

What Core Web Vitals Are

Slides / Video
23

Tools for Measuring Web Vitals

Slides / Video
24

Lab Data vs Field Data (RUM)

Slides / Video
25

Core Web Vitals: Three Categories

Slides / Video
26

Good vs Poor Metric Thresholds

Slides / Video
27

Time to Interactive (TTI)

Slides / Video
28

Why the 75th Percentile

Quiz
29

CLS Good Threshold

Quiz
30

FID Replaced by INP

Quiz
31

LCP Rating Thresholds

Quiz
32

The Three Core Web Vitals

Quiz
33

INP Good Threshold

Quiz
34

Lab vs Field Data

Quiz
35

What LCP Measures

Quiz
36

What INP Measures

Quiz
37

Total Blocking Time Basics

Quiz
38

Speed Index Basics

Quiz
39

What CLS Measures

Quiz
40

Why Metrics Are User-Centric

Quiz
41

Time to Interactive Basics

Quiz
42

First Contentful Paint (FCP)

Flashcard
43

First Input Delay (FID)

Flashcard
44

Percentiles (p75) in Measurement

Flashcard
45

Lab Data vs Field Data

Flashcard
46

Speed Index

Flashcard
47

Time to First Byte (TTFB)

Flashcard
48

Cumulative Layout Shift (CLS)

Flashcard
49

Interaction to Next Paint (INP)

Flashcard
50

Time to Interactive (TTI)

Flashcard
51

Total Blocking Time (TBT)

Flashcard
52

Largest Contentful Paint (LCP)

Flashcard
53

Core Web Vitals Thresholds

Flashcard
54

What Core Web Vitals Are

Flashcard
55

First Contentful Paint (FCP)

Slides / Video
56

Interaction to Next Paint (INP)

Slides / Video
57

Cumulative Layout Shift (CLS)

Slides / Video
58

First Input Delay (FID)

Slides / Video
Code QuizAdvanced

Observing LCP with PerformanceObserver

Spot the bug in a PerformanceObserver setup meant to measure Largest Contentful Paint.

Codejavascript
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('LCP candidate:', entry.startTime);
  }
});

observer.observe({ type: 'largestContentfulPaint', buffered: true });

This code should log Largest Contentful Paint entries but never fires. What is the bug?