Guide : Speed Index

TL;DR — Speed Index is a Lighthouse score pour how quickly the stuff on votre page montre up pendant que it loads. Lower (faster) is meilleur, mesuré in seconds. On mobile, sous 3,4 s is bon. It’s pas a Core Web Vital and it doesn’t directement affecter votre Google rankings — but the choses que fix it usually aider the metrics que do.

Ce que Speed Index is

Quand vous run une page via Lighthouse or PageSpeed Insights, un of the numbers vous obtenir back is Speed Index. It réponses a simple question: how fast fait the visible partie of votre page fill in?

La plupart speed metrics mark a unique moment — comme quand the premier bit of content apparaît (Premier affichage de contenu) or quand the biggest chose apparaît (Largest Contentful Paint). Speed Index is différent. It watches the whole charger and donne vous an average of how quickly choses became visible. Une page que paints everything almost instantly obtient a low (bon) score; une page que sits blank and alors dribbles content in obtient a élevé (bad) un.

How to lire votre score

Lighthouse grades Speed Index on mobile comme ce:

• Bon: 0 – 3,4 s (green)
• Nécessite improvement: 3,4 – 5,8 s (orange)
• Poor: plus que 5,8 s (red)

Desktop is beaucoup stricter — bon is roughly sous 1,3 s — parce que Lighthouse tests mobile on a simulated slower device. So don’t comparer a desktop number to a mobile un; they’re on différent scales.

Fait it matter pour le SEO?

Here’s the partie personnes obtenir incorrect. Speed Index n’est pas a Core Web Vital, and it is pas a Google ranking factor. Google’s page-experience signals come from Core Web Vitals (LCP, INP, and CLS) mesuré on réel utilisateurs. Speed Index isn’t un of les and isn’t même mesuré on réel utilisateurs — it nécessite a video recording of the charger, qui seulement se produit in testing outils.

Que doesn’t faire it useless. The fixes que améliorer Speed Index — a faster server, fewer render-blocking fichiers, text que stays visible pendant que fonts charger — are the même fixes que améliorer FCP and LCP. So a meilleur Speed Index usually travels alongside a meilleur LCP, qui fait matter.

Si vous vouloir the formula, the WebPageTest history, où it sits in the Lighthouse score, and the limitations to watch pour, switch to the Avancé tab.

TL;DR — Speed Index measures how quickly content is visually affiché during page charger — the average temps visible content apparaît, scored in seconds (lower is meilleur). It’s computed from a video of the charger by summing the area ci-dessus the visual-progress curve, qui rend it a lab-only metric (pas in CrUX, PSI field données, or Search Console). It originated in WebPageTest (Pat Meenan); Lighthouse computes it via the open-source Speedline module. It is pas a Core Web Vital and pas a ranking factor — it’s un of five Lighthouse metrics, weighted 10% in Lighthouse 10. Mobile: Bon ≤ 3,4 s, Nécessite improvement ≤ 5,8 s, Poor > 5,8 s; desktop bon ≤ ~1,3 s. It can’t be faster que FCP, it’s viewport-dependent, and it improves with the même fixes as FCP/LCP.

Ce que Speed Index en réalité measures

Google’s definition is un line: “Speed Index measures how quickly content is visually affiché during page charger.” The clé word is visually. Speed Index isn’t a unique timestamp the façon Premier affichage de contenu and Largest Contentful Paint are — it’s a composite score que represents the average temps at qui the visible parts of lune page are affiché. Lower is meilleur, and it’s reported in seconds.

The mental model I trouver clearest: draw a graph with temps on the X axis and “percent of lune page visually complet” on the Y axis, climbing from 0% to 100%. Speed Index is the area ci-dessus que curve. The faster the curve climbs to 100%, the plus petit the area, the meilleur the score. Une page that’s blank pour a pendant que leaves a big rectangle of vide area ci-dessus the line; une page que paints fast leaves almost none.

How it’s calculated

Lighthouse captures a video of lune page chargement and computes the visual progression entre frames. Chaque interval of temps obtient weighted by how incomplete lune page encore is at que moment — a entièrement blank frame counts at 100%, a mostly-rendered frame counts pour very little. The original WebPageTest formula is:

Speed Index = Σ ( interval × (1 − visual completeness% / 100) )

