Largest Contentful Paint optimieren

Der Largest Contentful Paint ist ein wichtiger Bestandteil der drei Kennzahlen, die als Core Web Vitals bezeichnet werden. Die Optimierung dieser Kennzahlen führt zu einer besseren Ladezeit, welche auch Auswirkungen auf das Google Ranking hat.

In diesem Blogbeitrag erklären wir, was genau mit dem Largest Contentful Paint gemessen wird und wie diese Zeit optimiert werden kann.

Mit dem Largest Contentful Paint wird die Zeitspanne zwischen dem Laden einer Website durch den Nutzer und dem Rendering des größten Elements im Darstellungsbereich gemessen. Ziel ist, dass das größte Element im Darstellungsbereich so schnell wie möglich geladen wird. Wichtig dabei ist, dass der Largest Contentful Paint nur Elemente wie Texte, Bilder oder Videos misst, die für den Nutzer ohne Scrollen sichtbar sind.

Die gesamte Zeit des Largest Contentful Paints kann dabei in vier Teilbereiche untergliedert werden:

Die Ladezeit der LCP-Ressource sollte dabei den Großteil der Teilbereiche einnehmen. Ist das nicht der Fall, sollte der Bereich, der den Großteil der Largest Contentful Paint Kennzahl einnimmt, optimiert werden.

Bevor mit der Optimierung des Largest Contentful Paints begonnen wird, sollte erst festgestellt werden, ob zurzeit ein Problem vorliegt. Diese Kennzahl kann mit mehreren Tools gemessen werden. In der Berechnung wird zwischen Daten von echten Nutzer:innen und Labordaten unterschieden. Um den LCP richtig auszuwerten, ist beides notwendig.

Vor der Optimierung des Largest Contentful Paint Werts sollte geprüft werden, in welchem Teilbereich aktuell Probleme bestehen. Die Optimierungsmaßnahmen unterscheiden sich dabei pro Teilbereich.

Die Time to First Byte kann von Entwicklern meist nur wenig beeinflusst werden, da sie vor allem von der Infrastruktur abhängig ist. Ziel ist es hier, dass die ersten Bytes so schnell wie möglich gesendet werden.

Optimierungsmöglichkeiten für die Time to First Byte

Server prüfen: Der erste Schritt, um die Time to First Byte zu optimieren, ist die Prüfung des Hostings. Hier muss der Arbeitsspeicher geprüft werden, der einer Instanz zugewiesen ist. Auch sollte geprüft werden, ob das Backend auf dem neuesten Stand ist.

Content Delivery Network verwenden: Eine weitere Möglichkeit, die Time to First Byte zu optimieren, ist die Verwendung eines Content Delivery Networks (CDN). Wenn die Distanz vom Nutzer zum Ursprungsserver zu weit ist, kann das ein Problem für die Time to First Byte sein. Ein CDN arbeitet mit einem verteilten Netzwerk an Servern, welche die physische Distanz zwischen Nutzer und Server deutlich reduzieren können.

Effizientes Caching implementieren: Besonders für Websites mit vielen statischen Inhalten ist die Einrichtung von Caching eine weitere Maßnahme, um die Time to First Byte zu senken. Durch effizientes Caching führt nur die erste Abfrage eines Nutzers zum Ursprungsserver. Ruft der Nutzer dieselben Inhalte wiederholt auf, werden diese direkt aus dem Cache generiert. Im Cache wird dabei immer ein “Ablaufdatum” mitgegeben. Ist dieses erreicht, löst eine erneute Abfrage des Nutzers wieder eine Abfrage auf dem Ursprungsserver aus.

Weiterleitungen vermeiden: Bei Weiterleitungen wird der Browser in der ersten HTTP-Abfrage darüber informiert, dass der gesuchte Inhalt an einem anderen Ort verfügbar ist. In diesen Fällen sind zwei HTTP-Abfragen nötig, damit der Browser die Inhalte korrekt darstellen kann. Durch die zusätzliche Abfrage verlängert sich auch die Time to First Byte.

In diesem Schritt wird gemessen, wann das Laden der Largest Contentful Paint Resource beginnt. Optimalerweise sollte das Laden der LCP-Ressource gleichzeitig mit der ersten Ressource beginnen.

Optimierungsmöglichkeiten für die Verzögerung beim Laden der LCP-Ressource

Elemente auffindbar machen: Der Browser kann nur Ressourcen laden, die als solche erkannt werden. Beispiele für Ressourcen, die nicht erkannt werden, sind Bilder, die dynamisch über Javascript eingebunden sind, Elemente, die über Javascript-Bibliotheken eingebunden sind und daher kein “scr”- oder “srcset”-Attribut enthalten, oder Elemente, die über ein CSS-Hintergrundbild eingebunden sind.

