[MELDEN] Von der Vision zum Code: Ein Leitfaden zur Ausrichtung der Geschäftsstrategie auf die Ziele der Softwareentwicklung ist veröffentlicht!
HOL ES DIR HIER

Core Web Vitals: Was sind sie und wie können sie verbessert werden? [2025]

readtime
Last updated on
February 18, 2025

A QUICK SUMMARY – FOR THE BUSY ONES

Core Web Vitals auf einen Blick

Core Web Vitals sind Metriken, die verwendet werden, um das Nutzererlebnis einer Website messen.

Im Juni 2021 wird Google damit beginnen, sie als Rangsignal, um die Erfahrung zu beurteilen, die eine Website bietet. Seiten, die keine gute Punktzahl haben, können im SERP sinken. Die Änderungen werden weltweit eingeführt.

Es gibt 3 Metriken:

  • Largest Contentful Paint (LCP) = misst die Ladeleistung.
  • First Input Delay (FID) = misst die Interaktivität.
  • Cumulative Layout Shift (CLS) = misst die visuelle Stabilität.

Google hat für jeden von ihnen die gewünschte Punktzahl festgelegt. Eine Webseite muss punkten „gut“, wenn jede Metrik die Bewertung bestanden hat.

Vorerst werden Core Web Vitals die Ranking-Signale sein für die mobile Suche. Eine gute Benutzererfahrung sollte jedoch immer Priorität haben, sowohl für Mobilgeräte als auch für Desktops. Außerdem betont Google immer mehr die Bedeutung von UX, sodass wir davon ausgehen können, dass die Core Web Vitals in naher Zukunft auch zu den Signalen für die Desktop-Suche werden.

Neben Core Web Vitals gibt es auch andere Web Vitals, die einen Blick wert sind, wenn Sie sichergehen möchten, dass Ihre Website eine hervorragende Benutzererfahrung bietet.

TABLE OF CONTENTS

Core Web Vitals: Was sind sie und wie können sie verbessert werden? [2025]

Einführung

In den letzten Jahren Die Nutzererfahrung wurde zu Googles Priorität. Sie bewarben Inhalte, die für die Suchabsicht eines Benutzers relevant waren, und Websites, die eine hohe Geschwindigkeit und Leistung boten, insbesondere auf Mobilgeräten.

Jetzt UX-bezogene Metriken werden zu Ranking-Signalen und Google plant, die Websites zu kennzeichnen, die am besten damit umgehen.

<span class="colorbox1" fs-test-element="box1"><p>Wichtiger Punkt:</p><p>Die Qualität der Benutzererfahrung einer Website wird mithilfe von Core Web Vitals bewertet. </p></span>

Wird es eine Revolution sein?

Google Updates sorgen immer für Interesse, Nerven und oft auch für Verwirrung. Google behauptet jedoch, dass dieses Update sollte keine Revolution auslösen.

Tauchen Sie ein in das Thema Core Web Vitals und erfahren Sie, wie Ihr Unternehmen von diesen Veränderungen profitieren kann, wenn Sie sich richtig vorbereiten.

<span class="colorbox1" fs-test-element="box1"><p>Hinweis:</p><p>Es gibt viele Mythen über Core Web Vitals. Unser Ziel war es, einen soliden Leitfaden mit relevanten Tipps zu erstellen, der Ihnen hilft, die Fehlinformationen zu beseitigen. In diesem Artikel spielen wir keine Experten, sondern teilen Einblicke wir haben gelernt, und das Ergebnis stundenlanger Analysen von Google Ressourcen. Außerdem findest du dort ein paar Ideen für Experimente zum Ausprobieren.</p></span>

Benutzererfahrung: ein neues Muss für Webseitenbesitzer

Eine hervorragende Nutzererfahrung einer Website steht bei Google an erster Stelle. Die Suchmaschine zielt darauf ab, Nutzern relevante Antworten und qualitativ hochwertige Inhalte zu bieten, fördert aber auch die Benutzerfreundlichkeit und Sicherheit für Mobilgeräte.

Jetzt gehen sie noch einen Schritt weiter und benennen Kennzahlen, anhand derer sie das Erlebnis einer Website beurteilen und als Ranking-Signal verwenden können.

Jedes Google-Update der letzten Jahre war ein weiterer Schritt in Richtung eines besseren Sucherlebnisses: Förderung hochwertiger Inhalte, relevanter Antworten, Experten, Sicherheit und Reaktionsfähigkeit.

Mobile hat einen besonderen Platz auf ihrem Radar, da es sowohl für Benutzer als auch für Webseitenbesitzer oft ein problematisches Gebiet ist.

Aus diesem Grund wird sich das neue Update auf das mobile Web auswirken.