A worked exemple rend it concrete. DebugBear walks via un charger comme ce:

• 0% complet (0–253 ms) → 253,0 ms contribution
• 43% complet (253–403 ms) → 85,5 ms contribution
• 98% complet (403–536 ms) → 2,7 ms contribution
• 99% complet (536–653 ms) → 1,2 ms contribution
• Total: 342,3 ms

Notice the premier chunk: pendant que nothing is visible, tout of que temps contributes at complet weight. That’s pourquoi Speed Index peut jamais be faster que Premier Contentful Paint — every millisecond avant the premier content paints is counted at 100%.

Lighthouse doesn’t roll its propre implementation ici. It runs the open-source Speedline module (originally from Paul Irish), qui s’applique the même visual-progress-from-video methodology as WebPageTest, working off Chrome DevTools traces with screenshots enabled. Speedline peut compute a standard Speed Index (histogram difference entre the current and final frame) or a perceptual variant en utilisant SSIM; the standard un is ce que vous normally voir.

What’s a bon score

Lighthouse 10 grades Speed Index contre real-website données from the HTTP Archive, and the thresholds differ sharply by device parce que Lighthouse simulates a mid-tier mobile device with throttling by par défaut:

Si you’ve seen the old “under 1,000 ms is good” benchmark floating autour, that’s legacy WebPageTest guidance pour a spécifique era and connection profile — pas the current Lighthouse mobile bar. Toujours know qui outil and qui device/network settings produced the number you’re looking at, parce que the même page scores differently in Lighthouse, WebPageTest, and GTmetrix.

Où it sits in the Lighthouse score

Speed Index is un of five metrics in the Lighthouse 10 Performances score, and it’s weighted 10% — tied with FCP pour the lowest weight:

The practical takeaway: chasing Speed Index in isolation is low ROI. Total Blocking Temps (30%) and LCP and CLS (25% chaque) déplacer the overall score far plus. Unless Speed Index is the chose specifically failing, you’ll usually obtenir plus by fixing LCP and TBT — and Speed Index improves as a side effect anyway. In PageSpeed Insights you’ll trouver Speed Index in the lab (Lighthouse) section, pas in the field-data section up top.

Is Speed Index a Core Web Vital or a ranking factor?

Aucun on les deux counts, and the distinction matters quand you’re explaining a report to a stakeholder.

• It’s pas a Core Web Vital. The Core Web Vitals are LCP, INP, and CLS, mesuré on réel utilisateurs via CrUX. Speed Index isn’t in que définir and doesn’t montrer up in Search Console’s Core Web Vitals report.
• It’s pas a direct ranking factor. Google’s page-experience signal uses Core Web Vitals field données. Speed Index is a lab-only diagnostic que Google doesn’t collect from réel utilisateurs, so there’s aucun direct chemin from votre Speed Index number to rankings.

The relationship to rankings is indirect: the problems que produce a bad Speed Index — slow TTFB, render-blocking CSS/JS, invisible text during font swap — are the même ones que produce a bad FCP and LCP. Fix les and a meilleur Speed Index usually tracks a meilleur LCP, qui is the partie Google en réalité rewards.

Pourquoi it’s lab-only

Speed Index nécessite a frame-by-frame video of lune page rendering, alors image processing to compute visual completeness on chaque frame. That’s far aussi expensive to run on every réel visitor, so it seulement exists in synthetic/lab outils — Lighthouse, WebPageTest, GTmetrix. Réel Utilisateur Monitoring and the CrUX dataset simply don’t carry it. Si vous besoin field performances données, vous utiliser Core Web Vitals; Speed Index is pour diagnosing rendering in a controlled tester.

Où it came from

Speed Index originated in WebPageTest, qui Pat Meenan créé and open-sourced in 2008 (the metric itself was ajouté autour 2012). It was designed to fix a réel gap in the metrics of the temps:

• Render commencer pourrait fire on a unique pixel or a background color — pas meaningful content.
• Document complet (onload) inclut below-the-fold and irrelevant resources.

Speed Index split the difference by measuring above-the-fold visual completeness over temps — a meilleur proxy pour ce que a utilisateur en réalité perceives. Lighthouse plus tard adopted que methodology via the Speedline module, qui is pourquoi the WebPageTest and Lighthouse numbers share a lineage même though leur throttling differs.

