morefire
MENÜ

Core Web Vitals verbessern – Ein praxisnaher Guide für 2021

Eine gute Nutzererfahrung ist für eine erfolgreiche Webseite unabdingbar.
Mit den Core Web Vitals hast du die Möglichkeit wichtige Faktoren für die eine gute Nutzererfahrung zu optimieren. Die Analyse und Optimierung ist jedoch teilweise sehr technisch, was viele Webseitenbetreiber:innen abschreckt.
In diesem Guide erfährst Du die wichtigsten Aspekte der Core Web Vitals. Du erfährst, wie Du diese Schritt für Schritt verbessern kannst ohne ein Entwickler zu sein.

Was sind die Core Web Vitals und warum sind diese wichtig?

Bei den Core Web Vitals handelt es sich um drei nutzerzentrierte Metriken, die im Frühjahr 2020 eingeführt wurden. Diese sind grundsätzlich dem Thema “Ladezeit von Webseiten” zuzuordnen. Hier unser Guide zur Pagespeed Optimierung.
Ziel dieser Metriken ist die Bewertung der Nutzererfahrung anhand der Faktoren Ladegeschwindigkeit der Webseite, Interaktivität des Browsers und Stabilität des Layouts. Diese wirken sich maßgeblich auf die User Experience aus.
Die Core Web Vitals haben im Zuge des Google Page Experience Updates im Juni 2021 Einfluss auf das Google Ranking einer Webseite. Dennoch sollten die drei Metriken nicht als reine SEO-Faktoren gesehen werden.
Eine gute Nutzererfahrung kann sich ebenso positiv auf die Conversion Rate und damit den generierten Umsatz auswirken. Ebenso dürfte sich der Qualitätsfaktor in Google Ads verbessern, was günstigere Klickpreise zur Folge hat.

Was Du wissen musst

Grundsätzlich gibt es zwei Möglichkeiten zur Erfassung der Core Web Vitals und anderer PageSpeed Metriken. Welche das sind, wie sich diese unterscheiden und welche Vor- bzw. Nachteile beide jeweils haben, zeigt folgende Tabelle:

LabordatenFelddaten
ErklärungWerden in einer kontrollierten Testumgebung erfasst.
Faktoren wie Endgerät und Verbindung können
selbst definiert werden.
Werden anonymisiert im Google Chrome Browser
bei realen Nutzern erfasst und dann von
Google weiterverarbeitet.
Vorteile
  • reproduzierbar
  • ideal für Fehleranalyse und Testing
  • Messwerte von realen Nutzern 
  • ideal als KPI
Nachteile
  • nicht zwangsläufig repräsentativ
  • erfasst nicht alle Core Web Vitals
  • aktuell nur wenige Metriken enthalten
  • Analyse nur bedingt möglich
AnwendungAnalyse und Evaluierung von Optimierungsmaßnahmen.Bewertungsgrundlage für Google.

Hinweis: Nur die Felddaten der Core Web Vitals fließen mit in das Ranking in Google ein.
Der Fokus sollte dementsprechend auf den Felddaten der Core Web Vitals liegen und die Labordaten zur Analyse und Evaluierung der der Optimierungsmaßnahmen herangezogen werden.

Diese 5 hilfreichen Tools empfehle ich

Es gibt eine Vielzahl an Tools, die Dich bei der Analyse und Optimierung der Core Web Vitals oder der Ladezeit im Allgemeinen unterstützen können. Im Folgenden stelle ich Dir meine Empfehlungen für die unterschiedliche Anwendungsfälle vor.

Tools zum Monitoring der Core Web Vitals und Ladezeit

Ein regelmäßiges Monitoring der Core Web Vitals und der Ladegeschwindigkeit Deiner Seite ist wichtig, um frühzeitig auf negative Änderungen und Probleme aufmerksam zu werden.

Google Search Console

Die Google Search Console liefert bzgl. der Core Web Vitals einen Performance-Überblick der letzten drei Monate. Bei den Daten handelt es sich um Felddaten der Core Web Vitals.

Bild Google Search Console Report
Google Search Console Report

Unter dem Menüpunkt “Nutzerfreundlichkeit -> Core Web Vitals” wird die aktuelle Seiten-Performance für Mobile und Desktop dargestellt. Dabei wird zwischen guten, zu optimierenden und schlechte URLs unterschieden.

Weitere Informationen zu den jeweils betroffenen URLs und den vorliegenden Problemen lassen sich über die Filterfunktionen anzeigen.