<span class="colorbox1" fs-test-element="box1"><p>Mythos: Die Core Web Vitals werden für Web und Mobile bewertet</p>. <p>Wahrheit: Derzeit bewertet Google Core Web Vitals nur für mobile Websites</p></span>.

Es ist eine gute Sache, wirklich

Da das Update Webseitenbesitzer dazu zwingt, sich um UX zu kümmern, ist das sowohl für sie als auch für die Nutzer eine gute Sache.

Benutzer werden das Vergnügen haben, diese optimierten Websites zu nutzen.

Und für Geschäftsinhaber besser UX bedeutet, dass weniger Kunden ihre Website aufgrund von Problemen oder Verwirrung verlassen und mehr Kunden konvertieren.

Core Web Vital-Metriken helfen Ihnen dabei, dies zu erreichen. Lassen Sie uns mit den Grundlagen beginnen und analysieren, um welche es sich handelt. Dann kümmern wir uns um ein besseres Ergebnis.

Was sind Core Web Vitals?

Web Vitals sind Suchsignale für das Seitenerlebnis, die zeigen, ob eine Seite benutzerfreundlich, sicher und einwandfrei ist. Core Web Vitals ist eine Untergruppe von Web Vitals: drei Metriken, die dem Laden, der Interaktivität und der visuellen Stabilität einer Webseite entsprechen. Google verwendet sie, um die Qualität einer Website zu messen.

Die neuen Signale für das Seitenerlebnis kombinieren Core Web Vitals mit bestehenden Suchsignalen wie Mobilfreundlichkeit, sicherem Surfen, HTTPS-Sicherheit und aufdringlichen interstitiellen Richtlinien.

Learn more about Core Web Vitals by exploring page experience signals.

Jeder Core Web Vital hat bestimmte Schwellenwerte, anhand derer Webseitenbetreiber qualitativ beurteilen können, ob die Nutzererfahrung ihrer Website „gut“, „verbesserungsbedürftig“ oder „schlecht“ ist.

Wenn mindestens 75 Prozent der Seitenaufrufe einer Website den Schwellenwert für „gut“ erfüllen, wird die Website für diese Kennzahl als „gut“ eingestuft.

Core Web Vitals beurteilen Sie die Benutzererfahrung einer Webseite. Es ist sehr wahrscheinlich, dass mobile Nutzer keine gute Erfahrung machen werden, wenn diese Schwellenwerte nicht erreicht werden.

<blockquote><p>„Diese Signale messen, wie Nutzer das Erlebnis der Interaktion mit einer Webseite wahrnehmen, und tragen zu unserer kontinuierlichen Arbeit bei, sicherzustellen, dass die Nutzer das Web so hilfreich und unterhaltsam wie möglich nutzen.“</p> <p>— Google</p></blockquote>

Wann werden diese Änderungen eintreten?

Ursprünglich kündigte Google diese Änderungen für Mai 2021 an, verschob sie jedoch. Neue Ranking-Signale werden schrittweise eingeführt ab Mitte Juni 2021.

<blockquote><p>„Wir werden ab Mitte Juni 2021 beginnen, Page Experience als Teil unserer Ranking-Systeme zu verwenden. Allerdings wird das Nutzererlebnis als Teil dieser Systeme erst Ende August seine volle Rolle spielen. Du kannst dir das so vorstellen, als ob du einem Essen, das du zubereitest, ein Aroma hinzufügst. Anstatt das Aroma auf einmal in die Mischung zu geben, fügen wir das Ganze in diesem Zeitraum langsam hinzu.“</p> <p>— Google</p></blockquote>

Ranking-Signale zur Seitenerfahrung, die auf Core Web Vitals basieren, werden angewendet global in allen Browsern auf Mobilgeräten.

Tolle Erlebnisse werden auch bei der Suche mit einem speziellen Badge hervorgehoben, wie z. B. Featured Snippets oder jetzt bei der Bildersuche. Google ist der Ansicht, dass die Bereitstellung von Informationen über die Qualität des Nutzererlebnisses einer Webseite Nutzern dabei hilft, das Suchergebnis auszuwählen, das sie besuchen möchten.

Sind alle bereit?

In ihrem Studie zu Google Core Web Vitals, Searchmetrics untersuchte über 2 Millionen Websites, um ihre Parameter zu überprüfen. Das Ergebnis? Weniger als 10% aller mobilen Websites erzielten bei allen drei Core Web Vitals ein gutes Ergebnis.

Viele von uns stehen vor einer großen Herausforderung.

Core Web Vitals: Tiefer eintauchen

Relevanz und Qualität sind nach wie vor entscheidend

<blockquote><p>„Die Relevanz ist immer noch bei weitem viel wichtiger. Nur weil Ihre Website in Bezug auf Core Web Vitals schneller ist als die einiger Mitbewerber, heißt das nicht unbedingt, dass Sie in den Suchergebnissen auf Position eins springen. [...] Es sollte für uns Sinn machen, die Website in den Suchergebnissen anzuzeigen</p>.“ <p>— John Mueller, Google SEO-Bürozeiten ab 26. Februar 2021</p></blockquote>