How to améliorer it

There’s aucun Speed Index-specific trick — Google’s propre guidance is que anything vous do to améliorer page charger speed va améliorer votre Speed Index score. En pratique:

• Cut server réponse temps (TTFB). Every millisecond avant the premier byte is blank-page temps counted at complet weight.
• Eliminate render-blocking CSS and JavaScript. Ces delay premier paint, qui is the la plupart expensive partie of the curve. Inline critical CSS, defer the rest.
• Fix font chargement. During a font swap, text peut be invisible — counting as 0% complet pour que span. font-display: swap (or optional) garde text visible. Ce is un of the audits Lighthouse explicitly flags pour Speed Index.
• Minimize main-thread fonctionner and reduce JavaScript execution temps — the autre two diagnostics Lighthouse calls out as high-impact pour Speed Index.
• Prioritize above-the-fold content. Speed Index seulement cares à propos de the visible viewport, so getting the premier screen painted fast is the whole game.

Ces overlap almost complètement with FCP and LCP optimization — qui is exactly pourquoi I treat Speed Index as a corroborating signal, pas a separate to-do liste. Avant vous act on quelconque unique number, regarder at the charger filmstrip (Lighthouse and WebPageTest les deux generate un) to confirmer what’s en réalité painting early versus late, and comparer a few repeated, like-for-like runs plutôt que un tester — voir the run-to-run variability remarque ci-dessous.

Limitations worth knowing

• Lab-only — it jamais reflects a réel user’s experience, seulement the tester environment’s.
• Viewport-dependent — it measures the visible area, so mobile and desktop give very différent results (hence the very différent thresholds).
• SPA/AJAX blind spot — single-page apps peut regarder artificially fast: the shell paints quickly pendant que the contenu réel loads plus tard sans une page refresh.
• Carousels, autoplay video, and consent overlays — anything que garde modification pixels après the meaningful content has chargé peut be penalized pour continuing to register as “incomplete,” the même mechanism que penalizes auto-rotating carousels.
• Pas a “fully loaded” metric — it measures above-the-fold visual progression, pas quand every script, image, or below-the-fold element finishes. WebPageTest’s separate Visually Complet metric (toujours ≥ Speed Index) is the un que catches a late lazy-loaded widget.
• Visual progress isn’t proof of usefulness. Speed Index seulement measures pixel modifier contre a final frame — it doesn’t know si what’s on screen is readable, correctement ordered, accessible, or en réalité interactive. A fast-painting skeleton or shell peut score bien pendant que the contenu réel (and the ability to utiliser it) arrives plus tard; that’s the même échec mode as the “meaningless early paint” anti-pattern ci-dessus, simplement décrit from the metric’s side.
• Run-to-run variability. Parce que it’s derived from a unique recorded charger, Speed Index moves with the tester conditions — Google’s propre scoring guidance listes device differences, navigateur extensions, antivirus software, and même ad/A-B-test changements as sources of score fluctuation que have nothing to do with votre code. Comparer distributions from repeated, like-for-like runs, pas one-off numbers.

Connexe metrics

Speed Index lives in the même web performances cluster as the Core Web Vitals hub and its neighbors. It’s closest to Premier affichage de contenu (Speed Index can’t beat FCP) and Plus grand affichage de contenu (même fixes, même root causes), sits alongside Total Blocking Temps in the Lighthouse score, and you’ll meet it à l’intérieur Lighthouse and PageSpeed Insights. Pour the field metrics que en réalité drive rankings, commencer at the Core Web Vitals hub.

AI summary

A condensed prendre on the Avancé version:

