Speed Index gibt an, wie schnell Inhalt tatsächlich visuell dargestellt wird. Dazu wird während des Ladens der Seite ein Video aufgezeichnet und anschließend werden die Frames verglichen.
Zur Bewertung zieht Lighthouse das Speedline Node.js-Modul von Paul Irish heran, welches den visuellen Fortschritt mittels struktureller Ähnlichkeit (SSIM) bemisst. SSIM ist ein Algorithmus um das Qualitätsempfinden von Menschen in Bezug auf visuelle, digitale Medien einschätzen zu können. Heutzutage gibt es mit PSNR bzw. PSNR-HVS-M Algorithmen, die dieses Empfinden noch besser einschätzen können.
Wo ist der Unterschied von Speed Index zu FCP oder LCP?
FCP und LCP sind erstmal rein technische Metriken, die auf APIs bzw. Browser-Events basieren. So gab und gibt es durchaus Mittel und Wege gute FCP- und LCP-Werte zu erlangen, die aber an einer guten User Experience (UX) vorbei gehen. Nehmen wir beispielsweise ein LCP-Bild, das im webp- oder JPEG-Format vorliegen kann. Ein progressiv geladenes JPEG kann für die UX besser sein, weil früher ein Bild auf dem Display sichtbar wird. Es wird nach und nach in Schritten detailreicher. Ein progressives JPEG hat allerdings eine größere Dateigröße als ein Bild im webp-Format, weshalb das Load-Event erst später kommen wird – das Load-Event ist allerdings ausschlaggebend für die LCP-Metrik. Das Bild im webp-Format hingegen kann nicht progressiv geladen werden, hat jedoch eine bessere Kompression und wird daher schneller das finale Load-Event absetzen. Ein*e User*in sieht das Bild allerdings erst, wenn es komplett geladen ist, was später ist, als das progressive JPEG. Das Resultat ist eine bessere Performance-Metrik, aber eine schlechtere UX. (Dieses Beispiel ist übrigens nicht aus der Luft gegriffen, es gibt dazu ein GitHub-Issue, ob LCP angepasst werden sollte, um progressive loading zu berücksichtigen.)
Speed Index hingegen versucht die UX-Brille aufzusetzen und bewertet rein aus visuellen Gesichtspunkten ohne irgendwelche Browser-Events oder -APIs zu berücksichtigen.
Wieso ist mein Speed Index schlecht?
Das ist beim Speed Index nicht so eindeutig. Wie oben gezeigt kann die Verbesserung einer anderen Metrik, je nachdem wie das erreicht wurde, eine Verschlechterung des Speed Index nach sich ziehen. Alle Performance-Verbesserungen zahlen aber prinzipiell auf den Speed Index ein. Ist die Seite schnell geladen und visuell stabil wird auch der Speed Index gut sein. Dem First View ist hier besondere Aufmerksamkeit zu schenken.