Die Analytics zeigen, dass deine Landingpage auf Mobile einen LCP von fünf Sekunden hat, auf deinem Laptop fühlt sie sich aber gut an. Wie gehst du das an?

Starte bei den Felddaten, nicht bei deinem Rechner: finde heraus, welches Element das LCP-Element ist, und zerleg die Zeit in Time to First Byte, Resource Load Delay, Resource Load Time und Render Delay. Das sagt dir, ob das Problem die Serverantwort, das späte Entdecken des Bildes, die Bildgröße selbst oder ein blockierter Main Thread ist. Danach drosselst du lokal auf ein Mittelklasse-Gerät und ein langsames Netz, damit du reproduzieren kannst, bevor du irgendetwas änderst.

Zuerst höre ich auf, meinem Laptop zu trauen. Ich hole die Felddaten, um zu sehen, welches Element tatsächlich das LCP-Element ist und auf welchen Seiten, dann reproduziere ich lokal mit CPU-Drosselung und langsamer Verbindung. Danach zerlege ich die Zahl, weil jeder Teil einen anderen Fix hat. Dominiert die Time to First Byte, ist es ein Server- oder Caching-Problem, und keine Bildarbeit der Welt hilft. Gibt es ein langes Load Delay, wird das Bild spät entdeckt, meist weil es in CSS gesetzt oder per JavaScript eingefügt wird, ich packe es also ins HTML mit fetchpriority high und preloade es. Dominiert die Load Time, ist es die Datei, also modernes Format, korrekte Abmessungen und ein ordentliches srcset. Ist es Render Delay, ist der Main Thread mit Script-Parsing beschäftigt. Genau das hatte ich mal, als das Hero-Bild loading lazy hatte, was ausgerechnet das eine Bild verzögert hat, das nicht verzögert werden darf. Das zu entfernen und fetchpriority high zu setzen, hat LCP auf gedrosseltem Mobile von etwa 4,8 Sekunden auf 2,1 gebracht.