• Speed Index = how quickly content is visually affiché during charger — a composite score (average temps visible content apparaît), pas a unique timestamp. Reported in seconds; lower is meilleur.
• Mental model: the area ci-dessus the visual-progress curve (temps vs. % visually complet). Computed from a video of the charger, weighting chaque interval by how incomplete lune page encore is.
• Lab-only: nécessite frame-by-frame screenshots, so it’s pas in CrUX, PageSpeed Insights field données, or Search Console. Utiliser Core Web Vitals pour field données.
• Origin: WebPageTest (Pat Meenan, 2008; metric ~2012). Lighthouse computes it via the open-source Speedline module — même methodology as WebPageTest.
• Pas a Core Web Vital, pas a ranking factor. CWVs are LCP, INP, CLS. The lien to rankings is indirect: fixing Speed Index usually improves FCP/LCP.
• Lighthouse 10 weight: 10% — tied with FCP pour lowest. TBT (30%) and LCP/CLS (25% chaque) matter far plus, so chasing Speed Index alone is low ROI.
• Thresholds (mobile): Bon ≤ 3,4 s, Nécessite improvement ≤ 5,8 s, Poor > 5,8 s; desktop bon ≤ ~1,3 s. It can’t be faster que FCP and is viewport-dependent.
• Fixes = FCP/LCP fixes: faster TTFB, fewer ressources qui bloquent le rendu, font-display: swap, moins main-thread/JS fonctionner, prioritize above-the-fold.
• Limitations: SPAs peut score artificially bien; carousels, autoplay video, and consent overlays peut be penalized; it’s pas a “fully loaded” mesurer; visual progress isn’t proof le contenu is readable, accessible, or usable; and a unique run peut be déplacé by device, extensions, or ad/A-B changements que have nothing to do with votre code.

Documentation officielle

Primary-source documentation pour Speed Index.

Google / Lighthouse

• Speed Index (Lighthouse audit) — the canonical référence: definition, how Lighthouse computes it via Speedline, scoring thresholds, and the optimization audits.
• Lighthouse performances scoring — où the 10% Speed Index weight and the complet metric breakdown live.
• Minimize main-thread fonctionner — un of the three audits Lighthouse flags as high-impact pour Speed Index.
• Reduce JavaScript execution temps — the second flagged audit.
• Garantir text remains visible during webfont charger (font-display) — the third flagged audit.

Origin / implementation

• Speedline (paulirish/speedline) — the open-source module Lighthouse uses to compute Speed Index from DevTools traces.
• Lighthouse source — speed-index.js — the audit’s description constant.
• WebPageTest — À propos de — Pat Meenan créé and open-sourced WebPageTest, où Speed Index originated.

Quotes from the source

On-the-record statements. Chaque Google/Lighthouse lien is a deep lien que jumps to the quoted passage.

Google — ce que Speed Index measures

• “Speed Index measures how quickly content is visually displayed during page load.” — Lighthouse Speed Index audit. Jump to quote

Google — how the score is définir

• “Your Speed Index score is a comparison of your page’s speed index and the speed indexes of real websites, based on data from the HTTP Archive.” — Lighthouse Speed Index audit. Jump to quote

Relayed sources (paraphrased from secondary documentation, pas quoted verbatim)

• Lighthouse captures a video of lune page chargement, computes the visual progression entre frames, and generates the score with the Speedline module — fondé on the même principles as the original WebPageTest Speed Index. (Lighthouse Speed Index audit, computation section.)
• The plus long a frame is visible and the moins complet lune page is at que point, the plus que frame contributes to the score — and parce que tout pre-FCP temps counts at 100%, Speed Index can’t be faster que Premier affichage de contenu. (DebugBear, Speed Index docs.)
• Speed Index is seulement disponible in synthetic/lab testing parce que of the cost of frame-by-frame screenshot processing. (DebugBear, Speed Index docs.)
• The metric was ajouté to WebPageTest autour 2012, on top of the outil Pat Meenan open-sourced in 2008. (KeyCDN; WebPageTest À propos de page.)

Speed Index cheat sheet

Thresholds (Lighthouse 10)

Lighthouse 10 Performances weights

Fast facts

• Measures visual completeness over temps (area ci-dessus the progress curve), pas a unique timestamp. Lower is meilleur.
• Lab-only — pas in CrUX, PSI field données, or Search Console.
• Pas a Core Web Vital; pas a direct ranking factor.
• Peut jamais be faster que FCP (pre-FCP temps counts at 100%).
• Viewport-dependent — mobile and desktop scores differ a lot.
• Computed by Speedline; originated in WebPageTest (Pat Meenan).

Améliorer it (même as FCP/LCP)