Relevanz und Qualität werden weiterhin von größter Bedeutung sein. Aber es entbindet uns nicht davon, uns um UX zu kümmern. Auch wenn unser Inhalt großartig ist, Wenn unsere Konkurrenten sowohl großartige Inhalte als auch eine großartige UX liefern, wird unsere Seite in den SERP-Ergebnissen absinken.

<blockquote><p>„Ein gutes Seitenerlebnis hat nichts mit großartigen, relevanten Inhalten zu tun. [...] Wenn es mehrere Seiten mit ähnlicher Qualität und ähnlichem Inhalt gibt, schneiden die Seiten mit einem besseren Seitenerlebnis möglicherweise besser ab als Seiten ohne.“</p> <p>— Google</p></blockquote>

<span class="colorbox1" fs-test-element="box1"><p>Mythos: Die Benutzererfahrung wird wichtiger sein als die Qualität des Inhalts.</p> <p>Wahrheit: Google behauptet, dass der Core Web Vitals-Score als Entscheidungsfaktor verwendet wird. Falls zwei Seiten Inhalte von ähnlicher Qualität und Relevanz haben, wird die Seite mit der besseren Nutzererfahrung beworben</p></span>.

Außerdem erstreckt sich der Qualitätsbegriff nur vom Inhalt auf die Website insgesamt. Wir müssen anfangen, auf die zu achten Qualität von beidem: Inhalt und Website.

<blockquote><p>„Unsere Mission bei Google Search ist es, Nutzern zu helfen, die relevantesten und qualitativ hochwertigsten Websites im Web zu finden. Das Ziel dieser Updates ist es, die besten Erlebnisse hervorzuheben und sicherzustellen, dass Nutzer die Informationen finden, nach denen sie suchen.“</p> <p>— Google</p></blockquote>

Die Daten von Core Web Vitals stammen von echten Benutzern

Leistungsdaten und Core Web Vitals-Metriken können auf zwei Arten gemessen werden: mit Felddaten oder Labordaten.

Google will die Erfahrung messen echte Nutzer haben bei der Interaktion mit einer Website. Felddaten werden von echten Benutzern bereitgestellt.

Labordaten im Vergleich zu Felddaten

Felddaten werden gesammelt von echte Nutzer, mit ihren Geräten und in ihren Netzwerkverbindungen. Es wird auch Real User Monitoring genannt. Felddaten werden im Chrome User Experience Report (CruX) gesammelt.

Labordaten werden in einem gesammelt kontrollierte Umgebung, ohne dass echte Benutzer daran beteiligt sind. Es wird mit einem vordefinierten Gerät und Netzwerkverbindungseinstellungen erfasst.

Die mit diesen Methoden gesammelten Daten können sich erheblich unterscheiden.

Stellen Sie sich vor, eine Gruppe von Besuchern Ihrer Website verwendet ältere Geräte oder lebt an Orten, an denen die Internetverbindung instabil ist. Auf der anderen Seite haben Sie einen Programmierer mit schnellem Internetzugang und einen High-End-Laptop.

Labordaten sind nur Näherungswerte, aber Felddaten zeigen, was Ihre Besucher erleben. Das Nutzererlebnis kann nicht an einem einzigen Zeitpunkt unter perfekten Bedingungen oder mit einem einzelnen Benutzer erfasst werden. Und Ihre Entwickler werden höchstwahrscheinlich Tests mit High-End-Laptops und schnellem Internet durchführen.

In der realen Welt gibt es Unterschiede bei den Geräten oder Netzwerkverbindungen der Benutzer. Felddaten ermöglichen es Ihnen, sie zu verstehen und annähernd widerzuspiegeln.

<blockquote><p>„Labordaten bieten reproduzierbare Ergebnisse und Debugging-Funktionen, mit denen Leistungsprobleme identifiziert, isoliert und behoben werden können</p><p>“ — Google</p></blockquote>

<span class="colorbox1" fs-test-element="box1">Wichtiger Tipp zum Mitnehmen: Core Web Vitals werden anhand von Felddaten gemessen, nicht anhand von Labordaten. Google zielt darauf ab, das Nutzererlebnis in der realen Welt zu messen</span>.

Werkzeuge

Leistung ist relativ

Die Leistung der Website hängt von der Netzwerkgeschwindigkeit und dem verwendeten Gerät eines Benutzers ab. Eine Website kann auch schnell geladen werden, dann aber langsam reagieren. Die wichtigsten Web Vital-Metriken beziehen sich auf die Leistung anhand objektiver Kriterien, die quantitativ gemessen werden können.