Chrome User Experience Report

Für einen Zeitrahmen größer als drei Monate, empfehle ich den Chrome User Experience Report.

Bild Chrome User Experience Report
Chrome User Experience Report

Die Datengrundlage ist die Gleiche wie für die Search Console, aber die Datenpunkte werden weniger granular auf Monatsebene zusammengefasst. Zudem werden keine aktuellen Daten, sondern nur die Daten bis zum letzten Monat angezeigt, wodurch ein zeitkritisches Monitoring nicht möglich ist.

Dennoch ist der Chrome User Experience Report ein hilfreiches Tool, um die Performance-Entwicklung über mehrere Monate oder Jahre rückblickend zu betrachten.

Hier kannst Du den kostenlosen Report für deine Domain erstellen.

Tools zur Analyse der Core Web Vitals und Ladezeit

Sobald Du durch das kontinuierliche Monitoring auf URLs aufmerksam wirst, die die Core Web Vitals nicht erfüllen, kannst Du mit folgenden Tools eine tiefgehende Analyse durchführen.

Google PageSpeed Insights

Der Klassiker unter den Analyse-Tools rund um das Thema Ladezeit ist Google PageSpeed Insights.

Bild Google PageSpeed Insights
Google PageSpeed Insights

 

Mit einem Klick analysiert das Tool die eingegebene URL für Mobile bzw. Desktop und zeigt Feld- und Labordaten an. Zudem erhältst Du hilfreiche Hinweise zur Optimierung deiner Webseite.

WebPageTest.org

Deutlich komplexer ist WebPageTest.org, welches sich aufgrund der Detailtiefe eher an Entwickler richtet.

Bild WebPageTest.org
WebPageTest.org

Dieses Tool ist ebenfalls kostenlos und ermöglicht Dir die Durchführung von Analysen nach individuellen Kriterien. Du kannst beispielsweise die Test-Location, die genutzte Internetverbindung und das genutzte Device eigenständig auswählen, wodurch du gezielt testen kannst.

Im Gegensatz zu PageSpeed Insights erhältst Du bei diesem Tool eine genaue Aufschlüsselung der einzelnen Verbindungen: Ressourcenverteilung, eine Videoaufnahme des Ladevorgangs und weitere detaillierte technische Metriken. Eine Interpretation oder konkrete Optimierungsmaßnahmen fehlen hingegen.

Chrome Dev Tools

Als letztes Tool bleiben noch die Chrome Dev Tools bzw. die Entwicklertools in Browsern wie Safari, Firefox oder Edge zu erwähnen, die sich ebenfalls eher an Entwickler richten.

Beispiel Chrome Dev Tools mit morefire Webseite
Chrome Dev Tools

Mit den Dev Tools kannst Du den Seitenaufbau und das Ladeverhalten direkt in Deinem Browser untersuchen. Du öffnest die Dev Tools mit “Rechtsklick → Untersuchen” und kannst anschließend das Ladeverhalten im Performance-Tab untersuchen.

Um die Core Web Vitals untersuchen zu können, musst Du den entsprechenden Haken setzen. Diese kannst Du in Form von grünen, orangenen oder roten Markierungen in der Timeline sehen.

Largest Contentful Paint verbessern

Der Largest Contentful Paint (LCP) misst die Zeit bis zur Darstellung des größten Bildes, Videos oder Text-Blocks im direkt sichtbaren Bereich. Wie folgendes Beispiel zeigt, kann das Element während des Ladevorgangs auch wechseln; es zählt allerdings das final größte Element (Grün).

LCP Beispiel an welt.de Webseite
LCP Beispiel

Auf YouTube wäre das größte Element beispielsweise das Video selbst. Auf einer Produktseite in einem Onlineshop ist es häufig das Produktbild. Auf einer Nachrichtenseite das Beitragsbild oder die Überschrift.

Bewertung des LCP:

Bis 2,5 Sekunden: gute Performance (Grün)
Von 2,5 bis 4 Sekunden: zu optimierende Performance (Gelb)
Größer 4 Sekunden: schlechte Performance (Rot)

So analysierst Du den LCP

Wenn Du in der Google Search Console feststellst, dass URLs hinsichtlich des LCP schlechte Werte liefern, solltest Du diese gezielt in den Chrome Dev Tools oder WebPageTest.org untersuchen. Dabei möchtest Du primär herausfinden, welches Element jeweils für den LCP relevant ist, damit Du dieses optimieren kannst.