Ressourcen vorab laden: Wird eine externe Ressource als Largest Contentful Paint Element erkannt, sollte diese über einen rel=”preload” Link vorab geladen werden.

Nachladen von Elementen: Mit der Lazy Loading Technik können Bilder, die ohne Scrollen nicht sichtbar sind, erst geladen werden, sobald der Nutzer das Element sieht. Bei der Berechnung des Largest Contentful Paints werden jedoch nur Inhalte bewertet, die ohne Scrollen sichtbar sind. Der Largest Contentful Paint sollte immer ohne Lazy Loading geladen werden, damit die Verzögerung so kurz wie möglich bleibt.

Prioritäten anpassen: Mit dem fetchpriority-Attribut kann die Ladepriorität von Bildern priorisiert werden. Dabei sollte jeweils nur das Bild, welches als Largest Contentful Paint Element erkannt wird, das Attribut “fetchpriority=’high’” enthalten.

In diesem Schritt geht es rein um die Ladezeit des Largest Contentful Paint Elements. Dabei gilt grundsätzlich: kleinere Elemente werden schneller übertragen.

Optimierungsmöglichkeiten für die Ladezeit der LCP-Ressource

Bereits erwähnte Optimierungen wie die Verwendung von Content Delivery Networks, das Anpassen der Prioritäten sowie das Einrichten von effizientem Caching wirken sich auch positiv auf die Ladezeit des Largest Contentful Paint Elements aus.

Bilder in der richtigen Größe bereitstellen: Wenn ein Browser ein Bild lädt, hängt die Größe auch vom gewählten Format ab. Ist das gewählte Format größer als das Bild auf der Website dargestellt, werden für das Bild mehr Bytes benötigt als notwendig.

Bilder komprimieren: Die Größe von Bildern kann durch effiziente Komprimierung oftmals verringert werden. Die Bildqualität bleibt dabei dieselbe, mit freiem Auge sind keine Unterschiede zu erkennen.

Verwenden von modernen Bildformaten: Moderne Bildformate sind darauf ausgelegt, möglichst wenig Speicherplatz zu verwenden. Wir empfehlen dabei das webP-Format von Google.

Ziel dieses Schrittes ist es, dass das Largest Contentful Paint Element angezeigt wird, sobald es fertig geladen wurde. Oftmals wird das Rendering des LCP blockiert. Das kann mehrere Gründe haben.

Optimierungsmöglichkeiten für die Verzögerung beim Rendering des LCP

Stylesheets und JS Dateien nicht HTML-Head im hinterlegen: Oftmals wird das Rendering durch Stylesheets, die im eingebunden sind, blockiert. Bevor das Rendering beginnen kann, müssen alle Ressourcen im geladen werden. Um dies zu beheben, können kleinere Stylesheets eingebaut werden. Eine andere Lösung ist das Hinterlegen von inline-Stylesheet, ohne die externe Quelle aufzurufen.

Serverseitiges Rendering verwenden: Mit dem serverseitigen Rendering werden die Inhalte bereits am Server in leichter lesbare Informationen umgewandelt. Dadurch wird weniger Javascript benötigt, und das LCP-Element kann früher geladen werden.

Bilder werden häufig unkomprimiert hochgeladen und nehmen daher sehr viel Speicherplatz ein. Daher sind Bilder häufig das Largest Contentful Paint Element. Um das zu verhindern, muss die Größe der Bilder reduziert werden. Dazu sollte das Bild in der richtigen Größe dargestellt werden, ein modernes Dateiformat verwenden (wir empfehlen das webP-Format) und komprimiert werden.

Besonders häufig werden Bilder, die in CSS als Hintergrundbild verwendet werden, als Largest Contentful Paint einer URL erkannt. Diese Bilder sind für den Browser nur schwer auffindbar, weil sie meist keine “src” - Attribute verwenden. Diese Bilder sollten, wie im HTML Format definiert, mit <img> Tags eingebunden werden, damit sie früher vom Browser erkannt werden können.

Die Largest Contentful Paint Kennzahl ist ein Bestandteil der Core Web Vitals Kennzeichen, die verwendet werden, um die Seitenladezeit einer Website zu messen. Aber auch für Benutzerfreundlichkeit einer Website ist es schädlich, wenn die Website zu lange lädt.

Um die Seitenladezeit einer Website zu analysieren, muss erstmal festgestellt werden, ob und in welchen Bereichen Probleme bestehen. Wird ein Problem mit dem Largest Contentful Paint ermittelt, sollte dieses Element im ersten Schritt untersucht werden. Ist das Element in der Größe eingebunden, in der es auf der Website angezeigt wird? Ist das Element komprimiert? Wird ein modernes Datenformat verwendet? Erst wenn diese Fragen mit “Ja” beantwortet werden können, sollten die weiteren in diesem Beitrag erwähnten Optimierungen vorgenommen werden.

JETZT UNVERBINDLICH ANFRAGEN!