Mit dem LCP wird die Zeit angegeben vom Beginn des Pageloads bis zum Anzeigen des größten Inhalts-Elements im Viewport. Das ist häufig ein Bild, kann aber auch durchaus Text sein. Bei Bildern werden <img>, <svg> mit <image> und bei <video> das Poster-Image (<video poster="url">) berücksichtigt. Via CSS muss ein Bild mit url() geladen werden um für den LCP in Frage zu kommen. Bei skalierten Bildern greift der kleinere Wert: Ein hochskaliertes Bild zählt nur mit seiner ursprünglichen Größe, ein runterskaliertes Bild zählt mit seiner skalierten Größe.
Währende des Ladens einer Seite kann es mehrere LCPs geben, beispielsweise weil ein Bild erst nach dem Text gerendert wird. Für den Wert der Metrik zählt am Ende der letzte, gemeldete LCP. Dabei kann auch ein Element als LCP gelten, obwohl es im Verlauf des Seitenaufbaus wieder aus der Seite entfernt wird. Wenn nicht noch ein größeres Element auftaucht bleibt das zuletzt gemeldete Element als LCP bestehen.
Wieso ist mein LCP schlecht?
Bei Bildern kann es ein langsamer Server sein, eine große Bilddatei bzw. schlechte Kompression oder auch ein nicht optimierter Critical Rendering Path. Handelt es sich bei dem LCP um einen Textblock ist ein spät ladender Web-Font ein guter Kandidat in Verbindung mit einer schlechten font-display-Strategie.