Analyse mit den Chrome Dev Tools

Öffne die Entwicklertools und wechsele in den Performance Tab. Nachdem Du die Core Web Vitals angehakt und die Seite neu geladen hast, wird Dir in der Zeile “Timings” der LCP angezeigt. Sobald Du mit der Maus über dieses Kästen hoverst, wir das entsprechende Element auf der Webseite farbig hinterlegt.

LCP in Chrome Dev Tools am Beispiel welt.de
LCP in Chrome Dev Tools

Analyse mit WebPageTest.org

Alternativ kannst Du die Analyse auf WebPageTest.org durchführen. Gib Deine URL auf der Startseite ein und starte die Analyse. Sobald die Ergebnisseite geladen ist, kannst Du Dir mit einem Klick auf “Largest Contentful Paint” in der Ergebnistabelle folgende Details zum LCP anzeigen lassen.

LCP auf WebPageTest.org am Beispiel von welt.de
LCP auf WebPageTest.org

 

So kannst Du den LCP optimieren

Weil die Messvorgaben für den LCP sehr konkret definiert sind, lassen sich Optimierungsmaßnahmen gezielt finden und umsetzen. Ziel ist es, dass das größte Element (Bild, Video oder Text) im direkt sichtbaren Bereich so schnell wie möglich angezeigt wird.

Beispielbild LCP Optimierung
LCP Optimierung

Welche Maßnahmen jeweils umgesetzt werden sollten, hängt von den individuellen Gegebenheiten und dem jeweils betroffenen Element ab. Hinweise kann hier eine Analyse in PageSpeed Insights liefern.

Antwortzeit des Servers verbessern

Ein wichtiger Aspekt bei der Verbesserung der Ladezeit ist die Antwortzeit des Server, auch Time to first Byte genannt. Nur wenn der Server schnell auf Anfragen reagieren und Inhalte bereitstellen kann, können Metriken wie LCP überhaupt gute Bewertungen erzielen. Dazu solltest Du folgende Aspekte prüfen und gegebenenfalls anpassen:

Prüfe ob der der Server bzw. das Hosting-Paket für den aktuellen Traffic der Seite ausgelegt ist oder ob ein Upgrade sinnvoll ist.
Überprüfe ob die Software auf dem Server aktuelle ist. Beispielsweise bringen Versions-Updates für PHP, SQL-Datenbanken etc. meist auch Steigerungen der Performance mit sich.
Aktiviere nach Möglichkeit http/2 und GZIP für einen schnelleren Datentransfer.
Nutze serverseitiges Caching, um dynamische Inhalte schneller ausspielen zu können – Viele CMS bieten dafür Cache-Plugins an.

Falls Du die Fragen selbst nicht klären kannst, solltest Du bei deinem Hoster nachfragen. Dieser kann in der Regel auch Updates bzw. Upgrades durchführen.

Bilder optimieren

Wenn ein Bild für den LCP verantwortlich ist, sollte dieses entsprechend optimiert und eingebunden sein. Dabei solltest Du vor allem auf folgende Punkte achten:

Das Bild sollte in einem modernen WebP Format vorliegen, weil dieses die aktuell beste Performance bietet und viele Vorteile vereint. Für ältere Browser muss ein Fallback als JPEG bzw. PNG hinterlegt sein, weil diese noch kein WebP unterstützen.
Bei der Skalierung ist darauf zu achten, dass das Bild in den Abmessungen übertragen wird, in den es angezeigt wird. Wenn ein Bild mit 650 x 300 Pixeln dargestellt wird, sollte es nicht in der doppelten Auflösung ausgespielt werden. Sonst müssen unnötig Daten transferiert werden. Zudem sollte ein Bild in verschiedenen Skalierungen bereitgestellt werden, damit Endgeräte wie Smartphones entsprechend kleinere Bilder laden können.
Abhängig vom Format ist eine verlustfrei Komprimierung möglich, um zusätzlich die Dateigröße zu verringern. Mit Tools wie compressor.io kannst Du Einsparungen vorab testen. Für das massenhafte Komprimieren von Bilder sind für viele CMS Plugins verfügbar.

Wenn Du diese drei Tipps beachtest, sollten deine Bilder schon deutlich schneller laden.

Videos optimieren

Sofern Videos für den LCp verantwortlich sind, solltest Du darauf achten, dass diese nicht zu lang sind. Zudem sollten sie nicht in der höchsten Auflösung bereitgestellt werden. Beides führt schnell zu langen Ladezeiten. Ein gutes Format ist WebM, welches, wie WebP für Bilder, eine gute Performance bietet.

