Training mode
Optimise this page.
A fictional outdoor-gear shop’s landing page, on a mid-range phone. It scores 24, and it ships 4.7 MB of images. You get five decisions. Every choice is calculated by the same models as the experiments, so there are no fake answers, and a few traps.
- Take the steps in any order. The score updates live. A step that doesn’t move it may be hidden behind another problem, and the game will tell you which.
- Apply what you’ve chosen to lock it in. At the end you get an explanation of exactly what changed, and why.
- Stuck? “Show me a good answer” fills in one step, and every step links to the experiment that explains it.
Conditions: Mid-range phone on 4G (4× CPU slowdown, 100 ms round trip, 12 Mbps). The score is a simplified model of Lighthouse’s first-load score, not Lighthouse itself. It uses four of Lighthouse’s five metrics; real Lighthouse also scores Speed Index, so FCP and LCP weigh a little more here.
Performance score started at 24
- First Contentful PaintFCP4.8 swas 4.8 s
- Largest Contentful PaintLCP5.5 swas 5.5 s
- Total Blocking TimeTBT635 mswas 635 ms
- Layout ShiftCLS0.62was 0.62
0 of 16 problems fixed
first paint is waiting on a synchronous script
Step 1 of 5 · Experiment 02
Fix the hero image
The biggest thing on the page is also the biggest download.
Bytes you can’t see: past about 85 the file grows and the picture doesn’t improve.
What your choices in this step did
- Score24 → 24
- Page weight6.9 MB → 6.9 MB
- First paint4.8 s → 4.8 s
- Largest paint5.5 s → 5.5 s
- Blocking time635 ms → 635 ms
- Layout shift0.62 → 0.62
The score barely moved, and that’s not your fault. First paint is still waiting on a synchronous script, so it can’t be any sooner until that’s fixed too. Look at the numbers below: they did improve.
Page weight 6.9 MB → 6.9 MB
- Images 4.7 MB
- JavaScript 300 KB
- CSS 300 KB
- Fonts 663 KB
- Third-party 1.0 MB
- HTML 40 KB
Mid-range phone on 4G (4× CPU slowdown, 100 ms round trip, 12 Mbps). A simplified score, not Lighthouse.
Problems found 0 of 16 fixed
- ✗Serve images in a modern format
- ✗Serve appropriately sized images
- ✗Defer offscreen images
- ✗Give images explicit width and height
- ✗Use fewer, smaller font files
- ✗Keep text visible during font load
- ✗Preload the key font
- ✗Eliminate render-blocking JavaScript
- ✗Reduce unused JavaScript
- ✗Avoid long main-thread tasks
- ✗Reduce the impact of third-party code
- ✗Avoid chaining critical requests (@import)
- ✗Reduce unused CSS
- ✗Eliminate render-blocking CSS
- ✗Reserve space for ads and embeds
- ✗Serve static assets with an efficient cache policy