<span class="colorbox1" fs-test-element="box1">Hinweis: Um die Gesamtleistung einer Seite zu klassifizieren, verwendet Google den 75. Perzentilwert aller Seitenaufrufe auf dieser Seite oder Website</span>.

Wie berechnet Google das Endergebnis?

Die Daten stammen aus dem Chrome User Experience Report.

Die Metriken werden mit dem 75. Perzentil über einen Zeitraum von 28 Tagen berechnet. Wenn eine Seite die Ziele für alle drei Metriken erreicht, besteht sie die Bewertung.

Das 75. Perzentil zeigt, dass bei den meisten Besuchen der Website (3 von 4) das angestrebte Leistungsniveau oder besser erreicht wurde.

Updates werden weiter vorangetrieben

<blockquote><p>„Unsere Arbeit ist noch nicht abgeschlossen, weshalb wir planen, in Zukunft mehr Signale für das Seitenerlebnis zu integrieren und sie jährlich zu aktualisieren. Wir hoffen, dass die von uns bereitgestellten Tools und Ressourcen es Ihnen leichter machen, großartige Websites zu erstellen und so ein Web-Ökosystem aufzubauen, das die Nutzer lieben.“</p> <p>— Google</p></blockquote>

Drei Kernkennzahlen

Drei zentrale Web Vital-Metriken werden zu Ranking-Signalen:

  • Largest Contentful Paint (LCP) — misst die Ladeleistung.
  • First Input Delay (FID) — es misst die Interaktivität.
  • Cumulative Layout Shift (CLS) — misst die visuelle Stabilität.

Schauen wir uns jeden von ihnen genauer an und untersuchen:

  • Was es misst und warum müssen Sie das messen
  • Was ist dein Ziel
  • Was sind die möglichen Ursachen für ein schlechtes Ergebnis
  • Wie kannst du das verbessern

Größter Inhaltsgehalt (LCP)

<span class="colorbox1" fs-test-element="box1">Largest Contentful Point misst die Ladeleistung.</span>

LCP-Maßnahmen wie viel Zeit es dauert, bis das größte Inhaltselement auf einer Seite geladen ist.

Es kann ein Bild, ein Textblock oder ein Element mit einem Hintergrundbild sein. Ziel ist es zu überprüfen, wie viele Sekunden es dauert, bis der Hauptinhalt geladen ist.

LCP wird gemessen für das größte Element auf dem ersten Bildschirm. Das heißt, selbst wenn eine H1-Überschrift schnell geladen wird, aber dann das Bild erscheint und größer ist, wird der LCP für das Bild gemessen. SVG-Elemente werden nicht als Kandidaten für den LCP betrachtet.

LCP ist grün hervorgehoben (Quelle)

Oft ist der Inhalt, der spät geladen wird, größer als der Inhalt, der sich bereits auf der Seite befindet, aber es ist nicht die Regel, LCP zu identifizieren:

LCP ist grün hervorgehoben (Quelle)

Derzeit werden diese Elemente für Largest Contentful Paint berücksichtigt:

  • img-Elemente
  • Bildelemente in einem SVG-Element
  • Videoelemente (das Posterbild wird verwendet)
  • ein Element mit einem Hintergrundbild, das über die Funktion url () geladen wurde
  • Elemente auf Blockebene, die Textknoten enthalten

Die Größe des Elements, das für Largest Contentful Paint gemeldet wurde, entspricht dem, was für den Benutzer sichtbar ist. Wenn sich das Element außerhalb des Viewports erstreckt, wird es nicht auf seine Größe und Ladezeit angerechnet.

Wie misst man LCP

LCP kann im Labor oder vor Ort gemessen werden.

Werkzeuge für den Einsatz vor Ort:

Laborwerkzeuge:

LCP-Punktzahl

Um ein gutes Nutzererlebnis zu bieten, sollten Websites eine maximale Inhaltsanzahl von 2,5 Sekunden oder weniger anstreben. Um sicherzustellen, dass du dieses Ziel für die meisten deiner Nutzer erreichst, ist das 75. Perzentil der Seitenzugriffe, segmentiert nach Mobil- und Desktop-Geräten, ein guter Schwellenwert, den du messen kannst.

Mögliche Ursachen für einen schlechten LCP-Score

  • Langsame Serverantwort
  • JavaScript und CSS blockieren das Rendern
  • Langsame Ladezeiten der Ressourcen
  • Clientseitiges Rendern
  • Faules Laden
  • Animationen und Slider