Auch Videos sollten in unterschiedlichen Skalierungen bereitgestellt werden, sodass der Browser die jeweils passende Datei wählen kann und nicht unnötig große Dateien herunterladen muss.

Als letzten Punkt solltest Du auf das Poster-Attribut achten und dieses mit angeben. Dabei handelt es sich um eine Art Thumbnail, das bis zum vollständigen Laden des Videos angezeigt wird und dadurch den LCP positiv beeinflussen kann.

Preload der entsprechenden Ressourcen

Probiere die für den LCP relevanten Ressourcen (Bilder, Videos oder Fonts) möglichst frühzeitig zu laden. Mit Hilfe von Pre-Load kannst Du solche Ressourcen bereits im HTML-Head laden lassen. So stehen sie im späteren Verlauf direkt zur Verfügung und können zeitnah angezeigt werden. Beispiel:

<link rel=“preload“ href=“/LCP-relevantes-Bild.jpg“ as=“image“>

Ressourcen die das Rendering blockieren zurückstellen

Ein weiterer Punkt ist das Blockieren des Renderings durch CSS- und JS-Dateien. Beide haben die Eigenschaft, den Renderprozess des Browser zu blockieren und so den visuellen Seitenaufbau zu verzögern. Das Umsetzung ist nicht trivial und individuell, sodass folgende Tipps eher grundlegender Natur sind.

Versuche CSS und JavaScript zu reduzieren und auf einzelnen Seiten das zu laden, was benötigt wird. Beispielsweise wird eine separate CSS- bzw. JS-Datei für ein Kontaktformular nur auf der Kontaktseite benötigt. Auf allen anderen Unterseiten sollte es aus dem Code entfernt werden.

Lade JS-Dateien asynchron nach, sodass diese den Renderprozess nicht negativ beeinflussen. Dazu müssen Scripte zusätzlich mit dem Wort “async” eingebunden werden. Beispiel:

<script async src=“script.js“></script>

Wenn Du diese Tipps umsetzt, sollte der LCP deutlich besser werden. Überprüfen kannst du deine Änderungen unmittelbar in den Laborwerten. Dennoch solltest Du die realen Auswirkungen in der Google Search Console weiter beobachten.

First Input Delay verbessern

Das First Input Delay (FID) gibt an, wie schnell der Browser auf die Interaktion des Nutzers reagiert. Außerdem gibt es an wie “flüssig” sich das Nutzen einer Webseite für Besucher:innen anfühlt.

Dabei wird gemessen, wie lange der Browser nach dem ersten Anklicken, Antippen oder Tastendruck benötigt, um auf diese Eingabe zu reagieren. Falls der Browser zu diesem Moment mit der Ausführung von Scripten beschäftigt ist, muss diese Aufgabe zunächst abgeschlossen werden. Erst danach kann der Browser auf die Nutzereingabe reagieren. Dies wird als Verzögerung vom Nutzer wahrgenommen.

Die Verzögerung wird folgend bewertet:

Bis 100 Millisekunden: gute Performance (Grün)

Von 100 bis 300 Millisekunden: zu optimierende Performance (Gelb)

Größer 300 Millisekunden: schlechte Performance (Rot)

So analysierst Du den FID

Bei der Analyse des FID liegt der Fokus darauf, herauszufinden welche Scripte den Browser länger als 50 Millisekunden belasten. Diese diese sind potenzielle Auslöser für einen hohen FID.

Allerdings handelt es sich beim FID um die einzige Metrik der Core Web Vitals, die nicht im Labor erfasst werden kann. Dies liegt daran, dass ohne großen Aufwand keine zufällige Interaktion durch den Nutzer simuliert werden kann. Als Alternative kannst Du im Labor die Metrik Total Blocking Time (TBT) zu Rate ziehen, die mit dem FID korreliert.

Analyse mit den Chrome DEV Tools

Öffne zunächst die Entwicklertools und wechsele in den Performance Tab. Nachdem Du die Seite neu geladen und die Performance aufgezeichnet hast, werden Dir in der Zeile “Main” die problematischen Tasks mit einem roten Fähnchen angezeigt. Sobald Du einen solchen Task und in den Details “Bottom-Up” auswählst, kannst Du sehen welches Script für das Problem verantwortlich ist.

FID Analyse in DEV Tools am Beispiel welt.de
FID Analyse in DEV Tools

