In diesem Beitrag konntet ihr bereits mehr darüber erfahren, worum es bei dem kommenden Update geht und was es mit den Core Web Vitals auf sich hat. Aus diesem Grund wird es Zeit, herauszufinden, wie die entsprechenden Werte optimiert werden können.

Wann ist der Hauptinhalt der Website geladen? Mit dieser Frage befasst sich die Metrik Largest Contentful Paint (LCP). Über den entsprechenden Wert seht ihr somit, wie hoch die Renderzeit des größten Bild- oder Textblocks der Website ist. Eine langsame Renderzeit kann unterschiedliche Gründe haben:

• Langsame Server-Antwortzeiten
• Render-blockierendes JavaScript und CSS
• Ladezeiten der Ressourcen
• Client-seitiges Rendern

Um diese Einflussfaktoren zu verbessern, gibt es verschiedene Maßnahmen.

PRPL ist ein Akronym und steht für „Push (oder Preloading) – Rendering – Pre-Cache – Lazy Loading“. Diese Vorgehensweise beschreibt, wodurch Websites schneller geladen werden. Somit sind folgende vier Schritte wichtig:

1. Vorladen kritischer Ressourcen: Durch eine Priorisierung der Ressourcen könnt ihr dem Browser mitteilen, welche Ressourcen zuerst geladen werden sollen.
2.  Schnellstmögliches Rendern der ursprünglichen Route: Durch serverseitiges Rendern des HTML-Codes werden dem Benutzer sofort Inhalte der Website angezeigt.
3. Abrufen von Assets aus dem Cache und nicht vom Server: Durch einen Zugriff auf Assets aus dem Cache sind Inhalte der Website schneller geladen und Nutzer können rascher mit der Seite interagieren.
4. Vermeidung von Lazy Loading: Durch eine kleinere JavaScript-Nutzlast, die nur den Code enthält, wird die Größe des Lazy-Load-Chunks minimiert. Das ermöglicht eine schnellere Ladezeit der Website.

Bilder sind häufig das größte Element einer Website, aber sie sorgen für lange Ladezeiten. Deshalb ist es ratsam, Bilder zu optimieren beziehungsweise zu komprimieren. Das hat direkten Einfluss auf den LCP-Score. Die wichtigsten Tipps im Hinblick auf eine gelungene Bildoptimierung sind deshalb:

• Verwendung von Bildern nur dann, wenn sie für den Inhalt wichtig und relevant sind.
• Komprimierung von Bildern – das geht beispielsweise ganz einfach online mit ILoveIMG oder CompressJPEG.
• Konvertierung in neuere Formate (JPEG 2000, JPEG XR, WebP).
• Verwendung eines Image-CDN, um die Ladezeit zu beschleunigen.

Auch in Bezug auf Schriften gibt es Optimierungspotenzial, denn Fakt ist: Auch Schriftarten sind große Dateien. Deshalb benötigen auch sie einige Zeit, um geladen zu werden. Mithilfe von Webfonts kann dieser Prozess beschleunigt werden. Hierfür solltet ihr jedoch einige Dinge beachten:

• Vermeidung von unsichtbaren Texten: Einige Browser verbergen Texte so lange vor den Nutzern, bis die Schriftart geladen ist. Um das zu vermeiden, können Systemschriften helfen.
• Reduzierung der Webfont-Größe: Mithilfe von GZIP oder einem kompatiblen Kompressor können Schriftarten komprimiert werden.
• Optimierung des Ladens und Renderns von Webfonts: Ein Vorladen beziehungsweise eine Priorisierung der Web-Schriftart kann helfen, um die benötigten Ressourcen zur richtigen Zeit zur Verfügung zu haben. Das sorgt dafür, dass es beim Laden nicht zu Verzögerungen kommt.

Der First Input Delay, zu deutsch die erste Eingangsverzögerung, misst, wie lange es dauert, bis ein Nutzer mit der Website interagieren kann beziehungsweise bis die Seite auf die erste Eingabe des Users reagiert.

In manchen Fällen müssen im HTML-Code Skripte von Drittanbietern hinzugefügt werden. Das ist beispielsweise bei Schaltflächen für soziale Medien der Fall oder wenn die Seite Teil eines Werbenetzwerks ist. Diese Skripte können aber die Leistung beim Laden beeinflussen und sich somit negativ auf den FID-Score auswirken. Es ist deshalb relevant, eben diese Skripte zu identifizieren. Das funktioniert unter anderem mit den Chrome Devtools. Das Beste daran: Das Tool spuckt nicht nur langsame Skripte aus, sondern gibt auch direkt Optimierungsstrategien an die Hand.