Verbesserung des LCP-Scores

  1. Überprüfe die Antwort deines Servers. Je länger der Browser benötigt, um Inhalte vom Server zu empfangen, desto länger dauert es, bis die Seite für den Benutzer geladen ist. Sie können dies überprüfen, indem Sie eine leere HTML-Seite erstellen. Wenn diese eine hohe anfängliche Serverantwortzeit hat, sollten Sie ein Upgrade Ihrer Hosting-Plattform in Betracht ziehen.
  2. Überprüfe, ob du WordPress-Plugins für Lazy Loading verwendest. WordPress-Plugins laden alle Bilder verzögert. Es sollte nicht für unser Hauptbild verwendet werden. Du kannst es in WordPress einfach verbieten.
  3. Versuche, den Fading-Effekt von einem Hauptbild zu entfernen, und es kann helfen, ein Bild anstelle eines Sliders zu verwenden.
  4. Reduzieren Sie JavaScript und CSS, die das Rendern blockieren.
  5. Optimieren Sie den kritischen Renderpfad.
  6. Optimiere deine Bilder. Versuchen Sie, die Bildgrößen zu reduzieren, andere Formate zu verwenden oder die wichtigsten Ressourcen vorab zu laden.

Nützliche Ressourcen:

Erste Eingangsverzögerung

<span class="colorbox1" fs-test-element="box1">First Input Delay misst die Interaktivität.</span>

FID misst die Zeit von der ersten Interaktion eines Benutzers mit einer Website bis zu dem Zeitpunkt, an dem ein Browser auf diese Interaktion reagiert. Die Interaktion kann ein Klick auf einen Link sein, das Tippen auf eine Schaltfläche. FID wird in Millisekunden gemessen.

Oft klicken Benutzer sofort auf den Text oder die Schaltfläche, ohne darauf zu warten, dass die Seite vollständig geladen ist, und nichts passiert, weil der Browser damit beschäftigt ist, die Seite zu laden.

Deshalb ist FID wichtig: es ist der erste Eindruck von der Interaktivität und Reaktionsfähigkeit einer Website. Ziel ist es, zu verhindern, dass Benutzer ungeduldig werden und die Seite wieder verlassen, weil der Browser nicht reagiert.

Quelle

FID kann nur vor Ort gemessen werden, da es auf der Benutzerinteraktion beruht. Im Labor verwenden die Tools stattdessen die Metrik „Total Blocking Time“.

Wie misst man FID?

FID ist eine Metrik, die nur im Feld gemessen werden kann: erfordert, dass ein echter Benutzer mit einer Seite interagiert.

Werkzeuge für den Einsatz vor Ort:

FID-Punktzahl

Quelle

Was kann zu Problemen führen?

Der Hauptthread eines Browsers ist mit dem Parsen und Ausführen von JavaScript-Code beschäftigt.

Verbesserung des FID-Scores

  1. Minimiere die im Hauptthread geleistete Arbeit. Facebook Pixel, Facebook Chat, GTM, Hotjar: Das ist eine Menge JavaScript-Code, den Sie in der ersten Sekunde beim Laden der Seite nicht benötigen.
  2. Versuchen Sie, mithilfe von Web-Workern JavaScript über den Hauptthread des Browsers auszuführen.
  3. Behalte Videos von YouTube im Auge — zeige sie als Bilder an, nicht als Videos (Nutzer müssen sie anklicken, um das Video zu laden). Du kannst Plugins wie WP Rocket verwenden.
  4. Wenn Sie das JS aus dem ersten Laden entfernen, bleibt mehr Zeit, um den Rest zu laden, sodass auch das LCP verbessert wird.

Nützliche Ressourcen:

Kumulative Layoutverschiebung

<span class="colorbox1" fs-test-element="box1">Cumulative Layout Shift (CLS) misst die visuelle Stabilität.</span>

CLS misst, wie oft ein Benutzer „unerwartete Layoutänderungen“ erlebt (d. h. wenn Elemente der Seite beim Laden plötzlich verschoben werden).

Sie öffnen eine Website und der Text bewegt sich plötzlich nach unten. Sie sind dabei, auf einen Link zu klicken, aber dann bewegt sich der Link plötzlich und Sie beenden das Klicken auf eine Schaltfläche. Das ist frustrierend und kann manchmal schwerwiegende Folgen haben.

Während Layoutschichten Elemente können auf der Seite nach unten geschoben werden, zum Beispiel, während das nächste Element (wie ein Bild) oben geladen wird.

Dies wird häufig dadurch verursacht, dass ein Bild oder Video mit unbekannten Abmessungen oder eine Anzeige oder ein Widget eines Drittanbieters dynamisch angezeigt oder deren Größe geändert wird. Dies ist für Entwickler möglicherweise nicht wahrnehmbar, insbesondere bei Inhalten von Drittanbietern.

CLS hilft dabei, Layoutänderungen zu erkennen und die Benutzererfahrung zu verbessern.

Wie misst man CLS?

Werkzeuge für den Einsatz vor Ort:

Laborwerkzeuge:

CLS-Punktzahl

Was kann ein Problem verursachen?

