Largest Contentful Paint

« Back to Glossary Index

Largest Contentful Paint (LCP) ist eine Google-Kennzahl für die Nutzererfahrung, die 2021 zu einem Rankingfaktor wurde.

Was ist Largest Contentful Paint?

LCP ist eine Messgröße, die angibt, wie lange es dauert, bis der Hauptinhalt einer Seite heruntergeladen und für die Interaktion bereit ist.

Gemessen wird das größte Bild oder der größte Kontextblock innerhalb des Benutzerfensters. Alles, was über den Bildschirm hinausgeht, zählt nicht.

Typische Elemente, die gemessen werden, sind Bilder, Videoposter, Hintergrundbilder und Textelemente auf Blockebene wie Absatz-Tags.

Warum wird LCP gemessen?

LCP wurde als Schlüsselkennzahl für den Core Web Vitals Score ausgewählt, weil sie genau misst, wie schnell eine Webseite genutzt werden kann.

Außerdem ist sie leicht zu messen und zu optimieren.

Elemente auf Blockebene für die Berechnung des LCP-Scores

Elemente auf Blockebene, die für die Berechnung des Largest Contentful Paint Scores verwendet werden, können die <main> und <section> Elemente sowie die heading, div und form Elemente sein.

Jedes HTML-Element auf Blockebene, das Textelemente enthält, kann verwendet werden, solange es das größte Element ist.

Es werden nicht alle Elemente verwendet. Zum Beispiel werden die SVG- und VIDEO-Elemente derzeit nicht für die Berechnung des Largest Contentful Paint verwendet.

LCP ist eine einfach zu verstehende Kennzahl, denn du musst dir nur deine Webseite ansehen und den größten Textblock oder das größte Bild bestimmen und ihn dann optimieren, indem du ihn verkleinerst oder alles entfernst, was ein schnelles Herunterladen verhindern würde.

Da Google die meisten Websites in den Mobile-First-Index aufnimmt, ist es am besten, zuerst den mobilen Viewport und dann den Desktop zu optimieren.

Große Elemente zu verzögern, kann nicht helfen

Manchmal wird eine Webseite in Teilen gerendert. Ein großes Bild braucht vielleicht länger zum Herunterladen als das größte Textelement auf Blockebene.

In diesem Fall wird ein PerformanceEntry für das größte Textblock-Level-Element protokolliert.

Wenn das Bild am oberen Rand des Bildschirms geladen wird und dieses Element mehr Platz auf dem Bildschirm des Nutzers (seinem Viewport) einnimmt, wird für dieses Bild ein weiteres PerformanceEntry-Objekt gemeldet.

Bilder können für LCP-Bewertungen problematisch sein

Web-Publisher laden Bilder häufig in ihrer Originalgröße hoch und verwenden dann HTML oder CSS, um die Größe des Bildes zu ändern, damit es in einer kleineren Version angezeigt wird.

Die Originalgröße ist das, was Google als “intrinsische” Größe des Bildes bezeichnet.

Wenn ein Publisher ein Bild mit einer Breite von 2048 Pixeln und einer Höhe von 1152 Pixeln hochlädt, gelten diese 2048 x 1152 Pixel Höhe und Breite als die “eigentliche” Größe.

Wenn der Anbieter das 2048 x 1152 Pixel große Bild nun auf 640 x 360 Pixel verkleinert, wird das 640×360 große Bild als sichtbare Größe bezeichnet.

Für die Berechnung der Bildgröße verwendet Google die kleinere Größe zwischen der eigentlichen und der sichtbaren Größe des Bildes.

Hinweis zu Bildgrößen

Es ist möglich, mit einem großen Bild, das mit HTML oder CSS verkleinert wurde, eine hohe Punktzahl für das größte inhaltsreiche Bild zu erreichen.

Am besten ist es jedoch, wenn die eigentliche Größe des Bildes der sichtbaren Größe entspricht.

Das Bild wird schneller heruntergeladen und dein Largest Contentful Paint Score wird steigen.

Wie LCP mit Bildern umgeht, die von einer anderen Domain bereitgestellt werden

Bilder, die von einer anderen Domain bereitgestellt werden, z. B. von einem CDN, werden bei der Berechnung des Largest Contentful Paint in der Regel nicht berücksichtigt.

Publisher, die diese Ressourcen in die Berechnung einbeziehen möchten, müssen einen so genannten Timing-Allow-Origin-Header setzen.

Das Hinzufügen dieses Headers zu deiner Website kann knifflig sein, denn wenn du einen Platzhalter (*) in der Konfiguration verwendest, könnte deine Website für Hacking-Events anfällig sein.

