Advanced level · Module 3: Web Performance and Search Optimisation · Lesson 1 of 4
Measuring Real-World Performance
Understand Core Web Vitals and measure performance in the lab and in the field.
In this lesson you will
- Explain LCP, INP and CLS
- Measure performance with Lighthouse and real devices
Key concepts
Largest Contentful PaintInteraction to Next PaintCumulative Layout Shiftlab vs field data
The lesson
Core Web Vitals measure user experience: Largest Contentful Paint (LCP) is how soon the main content appears, Interaction to Next Paint (INP) is how quickly the page responds to taps and clicks, and Cumulative Layout Shift (CLS) is how much the page jumps around while loading.
Lab tools such as Lighthouse test under controlled, simulated conditions and are repeatable. Field data from real users shows what people actually experience, which may differ greatly on cheap phones and slow networks.
Set targets before optimising — for example LCP under 2.5 seconds on a mid-range phone over 3G — and measure against them.
Step by step
- Run Lighthouse with mobile settings on the training centre site.
- Identify the LCP element and any layout shifts.
- Load the site on a real phone over mobile data and time it.
- Set performance targets.
Training centre site: before and after optimisation
Lab measurements on a simulated mid-range phone before and after an image, font and JavaScript clean-up.
Page weight
0.9 MB
Down from 4.6 MB
Illustrative training data; lower is better
Largest Contentful Paint
2.1 s
Down from 6.8 s
Target: under 2.5 s
Requests
18
Down from 47
Lighthouse performance
92
Up from 41
Show the data behind the chart
| Resource type | Before (KB) | After (KB) |
|---|---|---|
| Images | 3,900 | 520 |
| JavaScript | 480 | 210 |
| Fonts | 160 | 40 |
| CSS and HTML | 60 | 130 |
Interpretation
Images were 85% of the original page (3,900 of 4,600 KB). Resizing, converting to WebP and lazy-loading them cut 3,380 KB — most of the total saving.
CSS and HTML grew slightly because critical styles were inlined and image size hints added; that small increase is what made the main content appear sooner.
Recommendations
- Add image optimisation to the publishing routine so new photos do not undo the gains.
- Re-measure on a real phone over mobile data each month and after each new feature.
Practice activity
Write a performance baseline report with targets for the training centre site.
Expected result: A report with Lighthouse and real-device measurements and clear targets.
Check your understanding
-
What does CLS measure?
Show answer
How much the page layout shifts unexpectedly while loading.
-
Why are lab and field data different?
Show answer
Lab tests simulate fixed conditions; field data reflects real devices and networks.
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.