Speed Index too slow
Lighthouse films the load and scores how quickly the viewport fills with content; a slow score means the page looks blank too long.
What you see
Speed Index — 5.8 s Speed Index is too high. Reduce render-blocking resources.
What’s actually happening
Lighthouse reports a high Speed Index in seconds, and the filmstrip at the top of the report shows a string of blank or half-rendered frames before content snaps in. Unlike a single milestone like FCP or LCP, this metric averages visual completeness over the whole load, so anything that delays painting — slow server, blocking CSS, late fonts — drags it up. The page can feel slow even when the total load time is fine, because the viewport stays empty in the early frames.
Common causes
- Render-blocking CSS or synchronous JS in the <head> delaying first paint
- Slow TTFB — the server takes too long to send the first byte, pushing every frame back
- Web fonts with `font-display: block` causing invisible text (FOIT) until the font downloads
- A large hero image or above-the-fold media that paints late
- Client-side rendering where the viewport stays blank until JS fetches and renders content
How to fix it
- Inline critical CSS and defer the restExtract the above-the-fold CSS and inline it in the <head>, then load the full stylesheet with `media="print" onload` or `rel=preload`. This lets the first frames paint without waiting on the full CSS download.
- Cut TTFBEvery frame in the filmstrip is offset by server response time. Add full-page or edge caching, put a CDN in front, and profile slow backend queries. Check the 'Initial server response time' audit for the current number.
- Fix font loadingSet `font-display: swap` so text renders immediately in a fallback, and `preload` the primary woff2 file. FOIT (blank text waiting on a font) shows up directly as empty frames in the filmstrip and is a common hidden cause.
- Prioritize the above-the-fold heroPreload the LCP image, serve it as AVIF/WebP at the right dimensions, and don't lazy-load anything in the initial viewport. Faster early paint of the largest visible element moves the Speed Index curve the most.
- Server-render or stream the first viewFor client-rendered apps, add SSR or streaming so the viewport has real markup in the first frames instead of waiting on a JS round-trip. Even a static above-the-fold shell helps the visual-completeness score.
Stop it recurring
Keep the critical rendering path lean — inline critical CSS, preload hero media and fonts — and watch Speed Index in Lighthouse CI alongside LCP.