<blockquote><p>„Unerwartete Layoutänderungen sind häufig auf Bilder oder Anzeigen mit undefinierten Abmessungen, Ressourcen, die asynchron geladen werden, und auf Situationen zurückzuführen, in denen einer Seite dynamisch neue DOM-Elemente hinzugefügt werden, und zwar über vorhandenen Inhalten, die bereits geladen wurden. Dies führt dazu, dass Inhalte, die bereits geladen wurden, weggeschoben werden</p>.“ <p>— Quelle</p></blockquote>

Verbesserung des CLS-Scores

  1. Fügen Sie Größenattribute Ihrer Bilder und Videos hinzu,
  2. Verwenden Sie Platzhalterelemente für Newsletter oder Aktionsbanner, ähnliche Inhaltsblöcke oder DSGVO-Informationen, die als Blöcke im Hauptinhalt positioniert sind.
  3. Laden Sie die Schriften vorab herunter oder speichern Sie sie auf Ihrem Server.

Nützliche Ressourcen:

Andere Web Vitals

Core Web Vitals werden zu Ranking-Signalen, aber wir sollten die Bedeutung anderer Web Vitals nicht unterschätzen. Sich um diese Metriken zu kümmern, bedeutet, sich um die Benutzererfahrung zu kümmern.

Außerdem kündigte Google an, dass die Metriken, die die Ranking-Signale beeinflussen, jedes Jahr überarbeitet werden.

Andere Web Vitals:

  • Gesamtblockierungszeit (TBT)
  • Erster Contentful Paint (FCP)
  • Geschwindigkeitsindex (SI)
  • Zeit bis zur Interaktion (TTI)

Gesamtblockierungszeit

Was ist TBT?

Die Gesamtblockierungszeit (TBT) ist eine Labormetrik zur Messung der Reaktionsfähigkeit von Lasten. Sie misst die Gesamtmenge von Zeit, in der der Hauptthread lange genug blockiert war, um eine Reaktionsfähigkeit zu verhindern.

Wir nennen den Haupt-Thread blockiert, weil der Browser darauf wartet, dass die Aufgabe abgeschlossen ist, bevor er auf die Interaktion des Benutzers reagieren kann.

Der Hauptthread gilt jedes Mal als blockiert, wenn eine lange Aufgabe erscheint: die, die für ausgeführt wird mehr als 50 Millisekunden. Wenn die Verzögerung so lange anhält, ist es wahrscheinlich, dass der Benutzer sie bemerkt.

TBT wird berechnet als Summe der Sperrzeiten für jede lange Aufgabe, die zwischen First Contentful Paint (Inhalt auf dem Bildschirm) und Time To Interactive (volle Reaktionsfähigkeit) stattfindet.

Wie misst man TBT?

Die Gesamtblockierungszeit ist eine Metrik, die in einer Laborumgebung gemessen wird, da sie leicht durch Benutzerinteraktionen beeinflusst werden kann. Es ist möglich, sie vor Ort zu messen, dies wird jedoch nicht empfohlen (Benutzerinteraktionen führen zu Unterschieden in den Berichten).

TBT ist die beste Laboralternative zu FID (Gesamtzeit der Aufgaben, die den Benutzer daran hindern, mit der Seite zu interagieren).

Wenn Sie Core Web Vitals mit Laborgeräten messen, finden Sie anstelle von FID TBT.

Verbesserungsideen:

  • Reduzieren Sie die JavaScript-Ausführungszeit (dies wirkt sich auf verschiedene Weise auf die Leistung aus. Komprimieren Sie also Ihren Code, entfernen Sie unbenutzten Code und reduzieren Sie Netzwerkausflüge).
  • Reduzieren Sie die Auswirkungen von Code und Plugins von Drittanbietern (langsame Skripte von Drittanbietern blockieren in der Regel den Haupt-Thread).
  • Minimiere die Arbeit am Hauptthread (vermeide große, komplexe Layouts, entferne unbenutzten Code, evaluiere Skripte, verwende Web-Worker).
  • Reduzieren Sie die Anzahl der Ressourcen und die Übertragungsgrößen (Anfragen für CSS und JavaScript, Bilder, Schriftdateien, Medien).

Nützliche Ressourcen:

Erste inhaltsreiche Farbe

Was ist FCP?

First Contentful Paint (FCP) misst die wahrgenommene Ladegeschwindigkeit: die Zeit zwischen dem Beginn des Ladens einer Seite und wenn der erste Inhalt auf dem Bildschirm erscheint.

Es handelt sich um eine nutzerorientierte Metrik, da sie zeigt, wie ein Nutzer die Leistung einer Website wahrnimmt (nicht, wie Geschwindigkeitstest-Tools sie bewerten). Je niedriger FCP, desto besser. Ein schnelles FCP hilft dem Benutzer zu versichern, dass etwas passiert.

Quelle

<span class="colorbox1" fs-test-element="box1">Hinweis: Bei First Contentful Point geht es um den ersten Inhalt, der auf dem Bildschirm erscheint, während Largest Contentful Point (einer der Core Web Vitals) darum geht, zu messen, wann der Hauptinhalt der Seite vollständig geladen ist</span>.

Wie misst man FCP?

FCP kann im Labor oder vor Ort gemessen werden.

Werkzeuge für den Einsatz vor Ort:

Laborwerkzeuge:

FCP-Punktzahl

Quelle

Verbesserungsideen:

  • Führen Sie ein Lighthouse-Leistungsaudit durch und achten Sie auf die spezifischen Möglichkeiten, die es bietet.
  • Beseitigen Sie Skripts und Stylesheets, die das Rendern blockieren.
  • Vermeiden Sie Weiterleitungen mehrerer Seiten.
  • Entfernen Sie unbenutztes CSS und JavaScript.
  • Vermeiden Sie enorme Netzwerknutzlasten, indem Sie die Seitengröße klein halten.
  • Vermeiden Sie eine übermäßige DOM-Größe.
  • Reduzieren Sie die Anzahl der Ressourcen und die Übertragungsgrößen (Anfragen für CSS und JavaScript, Bilder, Schriftdateien, Medien).
  • Vermeiden Sie es, unsichtbaren Text anzuzeigen.

Nützliche Ressourcen:

Geschwindigkeitsindex

Was ist der Geschwindigkeitsindex?

Der Geschwindigkeitsindex misst, wie schnell Inhalte während dieser Zeit sichtbar sind Seite wird geladen.

Es bewertet der Prozentsatz der visuellen Fertigstellung einer Seite zu verschiedenen Zeitpunkten aber es reagiert empfindlich auf die Größe des Viewports (es kann die Ergebnisse variieren).

Sie können Lighthouse verwenden, um Ihren Geschwindigkeitsindex-Wert zu messen. Lighthouse zählt es als Vergleich zwischen dem Geschwindigkeitsindex Ihrer Seite und den Geschwindigkeitsindizes echter Websites aus deren Archiv.

Verbesserungsideen:

  • Der Lighthouse-Bericht zeigt Ihnen mehrere Probleme, die Sie lösen müssen.
  • Jede Leistungsverbesserung auf Ihrer Website verbessert den Geschwindigkeitsindex.
  • Versuchen Sie, Bilder zu optimieren, die Größe von Assets zu reduzieren oder ein Bildformat wie WebP zu verwenden.
  • Optimieren Sie JavaScript von Drittanbietern.
  • Beseitigen Sie unbenutztes JavaScript und CSS.
  • Minimiere die Arbeit am Hauptthread (vermeide große, komplexe Layouts, entferne unbenutzten Code, evaluiere Skripte, verwende Web-Worker).
  • Beschleunigen Sie die JavaScript-Ausführung (entfernen Sie unbenutzten Code, reduzieren Sie Netzwerkverbindungen, senden Sie nur den Code, den Ihre Benutzer benötigen, indem Sie Code-Splitting implementieren).
  • Vermeiden Sie es, unsichtbaren Text anzuzeigen.

Wie misst man den Geschwindigkeitsindex?

Nützliche Ressourcen:

Zeit zum Interaktiv

Was ist TTI?

Time to Interactive (TTI) ist eine Labormetrik für Messungen Reaktionsfähigkeit auf Last. Es misst die Zeit vom Beginn des Ladens einer Seite bis zu dem Moment, an dem sie in der Lage, schnell auf Benutzereingaben zu reagieren.

<blockquote><p>„Eine Seite gilt als vollständig interaktiv, wenn:</p> <ul><li>Auf der Seite nützliche Inhalte angezeigt werden, was mit First Contentful Paint gemessen wird,</li> <li>Event-Handler für die meisten sichtbaren Seitenelemente registriert sind und Die Seite</li> <li>innerhalb von 50 Millisekunden auf Benutzerinteraktionen reagiert</li></ul>.“ <p>— Google</p></blockquote>

Die TTI-Metrik hilft zu erkennen, ob es Momente gibt, in denen eine Seite interaktiv aussieht, es aber nicht ist. Je niedriger TTI, desto besser, weil dadurch Frustration vermieden wird. Außerdem ist der niedrige TTI ein Beweis für die Benutzerfreundlichkeit einer Seite für einen Benutzer.

Wie misst man TTI?

Es ist möglich, TTI vor Ort zu messen, dies wird jedoch nicht empfohlen.

Verwenden Sie Laborwerkzeuge:

TTI-Punktestand in Lighthouse

Quelle