Analyse mit WebPageTest.org

Sobald Du Deine URL in WebPageTest.org getestet hast, kannst Du auf der Ergebnisseite auf das Wasserfalldiagramm klicken, wodurch dieses als große interaktive Grafik auf einer neuen Seite geöffnet wird. Scrolle nach unten und schaue nach roten Balken in der Zeile “Long Tasks”. Nun gehst Du im Diagramm senkrecht nach oben und suchst nach Zeilen, die zu diesem Zeitpunkt rosa Balken besitzen. Diese stellen einen Indikator für die Ausführung von JavaScript dar. Um welches Script es sich handelt, kannst Du in der linken Spalte des Diagramms ablesen.

FID Analyse in WebPagTest.org am Beispiel welt.de
FID Analyse in WebPagTest.org

So kannst Du den FID optimieren

Nachdem Du Scripte mit langen Ausführungszeiten gefunden hast, kannst Du mit der Optimierung beginnen. Das Ziel ist die Ausführungszeiten so zu reduzieren, dass die Wahrscheinlichkeit für kurze Reaktionszeiten steigt.

Grafik Optimierung FID
Optimierung FID

Allerdings ist die Optimierung der Scripte nicht einfach und kann nicht immer nach dem gleichen Schema erledigt werden. Zum Glück treten FID Probleme im Vergleich zu LCP bzw. CLS eher selten auf und es muss nicht jedes potenziell problematisch Script angegangen werden. Der FID hängt zu einem gewissen Grad vom Nutzer ab und wann dieser mit der Webseite interagiert. Selbst bei Seiten mit mehreren potenziell problematischen Scripten kann der FID Null oder sehr niedrig sein, sofern kein Besucher zu den Ausführungszeiten eine Interaktion durchführt.

Folgende Maßnahmen sollen dennoch Denkanstöße sein, um den FID zu minimieren:

JavaScript grundsätzlich reduzieren und ungenutzte Plugins bzw. Libraries entfernen – Alles was nicht geladen wird, kann auch keinen schlechten FID erzeugen.
Scripte nur auf den Seiten einbinden, auf denen diese wirklich genutzt werden – Beispielsweise Slider, Kontaktformulare, Tools zum Splittesten etc..
Wenn Du nicht alle Funktionen von Frameworks wie Bootstrap benutzt, solltest Du auch nicht das gesamte Framework einbinden. Viele dieser Frameworks bieten Dir die Möglichkeit, Funktionen gezielt nach Bedarf in Custom Builds zusammenzufassen.
Große Scripte aufteilen und in kleinere Tasks aufbrechen, die den Main Thread bei der Ausführung weniger lang an einem Stück blockieren.

Vor allem das Modifizieren von Scripten setzt einiges an Erfahrung voraus, aber alleine das entfernen von ungenutzten Scripten reicht in den meisten Fällen schon aus, um den FID deutlich zu verbessern.

Cumulative Layout Shift verbessern

Der Cumulative Layout Shift (CLS) misst die Stabilität des Layouts, d.h. ob und wie stark sich ein Layout nachträglich ändert. Solche Änderungen vermitteln dem Nutzer, dass die Seite noch nicht vollständig geladen und noch nicht nutzbar ist. Zudem können diese auch sogenannte misclicks erzeugen, bei denen der Nutzer durch die Veränderung des Layout unbeabsichtigt auf ein anderes Element klickt. Wie dies aussehen kann, zeigt folgende Animation.

CLS am Beispiel welt.de
CLS

Es zählen dabei nur Layoutänderungen, die nicht durch eine Interaktion des Nutzers ausgelöst werden. Änderungen durch den Klick auf einen Button werden nicht gewertet. In der Animation von Welt.de ist es beispielsweise der Werbeblock, der den Content nachträglich nach unten schiebt.

Der CLS ist eine einheitenlose Metrik und wird folgendermaßen bewertet:

Bis 0,1: gute Performance (Grün)

Von 0,1 bis 0,25: zu optimierende Performance (Gelb)

Größer 0,25: schlechte Performance (Rot)

So analysierst Du den CLS

Bei der Analyse des CLS geht es erstmal darum herauszufinden, welches Element für die Verschiebung verantwortlich ist. Anschließend kannst Du dann die Ursachen dafür suchen und weiter analysieren.

Analyse mit den Chrome Dev Tools

Öffne die Entwicklertools und wechsele in den Performance Tab. Nachdem Du die Core Web Vitals angehakt und die Seite neu geladen hast, werden Dir in der Zeile “Experience” CLS Probleme angezeigt, sofern es zu Layout Shifts kommt.