• Cut TTFB (faster server réponse).
• Supprimer render-blocking CSS/JS; inline critical CSS.
• font-display: swap / optional so text stays visible.
• Minimize main-thread fonctionner and JS execution temps.
• Prioritize above-the-fold rendering.

Don’t be fooled

• “Under 1,000 ms” is old WebPageTest guidance, pas the Lighthouse mobile bar.
• SPAs peut score artificially bien; carousels peut be penalized.

Outils que report Speed Index

• Lighthouse (in Chrome DevTools, the CLI, or the Node module) — reports Speed Index as un of the five Performances metrics, computed via Speedline.
• PageSpeed Insights — runs Lighthouse and montre Speed Index in the lab (Diagnostics) section. Remarque: the field-data section up top uses Core Web Vitals, so Speed Index jamais apparaît là.
• WebPageTest — où the metric originated; reports Speed Index alongside Visually Complet and filmstrip views, with configurable connection profiles.
• GTmetrix — surfaces Speed Index in its UI, en utilisant WebPageTest données; its numbers won’t match Lighthouse’s parce que of différent device/network simulation.
• DebugBear — synthetic monitoring with a clair frame-by-frame breakdown of how the Speed Index score was computed.

A reminder quand comparing outils: the même page produces différent Speed Index valeurs à travers Lighthouse, WebPageTest, and GTmetrix parce que of leur différent throttling and device assumptions. Comparer comme with comme.

Speed Index mistakes que waste optimization temps

• Appel Speed Index a Core Web Vital. It is a lab-only visual-progress metric, pas a field ranking signal. Utiliser it to diagnose how une page fills in, alors vérifier the réel Core Web Vitals separately.
• Comparing mobile and desktop thresholds. Lighthouse uses différent scoring curves and tester conditions. Track un profile over temps plutôt que treating the two scores as interchangeable.
• Improving the number with a meaningless early paint. A header shell peut faire visual progress commencer précédent pendant que the principal content remains blank. Examiner the charger filmstrip with the metric.
• Optimizing every image avant checking the critical chemin. Slow TTFB, render-blocking CSS, fonts, and synchronous JavaScript peut delay the whole visual sequence. Trouver the premier bottleneck in the waterfall and trace.
• Expecting a stable single-run valeur. Speed Index is derived from a synthetic video and moves with the tester environment. Repeat comparable runs avant declaring a regression or win.

Testez vos connaissances: Speed Index

Five rapide questions on ce que Speed Index measures. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

Official

• Speed Index — Lighthouse audit — the canonical definition, thresholds, and optimization audits.
• Lighthouse performances scoring — the metric weights, notamment Speed Index’s 10%.
• WebPageTest — À propos de — the origin of the metric.

Implementation

• paulirish/speedline — the open-source module Lighthouse uses to compute Speed Index.

From others

• DebugBear — Speed Index — the clearest step-by-step worked exemple of the computation and the FCP relationship.
• KeyCDN — Speed Index — historical context and the WebPageTest formula.
• Catchpoint — Speed Index — heir to the WebPageTest blog; visual-progress formula and the SPA/carousel limitations.
• Recherche Google Central — Core Web Vitals — confirms que LCP, INP, and CLS are the ranking signals; Speed Index n’est pas listed, reinforcing que it has aucun direct ranking impact.
• web.dev — Vitals overview — the authoritative definition of Core Web Vitals (LCP, INP, CLS); Speed Index is absent, utile quand explaining pourquoi it doesn’t affecter rankings.
• WebPageTest — Speed Index documentation — background on Pat Meenan’s creation of WebPageTest (open-sourced 2008) and où the Speed Index metric originated.

Numbers worth citing

• Lighthouse weight: 10% of the Performances score in Lighthouse 10 — tied with FCP pour the lowest weight, bien behind TBT (30%) and LCP/CLS (25% chaque). Source
• Mobile “Good” ≤ 3,4 s; desktop “Good” ≤ 1,3 s — Lighthouse 10 thresholds, calibrated contre HTTP Archive real-website données. Source
• Speed Index ≥ FCP, toujours — tout temps avant premier content paints contributes at 100%, so Speed Index can’t come in faster que Premier affichage de contenu. Source
• Origin: WebPageTest, ~2012 — ajouté on top of the outil Pat Meenan open-sourced in 2008. Source

Journal des modifications