Verbesserungsideen:

  • Reduzieren Sie die JavaScript-Ausführungszeit mit weniger Plugins.
  • Verkleinern Sie JavaScript-Dateien.
  • Reduzieren Sie die Auswirkungen von Code von Drittanbietern.
  • Optimieren Sie Bilder und Videos.
  • Halten Sie die Anzahl der Serveranfragen niedrig und die Übertragungsgrößen klein.
  • Minimiere die Arbeit am Hauptthread.
  • Laden Sie Schlüsselanfragen vorab herunter.

Nützliche Ressourcen:

<span class="colorbox1" fs-test-element="box1">Hinweis: Um Core Web Vitals und Web Vitals zu verbessern, konzentrieren Sie sich auf die Verbesserung der Gesamtleistung der Website. Viele Aktivitäten wirken sich gleichzeitig auf mehrere Kennzahlen</span> aus.

Zu messende Metriken: Zusammenfassung

<span class="colorbox1" fs-test-element="box1"><h3>Core Web Vitals</h3> <ul><li>Größter Inhaltsgehalt (LCP): misst die Zeit vom Beginn des Ladens der Seite bis zu dem Moment, an dem das größte Element auf dem Bildschirm sichtbar ist. (Labor, Feld)</li> <li>Erste Eingangsverzögerung (FID): misst die Zeit von der ersten Interaktion eines Benutzers (d. h. Klicken auf einen Link, Tippen auf eine Schaltfläche) bis zu dem Moment, an dem der Browser reagieren kann. (Feld)</li> <li>Kumulative Layoutverschiebung (CLS): misst die Punktzahl aller Layoutänderungen, die von dem Moment an geschehen, an dem eine Seite zu laden beginnt, bis zu dem Moment, an dem ihr Lebenszyklusstatus in „Versteckt“ wechselt. (Labor, Feld)</li></ul></span>

<span class="colorbox1" fs-test-element="box1"><h3>Andere Web Vitals</h3> <ul><li>Gesamtblockierungszeit (TBT): misst die Gesamtzeit, in der der Hauptthread lange genug blockiert war, um die Reaktionsfähigkeit zu deaktivieren. (Labor)</li> <li>Erster Contentful Paint (FCP): misst die Zeit von dem Moment an, an dem die Seite zu laden beginnt, bis zu dem Zeitpunkt, an dem der erste Inhalt auf dem Bildschirm sichtbar ist. (Labor, Feld)</li> <li>Geschwindigkeitsindex: misst, wie schnell Inhalte beim Laden der Seite sichtbar sind. (Labor)</li> <li>Zeit bis zur Interaktion (TTI): misst die Zeit vom Beginn des Ladens der Seite bis zu dem Zeitpunkt, an dem sie in der Lage ist, zuverlässig und schnell auf Benutzereingaben zu reagieren. (Labor)</li></ul></span>

Profitieren Sie von Core Web Vitals

Eine bessere Benutzererfahrung führt zu glücklicheren Besuchern und mehr Konversionen.

Die Optimierung der Qualität der Benutzererfahrung ist der Schlüssel zum langfristigen Erfolg.

Jede Website sollte sich auf das Update vorbereiten und den Core Web Vital-Score verbessern. Es besteht kein Zweifel, dass Google die Nutzererfahrung jedes Jahr mehr und mehr fördern wird. Aber als Unternehmen Man kann nur von einer Website profitieren, die eine großartige UX bietet.

Tauchen Sie tiefer ein: Ressourcen

Frequently Asked Questions

No items found.

Our promise

Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.

Authors

Marta Lichaj
github
Leiterin der Konstruktion

UX/UI-Designerin mit 11 Jahren Berufserfahrung. Liebt ganzheitliches Design, interessiert sich für UX-Strategie und Lean UX.

Olga Gierszal
github
IT-Outsourcing-Marktanalyst und Redakteur für Softwaretechnik

Enthusiast für Softwareentwicklung mit 8 Jahren Berufserfahrung in der Technologiebranche. Erfahrung im Outsourcing von Marktanalysen, mit besonderem Schwerpunkt auf Nearshoring. In der Zwischenzeit unser Experte darin, technische, geschäftliche und digitale Themen auf verständliche Weise zu erklären. Autor und Übersetzer nach Feierabend.

Marta Lichaj
github
Leiterin der Konstruktion

UX/UI-Designerin mit 11 Jahren Berufserfahrung. Liebt ganzheitliches Design, interessiert sich für UX-Strategie und Lean UX.

Olga Gierszal
github
IT-Outsourcing-Marktanalyst und Redakteur für Softwaretechnik

Enthusiast für Softwareentwicklung mit 8 Jahren Berufserfahrung in der Technologiebranche. Erfahrung im Outsourcing von Marktanalysen, mit besonderem Schwerpunkt auf Nearshoring. In der Zwischenzeit unser Experte darin, technische, geschäftliche und digitale Themen auf verständliche Weise zu erklären. Autor und Übersetzer nach Feierabend.

Read next

No items found...