Klicke auf eine solche Markierung und anschließend auf “Summary” in den Details. Anschließend hoverst Du über die Einträge “Moved from” bzw. “Moved to” um das betroffene Element rot hinterlegt angezeigt zu bekommen. Der Eintrag “Related Node” zeigt ebenfalls an, welches HTML Element verschoben wurde.

CLS Analyse in Chrome Dev Tools 1 am Beispiel welt.de
CLS Analyse in Chrome Dev Tools 1

Nachdem Du weißt, welches Element betroffen ist, kannst Du nach dem Element suchen, das für die Verschiebung verantwortlich ist. Dieses liegt logischerweise über dem verschobenen Element und kann durch eine visuelle Analyse erkannt werden. Dazu fährst Du mit der Maus über die Zeitleiste (roter Kasten im folgenden Bild) und vergleichst die Veränderungen rund um den Zeitpunkt des CLS. So kannst Du schnell die Veränderungen erkennen, die die Verschiebung zur Folge haben.

CLS Analyse in Chrome Dev Tools am Beispiel welt.de
CLS Analyse in Chrome Dev Tools 2

Analyse mit WebPageTest.org

Die Analyse mit WebPageTest.org ist komplizierter. In den meisten Fällen erscheint der Cookie Consent Banner vor dem Layout Shift und das Tool kann den Cookies nicht ohne weiteres zustimmen. Deswegen empfehle ich Dir an dieser Stelle die Analyse primär mit den Chrome Dev Tools.

So kannst Du den CLS optimieren

Das grundsätzlich Problem hinter dem CLS ist, dass Elemente nachträglich ins Layout eingefügt werden oder ihre Größe ändern.

Grafik Optimierung CLS
Optimierung CLS

Damit dies nicht passiert, sollten dem Browser die finalen Abmessung möglichst früh bekannt sein, sodass dieser beim Rendern ausreichend Platz reservieren kann. In den meisten Fällen kann der CLS durch folgende Maßnahmen behoben werden.

Klare Größenangaben für Bilder und Videos

Es ist wichtig das Bilder und Videos mit konkreten Angaben zur Abmessung (width und height) eingebunden werden. Andernfalls findet der Browser die Abmessungen erst nach dem Herunterladen des Bildes/Videos heraus und muss das Layout nachträglich anpassen. So kann er den benötigten Platz direkt mit einplanen und das Bild/Video nach dem Herunterladen einfügen.

Reservierter Platz für nachträglich geladene Inhalte

Häufig werden Werbeanzeigen nachträglich durch JavaScript in das Layout der Webseite geladen und verschieben dadurch das Layout. Um dieses Problem zu lösen, solltest Du an den Stellen, wo die Werbung erscheinen soll, einen ausreichend großen Container platzieren. In den können die Werbeinhalte geladen werden. Dadurch reserviert der Browser auch in diesem Fall eine ausreichend große Fläche im Layout.

Angepasstes Styling für Fallback-Fonts

Schriftarten können ebenfalls zu Verschiebungen im Layout führen. Das ist häufig der Fall, wenn eigene Schriftarten verwendet werden, die nicht zu den sicheren Schriftarten zählen. Diese müssen vom Browser erst herunterladen werden und in dieser Zeit zeigt der Browser die Inhalte in einer Standard Fallback-Schriftart an.

Sobald die Schriftarten geladen und angezeigt werden, kommt es in den meisten Fällen zu einer deutlichen Änderung im Aussehen der Inhalte. Zum Beispiel anderer Abstand zwischen Buchstaben, größerer Zeilenabstand etc.. Um dies zu verhindern solltest Du deine Fallback-Schriftart mittels CSS so anpassen, dass diese vom Platzbedarf mit der finalen Schriftart übereinstimmt.

Zusammenfassung

Die Nutzererfahrung rückte bereits in den letzten Jahren immer mehr in den Fokus von Google und Webseitenbetreibern:innen. Mit den Core Web Vitals ist dieses sehr subjektive Empfinden der Nutzer:innen nun messbarer und auch greifbarer geworden. 

Auch wenn sich die Metriken in den nächsten Jahren vermutlich noch weiterentwickeln werden, bieten sie schon jetzt eine gute Möglichkeit die Nutzererfahrung einer Webseite zu verbessern. 

Thomas Kaiser

Geschrieben von

5 / 5 (1 votes)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.