Um es richtig zu machen, musst du eine Domain hinzufügen, die für den Crawler von Google spezifisch ist, damit er die Zeitinformationen von deinem CDN sehen kann.

Zu diesem Zeitpunkt werden Ressourcen (wie Bilder), die von einer anderen Domain (z. B. von einem CDN) geladen werden, bei der LCP-Berechnung nicht berücksichtigt.

Vorsicht vor diesen “Tücken” bei der Punktevergabe

Alle Elemente, die sich auf dem Bildschirm des Nutzers (dem Viewport) befinden, werden zur Berechnung des LCP herangezogen. Das bedeutet, dass Bilder, die außerhalb des Bildschirms gerendert werden und sich dann in das Layout verschieben, sobald sie gerendert sind, nicht in die Wertung für das größte inhaltsreiche Bild einfließen.

Umgekehrt können Elemente, die zunächst im Viewport des Nutzers liegen und dann aus dem Bildschirm verschoben werden, in die LCP-Berechnung einfließen.

Wie man die LCP-Punktzahl erhält

Es gibt zwei Arten von Wertungswerkzeugen. Die erste Art nennt sich Field Tools und die zweite Art heißt Lab Tools.

Feldwerkzeuge sind tatsächliche Messungen eines Standorts.

Die Labor-Tools geben eine virtuelle Punktzahl an, die auf einem simulierten Crawl mit Algorithmen basiert, die die Internetbedingungen simulieren, die ein typischer Nutzer auf einem Handy vorfinden könnte.

Wie optimiere ich für die größte Inhaltsmenge?

Es gibt drei Hauptbereiche für die Optimierung (plus einen weiteren für JavaScript-Frameworks):

  1. Langsame Server.
  2. Rendering-blockierende JavaScript und CSS.
  3. Langsame Ressourcenladezeiten.

Ein langsamer Server kann auf einem Shared- oder VPS-Host ein Problem mit DDOS-Angriffen und Scraper-Traffic darstellen. Du kannst Abhilfe schaffen, indem du ein WordPress-Plugin wie WordFence installierst, um herauszufinden, ob du einem massiven Ansturm ausgesetzt bist, und ihn dann zu blockieren.

Ein anderes Problem könnte die Fehlkonfiguration eines dedizierten Servers oder VPS sein. Ein typisches Problem kann die Menge an Speicher sein, die PHP zugewiesen wird.

Ein anderes Problem könnte eine veraltete Software sein, wie eine alte PHP-Version oder eine veraltete CMS-Software.

Das schlimmste Szenario ist ein gemeinsam genutzter Server mit vielen Nutzern, die deinen Rechner ausbremsen. In diesem Fall ist ein Wechsel zu einem besseren Hoster die Lösung.

In der Regel helfen Maßnahmen wie das Hinzufügen von Caching, das Optimieren von Bildern, das Beseitigen von CSS und JavaScript, die das Rendern blockieren, und das Vorladen bestimmter Inhalte.

Google hat einen guten Tipp für den Umgang mit CSS, das für die Darstellung der Nutzer/innen nicht unbedingt erforderlich ist:

“Entferne alle ungenutzten CSS vollständig oder verschiebe sie in ein anderes Stylesheet, wenn sie auf einer anderen Seite deiner Website verwendet werden.

Für alle CSS, die nicht für das erste Rendering benötigt werden, verwende loadCSS, um Dateien asynchron zu laden, was rel=”preload” und onload nutzt.

<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet'”>”

Fieldtools für den LCP Score

Google listet drei Feldwerkzeuge auf:

  • PageSpeed Insights.
  • Search Console (Core Web Vitals Bericht).
  • Chrome User Experience Report.

Der letzte Bericht – Chrome User Experience Report – erfordert ein Google-Konto und ein Google Cloud Project. Die ersten beiden sind unkomplizierter.

Lab Tools für LCP Score

Lab-Messungen sind simulierte Scores.

Google empfiehlt die folgenden Tools:

  • Chrome DevTools.
  • Lighthouse.
  • WebPageTest.org.

Die ersten beiden Tools werden von Google bereitgestellt. Das dritte Tool wird von einer dritten Partei bereitgestellt.

« Back to Glossary Index

Mit Spitzenpositionen zum neuen Umsatzkanal.

Lass Google für Dich arbeiten, denn aus Besuchern werden Kunden.

Über den Autor

Dein kostenfreies Geschenk!

Das SEO Praxisbuch
2022

Du willst mehr Besucher und bessere Google Rankings?

Lad dir jetzt kostenlos das SEO Praxisbuch
“Die 7 SEO Sünden” herunter.