Lange Ladezeiten von JavaScript können sich in vielerlei Hinsicht negativ auswirken. In erster Linie verursacht es aber unnötige Kosten, da es zur Übertragung von einer erhöhten Byte-Zahl, mehr benötigtem Speicher et cetera führt. Aus diesem Grund gibt es einige Möglichkeiten, um JavaScript zu beschleunigen. Dazu gehören:

• Implementierung einer Code-Aufteilung: Es wird nicht das gesamte JavaScript auf einmal an den Benutzer geschickt, sondern sukzessiv in separaten Teilen. Dadurch wird zu Beginn nur das gesendet, was erforderlich ist, um erste Interaktionen ausführen zu können. Erst danach folgt der Rest.
• Minimierung und Komprimierung des Codes: Beides reduziert die Nutzerlast, was wiederum die Ladezeit verbessert.
• Entfernung von nicht verwendetem Code.

Je nach angefordertem Web-Element verändert sich die Ladezeit. Die Auswirkungen der Anfragen und Übertragungsgrößen müssen deshalb auf Ressourcentypen heruntergebrochen werden.

1. CSS und JavaScript:
   Immer wenn CSS- oder JavaScript-Dateien angefordert werden, wird das Rendern standardmäßig blockiert. Das führt zu Verzögerungen beim Laden. Hier setzen die drei oben genannten Tipps an: Optimierung des JavaScript, der Skripte von Drittanbietern und des CSS.
2. Bilder:
   Häufig verzögert sich die Fertigstellung des Bildes beim Laden einer Website. Bildoptimierungen helfen deshalb, die Ladezeit zu verbessern.
3. Schriftarten:
   Unsichtbarer Text entsteht dann, wenn Schriftdateien nicht effizient geladen werden können. Deshalb sollten Webfonts zwingend optimiert werden. Weiter oben sind hierzu Tipps.
4. Dokumente:
   Große (HTML-)Dateien sorgen dafür, dass der Browser mehr Zeit benötigt, um die Seite aufzubauen. Achtet deshalb auf angemessene und optimierte Dokumentgrößen.
5. Medien:
   Animierte Dateien sind häufig sehr groß. GIFs sollten deshalb durch klassische Videos ersetzt werden, um die Datenmenge zu reduzieren und die Animation schneller zu laden.

Die CLS-Metrik betrachtet die Layout-Stabilität einer Website. Dabei werden unerwartete Verschiebung unter die Lupe genommen, die zu einer schlechten Nutzererfahrung führen. Das ist häufig der Fall, wenn Ressourcen asynchron laden. Das kann an folgenden Problemen liegen:

• Bilder oder Videos laden mit unbekannten Abmessungen.
• Schriftarten sind größer oder kleiner als der Fallback.
• Anzeigen oder Widgets von Drittanbietern ändern ihre Größe dynamisch.

Optimierungsansätze für den CLS-Wert sind folglich:

• Größenattribute bei Bildern und Videoelementen sorgen dafür, dass der erforderliche Speicherplatz bereits im Browser reserviert ist. So sind Seitenverhältnisse festgelegt und andere Elemente laden nicht in diesem Bereich.
• Für Anzeigen lohnt es sich ebenfalls einen statischen Anzeigenplatz zu sichern. Dabei sollte der größtmögliche Platz reserviert werden, um sicherzustellen, dass Anzeigen auch tatsächlich ausgespielt werden können und sichtbar sind. Alternativ könnt ihr auch entsprechend eurer Erfahrungswerte und historischer Daten die wahrscheinlichste Größe der Anzeige reservieren. Auch für Widgets und Text-Elemente sind Platzreservierungen nützlich, um Verschiebungen zu vermeiden.

Ebenfalls interessant: Core Web Vitals: Nur 3 Prozent der deutschen Websites erreichen einen guten Messwert

Viele der Optimierungen wirken sich ganzheitlich aus und sind deshalb Metriken-übergreifend. Das heißt im Klartext: Werden beispielsweise Bilder optimiert, hat das ebenfalls einen positiven Effekt auf alle Core-Web-Vitals-Kennzahlen. Es lohnt sich deshalb, die letzten Wochen bis zum Start des Page-Experience-Updates zu nutzen, um sich auf die Einführung der Core Web Vitals vorzubereiten. So vermeidet ihr Abstrafungen oder Rankingverluste.