Anzeige
Anzeige
Ratgeber
Artikel merken

Google Page Experience: Optimierungsansätze für gute „Core Web Vitals“-Scores

Gerade noch mal Glück gehabt: Googles Page-Experience-Update wurde auf Mitte Juni verschoben. Jetzt heißt es, die Schonfrist auszunutzen.

Von Lara Meyer
5 Min. Lesezeit
Anzeige
Anzeige

Googles Page-Experience-Update wurde auf Mitte Juni verschoben. Jetzt heißt es, die Schonfrist auszunutzen. (Foto: Shutterstock)

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.

Largest Contentful Paint (LCP) – Renderzeiten verkürzen

Anzeige
Anzeige

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.

Anzeige
Anzeige

Verwendung des PRPL-Musters

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:

Anzeige
Anzeige
  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.

Bildoptimierung

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.

Nutzung von Web-Schriftarten

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:

Anzeige
Anzeige
  • 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.

First Input Delay (FID) – Interaktivität der Website verbessern

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.

Reduzierung der Auswirkungen durch Code von Drittanbietern

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.

Verringerung der Ausführungszeit von JavaScript

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:

Anzeige
Anzeige
  • 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.

Minimierung der Anzahl an Anfragen und Übertragungsgrößen

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.

Cumulative Layout Shift (CLS) – visuelle Stabilität auf der Website garantieren

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:

Anzeige
Anzeige
  • 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

Fazit

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige