Speed Index
How quickly the first screen visibly fills in, not just when its final large element finishes loading.
See it
What it is
Speed Index measures how quickly the visible part of a page fills in during a lab load. The metric came out of WebPageTest and Lighthouse computes it the same way, using the Speedline module: record the viewport as it loads, turn that filmstrip into a visual-completeness curve, and score the area where the screen was still unfinished. Lower is better: a page that draws useful content steadily beats one that stays blank and appears all at once at the same finish time.
Reach for it when two pages have similar load milestones but one looks ready much earlier. The Lighthouse filmstrip is as useful as the number: it shows whether a stylesheet, font, hero image, or client-rendered shell is keeping the first screen empty.
Gotcha: Speed Index rewards changed pixels, not usefulness. A skeleton screen or decorative background can make the viewport look complete while the headline and controls are still missing. It is a lab metric, not a Core Web Vital, so pair it with LCP and interaction measurements.
Ask AI for it
Improve this page's Speed Index. Run Lighthouse in mobile mode, read the screenshot filmstrip in the report, identify the intervals where visual progress stalls, and trace each stall to its blocking CSS, font, image, or JavaScript request. Inline only the critical above-the-fold CSS, put the hero image in the initial HTML with fetchpriority='high', preload only late-discovered critical assets, and render meaningful server HTML before hydration. Re-run Lighthouse under the same throttling settings and report the before and after Speed Index, LCP, and filmstrip timestamps.