Zuletzt aktualisiert am 31. Juli, 2021 von Roman

Willst du die Core Web Vitals verbessern und optimieren?

Hast du es schon geschafft, deine Seite für Google Core Web Vitals zu optimieren?

Core Web Vitals sind eine Initiative von Google, die Webseitenbetreibern hilft, die Nutzererfahrung und Qualität ihrer Webseiten zu verbessern. Die Core Web Vitals sind für die User Experience also sehr wichtig. Im Kern geht es dabei auch um die Ladezeit Deiner Webseite.

Denn wenn Deine Webseite langsam lädt und demzufolge keine schnelle Ladezeit hat, dann hast Du aktuell und vor allem bald ein großes Problem.

Denn unabhängig von den Einschränkungen in der User Experience Deiner Seite und das dazu führt, dass Deine Besucher wieder abspringen, bevor sie etwas sehen, hat Google im Mai 2020 eine bevorstehende Änderung seines Ranking-Algorithmus angekündigt. Ein schrittweiser Rollout dieses Page Experience Updates beginnt Mitte Juni 2021.

Und dieses Update wird massive Folgen haben, denn das Ziel dieses Updates ist:

Die Hinzufügung von mehr organischen Ranking-Signalen für die User Experience.

Aus diesem Grund werden im Juni 2021 die Core Web Vitals einen neuen Ranking Faktor bilden.

Diese Core Web Vitals sind drei Metriken, die die Ladezeit, Interaktivität und visuelle Stabilität einer Seite darstellen.

Es ist insbesondere im Hinblick auf das Juni 2021 Google Page Experience Update immens wichtig, die Core Web Vitals für die User Experience und das organische Ranking deiner Website zu verbessern und zu optimieren.

Auch wenn du nicht der Webmaster oder Programmierer bist, solltest du verstehen, was das alles bedeutet und die Terminologie kennen, damit du dich für Verbesserungen einsetzen und eng mit deinem Technikteam zusammenarbeiten kannst, um diese umzusetzen.

Deswegen zeige ich Dir in dieser Anleitung, wie du die Google Core Web Vitals ganz einfach und ohne besondere technische Kenntnisse verbessern und optimieren kannst.

Geschwindigkeit

 Core Web Vitals – Ab wann gelten Sie?

Bereits im Mai 2020 kündigte Google an, dass die sogenannten “Core Web Vitals” im Rahmen des Page Experience Updates im Jahr 2021 ein Teil der Google Algorithmen werden würde, teilte den Seitenbetreibern aber mit, dass “kein unmittelbarer Handlungsbedarf besteht.”

Im November 2020 enthüllte Google, dass dieses Page Experience Update im Mai bzw. Juni 2021 in Kraft treten würde.

Für Seitenbetreiber und SEOs auf der ganzen Welt ist es also jetzt an der Zeit, sich auf dieses treffend benannte “Page Experience Update” entsprechend vorzubereiten und insbesondere die Core Web Vitals zu verbessern und zu optimieren.

Wichtige Klarstellungen nach der Ankündigung des Page Experience Updates

Seit der ersten Ankündigung im Mai 2020 hat Google ein paar Dinge geändert und klargestellt:

  • 19.05.2021: Laut John Mueller können auch URLs einen Ranking-Boost bekommen, wenn deren Core Web Vitals „gelb“ bzw. „zu optimieren“ sind
  • 19.05.2021: Google ist immer noch dabei, die neuen Metriken zu testen und zu verbessern. Sie haben CLS kürzlich aktualisiert, um neutraler gegenüber der Zeit auf der Seite zu seinl. Allerdings ist laut John Mueller die von Google angekündigte Neuberechnung des CLS-Scores noch nicht live
  • 18.05.2021:Zunächst sollte das Page Experience Ranking Signal nur für die mobile Suche gelten. Laut Google werden die Core Web Vitals nun auch ein Ranking-Faktor für die Desktop-Suche
  • 19.04.2021: Google führt in der Google Search Console Bericht zum Verhalten von Seiten ein
  • 19.04.2021: Google kündigt an, dass die Core Web Vitals nicht ab Mai, sondern erst ab Mitte Juni als Rankingfaktoren in den Algorithmus integriert werden. Und da auch erst nach und nach (der Roll-out soll Ende August abgeschlossen sein).
  • Die Core Web Vitals sind nur ein Teil von Googles Page Experience Signalen. Die anderen Signale sind Mobilfreundlichkeit, HTTPS, Safe-Browsing und „keine aufdringliche Interstitials“;
  • Google wird nur Felddaten (echte Nutzerdaten) verwenden, um zu bestimmen, ob eine Seite die Core Web Vitals Bewertung besteht. Soweit wir wissen, werden die Labordaten keinen Einfluss auf die organischen Rankings haben;

Google stellt weiterhin Informationen wie bspw. das nachfolgende Q&A über die Core Web Vitals zur Verfügung, halte also in den nächsten Monaten Ausschau nach weiteren Details.

Core Web Vitals Erklärung: Was sind diese Core Web Vitals eigentlich?

Core Web Vitals sind eine Reihe von Website-Performance-Metriken, die Google als wichtig für das gesamte Nutzererlebnis einer Website erachtet und die verwendet werden, um das Laden einer Website, die Interaktivität und die visuelle Stabilität zu messen. Diese Web Vital Scores sind Teil des Google Page Experience Scores, der sich auf dein SEO-Ranking auswirkt.

Alle drei haben auf die eine oder andere Weise mit der Geschwindigkeit einer Website zu tun, was, wie wir wissen, sowohl für Suchmaschinen als auch für Nutzer schon lange wichtig ist.

Die Wahrheit ist, dass niemand eine langsam ladende Website mag, einschließlich Google.

Selbst wenn deine Website schnell lädt, kann es sein, dass sie für die Nutzer nicht voll funktionsfähig ist, um das zu tun, was sie tun wollen oder auf die Informationen zuzugreifen, die sie benötigen.

Das ist es, was die Core Web Vitals dir helfen zu messen.

Wie schnell lädt deine Website, wird sichtbar und ist für deine Nutzer bereit?

Das Interessante an den Core Web Vitals und dem Page Experience Update im Besonderen ist, dass Google nicht oft mit den Details seiner Algorithmus-Updates herausrückt. Aber in diesem Fall wurden uns die genauen Metriken genannt, die wir messen und verbessern müssen, sowie das Datum, an dem das Update in Kraft treten wird. Dies zeigt, dass Page Experience sicherlich ein wichtiges Update sein wird, aber auch eines, auf das wir uns tatsächlich vorbereiten können, solange der Audit-Prozess detailliert und genau ist. Hier sind die Metriken, die in einem Core Web Vitals Audit analysiert werden müssen:

Google Core Web Vitals

Was ist Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP), schaut danach, wie schnell der Hauptinhalt (egal ob es ein Bild, ein Artikel oder eine Beschreibung ist) für die Nutzer sichtbar wird.

Zum Beispiel könnte deine Webseite schnell laden, aber der größte Inhalt erscheint vielleicht nicht so schnell auf dem Bildschirm wie der Rest der Seite.

Verschiedene Speedtest-Tools werden dir eine hohe Punktzahl geben, aber aus Sicht der Nutzer ist die Seite immer noch langsam.

Das ist der Grund, warum Google die LCP als Teil des Web Vital Scores misst, damit Webseitenbetreiber ein klareres Verständnis haben können.

Um ein gutes Nutzererlebnis zu bieten, sollte LCP innerhalb von 2,5 Sekunden nach dem ersten Laden der Seite oder maximal 4 Sekunden auftreten, um eine “schlechte” Bewertung zu vermeiden (obwohl zwischen 2,5 und 4 Sekunden noch “verbesserungswürdig” ist).

Was ist First Input Delay (FID)?

First Input Delay (FID) misst die Zeit, die der Browser eines Nutzers braucht, um mit der Verarbeitung von auslösenden Events als Reaktion auf die Interaktion des Nutzers zu beginnen. (d.h. wie lange es dauert, bis die Webseite reagiert, wenn ein Nutzer auf etwas klickt).

Im Klartext: Nehmen wir an, ein Nutzer befindet sich auf deiner Kontaktformularseite. Er füllt das Formular aus und klickt auf den Absenden-Button. Der FID misst, wie schnell deine Webseite diese Interaktion verarbeitet.

Ein noch einfacheres Beispiel wäre die Zeit, die vergeht, wenn ein Nutzer auf einen Link klickt, bis sein Browser die nächste Sequenz von Ereignissen verarbeitet.

Um ein gutes Nutzererlebnis zu bieten, sollten Seiten eine FID von weniger als 100 Millisekunden oder maximal 300 Millisekunden haben, um eine “schlechte” Bewertung zu vermeiden (obwohl zwischen 100 und 300 Millisekunden immer noch “verbesserungswürdig” ist).

Was ist Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) misst die Zeit, die eine Website benötigt, um visuell stabil zu werden.

Während eine Website lädt, benötigen einige Elemente mehr Zeit als andere zum Laden. Während dieser Zeit kann sich der Inhalt deiner Website auf dem Bildschirm weiter bewegen.

Wenn ein Nutzer zum Beispiel einen Absatz auf einem mobilen Gerät liest und darüber ein eingebettetes Video lädt, bewegt sich der gesamte Inhalt nach unten. Das kann sehr frustrierend sein, wenn ein Nutzer versucht, eine Aktion auszuführen, wie z.B. ein Produkt in den Warenkorb zu legen und der Button sich nach unten verschiebt, weil sich andere Elemente auf der Seite bewegen.

Um ein gutes Nutzererlebnis zu bieten, sollten Seiten einen CLS-Wert von weniger als 0,1 oder mindestens 0,25 haben, um eine “schlechte” Bewertung zu vermeiden (obwohl zwischen 0,1 und 0,25 immer noch “verbesserungswürdig” ist).

Warum sind Core Web Vitals wichtig?

Core Web Vitals sind wichtig, weil sie widerspiegeln, wie deine Website für die Nutzer performt. Dabei geht es nicht nur um das schnellere Laden einer Website, sondern darum, wie schnell die Nutzer sie tatsächlich nutzen können.

Laut einer aktuellen Studie kann eine Verzögerung von 1 Sekunde bei der Seitenladezeit zu 7% Verlusten bei den Conversion, 11% weniger Seitenaufrufen und 16% weniger Kundenzufriedenheit führen.

Deshalb ist es entscheidend, deine Website auf Geschwindigkeit und Performance zu optimieren. Die meisten Tools zur Leistungsmessung berücksichtigen jedoch nicht wirklich die Qualität der User Experience.

Eine schnellere Website mit schlechtem Nutzererlebnis kostet dich immer noch Conversions, führt zu weniger Seitenaufrufe und bringt eine schlechte Kundenzufriedenheit. Die Verbesserung der Core Web Vitals hilft dir, das zu beheben.

User Experience ist auch ein wichtiger Faktor für das SEO-Ranking. Google hat bereits angekündigt, dass ab Juni 2021 das Suchalgorithmus-Update die Seitenerfahrung als einen der Ranking Faktoren einbeziehen wird.

Wie sehr werden die Core Web Vitals SEO beeinflussen?

Google hat ein ganzes Video über die Beziehung zwischen den Core Web Vitals und SEO veröffentlicht:

Hier ist das wichtigste Zitat aus dem Video:

„Im Allgemeinen priorisieren wir (Google) Seiten mit den besten Informationen, auch wenn einige Aspekte der Seitenerfahrung unterdurchschnittlich sind. Ein gutes Seitenerlebnis hat keinen Vorrang vor großartigen, relevanten Inhalten.“

Wie erwartet, ist hochwertiger Content immer noch King. Gleichzeitig erhöhen die Core Web Vitals zweifelsohne die Bedeutung der gesamten User Experience als Ranking-Faktor.

Wenn du also versuchst, in einem Bereich zu ranken, in dem die Informationsqualität weitgehend identisch ist, kann die Optimierung und Verbesserung der Core Web Vitals einen großen Unterschied machen. Du kannst dir diesen neuen Faktor als Tie-Breaker vorstellen.

Denke aber immer daran, dass nichts einen hochwertigen Inhalt auf deiner Seite ersetzen kann.

Core Web Vitals Messen – Der Test

Kürzlich hat Google neue Tests, Berichte und Erweiterungen erstellt, um die Leistung von Core Web Vitals zu messen.

Die wichtigsten davon sind:

  • Die aktualisierte Felddatenauswertung in PageSpeed Insights;
  • Der neue Bericht in der Google Search Console;
  • Die Core Web Vitals Chrome Erweiterung.

Wenn es um das Testen und Messen der Core Web Vitals geht, musst du die zwei Hauptkategorien kennen: Labortest-Tools und Feldtest-Tools.

Feldtest-Tools stützen sich auf reale Daten von tatsächlichen Nutzern, die sich für den Chrome User Experience Report angemeldet haben. Das macht sie für Core Web Vitals noch wertvoller.

Core Web Vitals messen mit den PageSpeed Insights

Der einfachste Weg die Core Web Vitals zu messen ist der Test der Google PageSpeed Insights.

Nachdem Du Deine Webseite eingegeben hast und sie getestet wurde, erhältst Du eine konkrete Einschätzung wie die Ladezeiten Deiner Seite sind anhand eines Pagespeed Scores und zudem bekommst Du eine konkrete Einschätzung ob und wie es um die Core Web Vitals bestellt ist, insbesondere konkreter Handlungsempfehlungen, falls deine Webseite die Grenzwerte nicht erreicht, wie in diesem Beispiel hier:

Core Web Vitals Speed Test Ergebnisse
Core Web Vitals optimieren

Der Einfachheit halber siehst du oben eine Meldung, ob Du den Core Web Vital Test bestehst oder eben nicht.

In der Tabelle unten kannst du die aktuelle Punktzahl aller drei Core Vitals sehen. Hier siehst du, wie viel Punkte du für jedes Element erreichen musst, um die Core Web Vitals Tests zu bestehen.

  • Largest Contentful Paint (LCP) – 2.5 Sekunden
  • First Input Delay (FID) – Weniger als 100 Millisekunden
  • Kumulative Layout Shift (CLS) – Weniger als 0,1

 

Diese Bewertung der Core Web Vitals ist Teil des Felddatenberichts. Felddaten werden durch den Chrome User Experience Report (CrUX) bereitgestellt.

Diese Informationen werden von echten Nutzern gesammelt und basieren darauf, was sie auf deiner Website erleben. Wenn es um das Suchranking geht, wird Google diese Feldergebnisse verwenden.

Wie kann man die Google Core Web Vitals für die gesamte Website anzeigen?

Mit dem Page Speed Insights Tool kannst du zudem nun eine einzelne Seite überprüfen. Wenn die Seite, die du prüfst, der Root deines Domainnamens ist, dann kannst du auch auf die ‚Show Origin Summary‘ Checkbox klicken.

Dies zeigt dir den Score für alle Seiten an, die von dieser Quelle stammen.

Core Web Vitals Bericht in der Google Search Console

Google Search Console (GSC) hat zwei neue Core Web Vitals Berichte – einen für Mobile und einen für Desktop.

Google Search Console Core Web Vitals Bericht

Jeder Core Web Vitals Bericht gibt dir Informationen über die Felddaten für Gruppen von URLs und deren Leistung.

Core Web Vitals Bericht

Diese Core Web Vitals Berichte sind großartig, um gemeinsame Probleme über verschiedene URLs hinweg zu finden. Auf diese Weise erhältst du Informationen über deine gesamte Website und nicht nur über eine Seite.

Wenn du zum Beispiel viele identische Produktseiten hast, bei denen das größte Element ein Bild ist, wird die LCP-Metrik für alle ähnlich sein. In diesem Fall findet GSC LCP-Probleme auf all diesen Produktseiten.

Auch nach der Behebung von Core Web Vitals Problemen kannst du Google alarmieren, indem du auf “ Fehlerbehebung überprüfen“ klickst.

Google Search Console Fehler Beheben

Kurz gesagt, diese neuen GSC-Berichte sind der beste Weg, um die Core Web Vitals Leistung für deine gesamte Website zu messen.

Core Web Vitals messen mit der Core Web Vitals Chrome Extension

Für einen schnellen Core Web Vitals Check kannst du diese Chrome Extension verwenden.

Die Erweiterung gibt dir automatisch einen kurzen LCP, CLS und FID Audit.

Core Web Vitals Google Chrome Extension

Es ist nicht sehr detailliert, aber es ist der schnellste Weg, die Core Web Vitals einer Seite zu überprüfen.

Achte nur darauf, die Zahlen in PSI oder GSC zu validieren, da die Erweiterung ab und zu seltsame Ergebnisse produzieren kann.

Wie du für die Core Web Vitals verbessern und optimieren kannst

Nachdem du die Core Web Vitals deiner Seite gemessen hast, ist es an der Zeit, sie zu verbessern und zu optimieren.

Doch bevor wir beginnen, ein kurzer Disclaimer:

Jede Website ist anders und wir können hier unmöglich alle potentiellen Probleme abdecken.

Deinen Core Web Vitals Score zu verbessern ist gar nicht so schwer. Mit ein paar grundlegenden Tipps zur Performance-Optimierung kannst du den erforderlichen Core Web Vitals Score leicht erreichen. Auch ohne über tiefgreifende technische Fähigkeiten zu verfügen.

Im Folgenden findest du bewährte Techniken zur Verbesserung der Web-Performance.

Allerdings kann deine Seite auch von Faktoren betroffen sein, die hier nicht besprochen werden. Analysiere immer deine spezifischen Probleme, bevor du irgendwelche Optimierungen umsetzt.

Aber Achtung! wenn Du keine Ahnung von Technik hast, dann solltest Du Dir unbedingt den Tipp #1 ansehen.

 

#1 Nitropack installieren, anschalten und die Core Web Vitals dadurch automatisch verbessern und optimieren

5.0 out of 5.0 stars

Nitropack

Der für mich einfachste Weg die Core Web Vitals zu verbessern und zu optimieren sowie den Test zu bestehen, und das ganz Ohne Technik Kenntnisse und vor allem auch in nur wenigen Minuten ist es NitroPack* zu installieren.

Als ich NitroPack* das erste mal verwendet habe traute ich meinen Augen nicht. Denn innerhalb kürzester Zeit, quasi auf Knopfdruck erhielt ich folgende Ergebnisse in den Page Speed Insights, inklusive bestandenem Core Web Vitals Test:

Nitropack Erfahrungen Webseite und Wordpress schneller machen

Obwohl noch Luft nach oben ist, bin ich persönlich mit einen Speed Score von 93 auf für die mobile Version, unglaublich zufrieden, zumal ich bevor ich NitroPack mit entsprechenden bspw. WPRocket* genutzt habe, nur einen mobilen Score von ca. nur 30 hatte.

Das hat sich somit quasi “auf Knopfdruck” enorm verbessert.

Und ich dachte nur…Hammer!

Das ist ja genau das, was ich suche!

Hier kannst Du Dir übrigens meine persönlichen und ausführlichen WP Rocket Erfahrungen im Detail ansehen.

Wenn Du die Möglichkeiten von NitroPack für Dich mal unverbindlich testen willst, dann klick einfach auf den nachfolgenden Screenshot oder hier* und gib deine Website in das Feld ein. NitroPack zeigt Dir dann um wieviel es Deine Website schneller machen kann.

Nitropack

Was ist Nitropack?

NitroPack* ist ein All-in-One Website-Performance-Tool, das in den Worten ihrer Landing Page “der einzige Service ist, den du für eine schnelle Website brauchst”.

Einfach ausgedrückt ist NitroPack ein leistungsstarkes Google-Pagespeed-fokussiertes Performance-Optimierungstool.

Es bietet verschiedene Funktionen, wie z.B. die Integration von Amazon CloudFront, CSS-Minifizierung, JavaScript-Komprimierung, etc. All diese Funktionen arbeiten zusammen, um den Google PageSpeed Score deiner Website zu verbessern, ihre Geschwindigkeit zu erhöhen und um die Core Web Vitals zu verbessern.

NitroPack wurde ursprünglich als herunterladbares Plugin im Jahr 2012 entwickelt. Es sollte als Caching-Lösung für E-Commerce-Websites dienen. Nach und nach entwickelte es sich zu einem robusten und zuverlässigen Cloud-basierten Tool um die Webseiten Geschwindigkeit und die Ladezeiten zu verbessern.

Das macht Nitropack

Eines der größten Highlights von NitroPack ist, dass es Amazon CloudFront nutzt, ein sicheres und schnelles Content Delivery Network (CDN). Es ermöglicht deiner Webseite, ein global verbundenes Netzwerk von Proxy-Servern zu nutzen, um große Multimedia-Dateien und andere Assets zwischenzuspeichern. Das wiederum reduziert die Ladezeit deiner Website.

Darüber hinaus minimiert NitroPack CSS-, JavaScript- und HTML-Codes und entfernt alle ungenutzten Codezeilen. Es optimiert auch Bilder, Videos und andere Mediendateien und ermöglicht “Lazy Loading”. All diese Funktionen tragen dazu bei, die Geschwindigkeit der Seite zu verbessern.

Was NitroPack noch lukrativer macht, ist der einfache und mühelose Installationsprozess. Alles, was du tun musst, ist, dich auf der Website anzumelden und das Tool herunterzuladen. Danach kannst du es mit ein paar einfachen Schritten auf deiner Website installieren. NitroPack ist kompatibel mit einer Vielzahl von Plattformen wie WordPress, OpenCart, WooCommerce, Magento, etc.

Ich bin mit NitroPack* wirklich super zufrieden, weil es wie gesagt super einfach ist.

Einfach nur Installieren und anschalten und das Tool macht alles voll automatisch.

Hier kannst Du Dir übrigens meine Nitropack Erfahrungen im Detail ansehen.

Du kannst NitroPack unverbindlich und kostenlos testen, indem Du einfach auf den nachfolgenden Screenshot oder hier* klickst und deine Website in das Feld eingibst.

NitroPack* zeigt Dir dann um wieviel es Deine Website schneller machen kann. Dann kannst Du Dir ein eigenes Bild davon machen.

Nitropack

Meine bisherigen NitroPack Erfahrungen sind derart positiv, dass ich nun nur noch NitroPack* als All-in-One Tool nutze um meine Webseite schneller zu machen und mir insgesamt über meine WordPress Ladezeit, über die Core Web Vitals und deren Ranking Auswirkungen ab Juni 2021 keinerlei Sorgen mehr machen muss.

Deswegen kann ich NitroPack* voll und ganz empfehlen.

#2 Largest Contentful Paint (LCP)

Im Folgenden schauen wir uns an, wie man den Largest Contentful Paint (LCP) messen und verbessern kann:

Largest Contentful Paint (LCP) messen

Largest Contentful Paint (LCP) misst die Zeit, die es braucht, bis das größte Inhaltselement above the fold geladen ist.

Dieses Element kann ein Bild (einschließlich eines Hintergrundbildes in CSS), ein Video oder ein Textblock sein.

Alles unter 2,5s wird als guter LCP-Wert angesehen. Wenn das größte Above-the-Fold-Element einer Seite bei 75% aller aufgezeichneten Seitenladevorgänge schneller als das lädt, besteht die Seite die LCP-Prüfung.

Largest Contentful Paint messen und verbessern

Eine einfache Möglichkeit zu überprüfen, welches Element diese Bewertung auslöst, ist, die Seite durch PageSpeed Insights laufen zu lassen, nach unten zum Abschnitt „Diagnose“ zu scrollen und auf „Largest Contentful Paint Element“ zu klicken. Von hier aus kannst du die Ressourcen finden, die Probleme verursachen und herausfinden, wie du ihre Ladezeit verbessern kannst

Largest Contentful Paint Diagnose

Largest Contentful Paint (LCP) verbessern und optimieren

Hier sind ein paar Möglichkeiten, deinen Largest Contentful Paint (LCP) zu verbessern und zu optimieren:

  • Besorge dir einen besseren Hostingplan. Eine schnelle Serverantwortzeit (TTFB) ist essentiell für die Geschwindigkeit deiner Seite. Wenn du auf einem langsamen Shared Hosting Server bist, solltest du ein Upgrade auf einen dedizierten Plan in Betracht ziehen;
  • Implementiere kritisches CSS. Kritisches CSS bedeutet, das CSS zu finden, das notwendig ist, um den Inhalt oberhalb der Faltung zu laden und es in den Head-Tag einzubinden. Diese Technik verbessert die tatsächliche und wahrgenommene Leistung;
  • Optimiere Bilder. Oftmals der Hauptgrund für langsame Webseiten, müssen Bilder komprimiert, in der Größe angepasst und in das richtige Format konvertiert werden.
  • Hero-Bilder vorladen. Hero-Bilder sind in der Regel die aussagekräftigsten Above-the-Fold-Elemente, daher ist es für das Nutzererlebnis entscheidend, sie schneller zu laden. Die Verwendung des Links rel=preload, insbesondere für Hero-Bilder, die mit CSS oder JavaScript geladen werden, kann die LCP deutlich reduzieren.

 

#3 First Input Delay (FID)

Im Folgenden schauen wir uns an, wie man den First Input Delay (FID) messen und verbessern kann:

First Input Delay (FID) messen

First Input Delay (FID) ist die Zeit, die der Browser braucht, um auf die erste Benutzerinteraktion zu reagieren.

FID misst die Verzögerung nur nach eindeutigen Aktionen wie Klicks oder Taps. Scrollen und Zoomen haben keinen Einfluss auf diese Metrik.

Um im grünen Bereich zu sein, sollte die FID einer Seite weniger als 100ms für 75% aller Seitenaufrufe des Recorders betragen.

First Input Delay Messen und optimieren

Die FID misst die Verzögerung nur nach der ersten Eingabe. Warum ist das so?

Nun, der erste Eindruck ist alles im Web. Nutzer verlassen sofort die Seite und kommen in den meisten Fällen nicht wieder, wenn eine Website sie beim ersten Besuch frustriert.

Deshalb ist es wichtig, eine niedrige FID zu haben.

JavaScript (JS) ist normalerweise die Hauptursache für FID-Probleme. Übermäßige JS-Nutzung kann zu Long Tasks führen, das sind Zeiträume, in denen deine UI nicht auf Benutzerinteraktionen reagiert. Alles, was den Hauptthread für mehr als 50ms blockiert, wird als Long Task angesehen.

First Input Delay (FID) verbessern und optimieren

Hier ist, was du tun kannst, um deinen First Input Delay (FID) zu verbessern und zu optimieren:

  • Long Tasks aufteilen. Wie ich schon sagte, sollte dies dein Hauptanliegen sein. Long Tasks verhindern, dass der Main Thread rechtzeitig auf Benutzerinteraktionen reagieren kann. Indem du sie aufbrichst, kannst du die Performance deiner Website deutlich verbessern;
  • Minifiziere und komprimiere Code-Dateien. Minification entfernt unnötige Teile aus dem Code wie Whitespace und Zeilenumbrüche. Die Komprimierung modifiziert auch die Codedateien, wodurch sie kleiner werden. Einige Hosting- und CDN-Anbieter implementieren diese Techniken standardmäßig;
  • Verzögere oder entferne unkritische Drittanbieter-Skripte. Skripte von Drittanbietern können manchmal verhindern, dass deine eigenen Skripte pünktlich ausgeführt werden. Überlege dir, welche Skripte den meisten Wert für den Nutzer bieten und priorisiere sie. In den meisten Fällen stehen Werbe- und Pop-up-Skripte nicht ganz oben auf der Liste;
  • Verwende Web Worker. Web Worker erlauben es dir, Skripte im Hintergrund laufen zu lassen, ohne den Main Thread zu beeinflussen. Das Verschieben von Nicht-UI-Operationen in einen Hintergrund-Thread ist generell eine gute Praxis;
  • Optimiere CSS. Während JS der Hauptbösewicht für FID ist, ist CSS standardmäßig auch render-blockierend. Aus diesem Grund kann exzessives CSS auch die User Experience beeinträchtigen. Neben der Implementierung von Critical CSS und dem Minifizieren und Komprimieren von CSS-Dateien, lohnt es sich auch, das ungenutzte CSS auf deiner Seite zu reduzieren.

 

#4 Cumulative Layout Shift (CLS) verbessern

Im Folgenden schauen wir uns an, wie man den Cumulative Layout Shift (CLS) messen und verbessern kann:

Cumulative Layout Shift (CLS) messen

Cumulative Layout Shift (CLS) misst den Effekt von unerwarteten Layout-Verschiebungen auf einer Seite.

Unerwartete Layoutverschiebungen treten auf, wenn sich Inhalte auf der Seite ohne Benutzereingabe verschieben.

Ein CLS-Wert unter 0,1 bedeutet, dass eine Seite visuell stabil ist. Wenn dies bei 75% der aufgezeichneten Seitenaufrufe der Fall ist, hat die Seite die CLS-Bewertung bestanden.

Cumulative Layout Shift messen und verbessern

Um den CLS-Score zu berechnen, beantwortet Google zwei Fragen:

  • Wie viel des Viewports wurde von der Verschiebung betroffen?
  • Wie weit haben sich die Elemente während der Verschiebung im Vergleich zum Viewport bewegt?

 

Der Gesamt-CLS-Score ist die Summe aller einzelnen Punkte für unerwartete Layoutverschiebungen. So sieht eine unerwartete Layoutverschiebung aus:

Cumulative Layout Shift

PageSpeed Insights kann dir zeigen, welche Elemente auf einer Seite zum Cu,ulative LAyout Shift beitragen:

Cumulative Layout Shift Diagnose

Cumulative Layout Shift (CLS) verbessern und optimieren

Hier sind ein paar Optimierungen, die Layout Shifts deutlich reduzieren können:

  • Vermeide es, Anzeigen und Pop-ups über anderen Inhalten einzufügen. Das GIF oben (von creativebloq.com) ist ein perfektes Beispiel dafür, warum du das nicht tun solltest. Das Einfügen von Inhalten am oberen Rand einer Seite führt dazu, dass sich alles darunter befindliche verschiebt, was zu einem schlechten CLS-Score führt;
  • Füge Bildern und Videos Attribute für Breite und Höhe hinzu. Diese Attribute helfen dem Browser, die richtige Menge an Platz für jedes Element im Voraus zuzuweisen. Dies reduziert Layout-Verschiebungen erheblich;
  • Reserviere Platz für Werbung, iFrames und dynamische Inhalte. Ähnlich wie bei Bildern und Videos können auch diese Elemente Layoutverschiebungen verursachen, wenn sie keinen reservierten Platz haben. Verwende Container mit den richtigen Maßen und der Eigenschaft overflow: hidden, um sicherzustellen, dass der Inhalt nicht über seinen Container hinausgeht;
  • Optimiere die Auslieferung von Schriften. Die Verwendung von link rel=“preload“ und font-display: optional in Kombination kann Layoutverschiebungen und Blitze von unsichtbarem Text verhindern. Schau dir diesen Artikel an, um mehr darüber zu erfahren, wie man das macht.

 

#5 Optimiere deine Bilder

Noch ein kurzes Wort zur Bildoptimierung. Menschen lieben Bilder. Und wir alle benutzen eine Menge davon, richtig? Aber Bilder könnten deinen Core Web Vital Scores schaden. Dafür gibt es ein paar Gründe:

  • Das Bild könnte zu schwer sein.
  • Die Bildabmessungen sind zu groß.
  • Du lädst jedes Bild auf der Seite.
  • Die Bilder werden von deinem Server an Menschen auf der ganzen Welt gesendet.

 

Glücklicherweise gibt es eine einfache Möglichkeit, all diese Probleme zu beheben.

Zuerst solltest du ein paar Dinge beachten, wenn es um Bilder geht:

  • Brauchst du jedes Bild?
  • Welche Dimensionen verwendest du? Wir streben eine Größe von >2000px an.
  • Für Hintergründe solltest du Muster, Farbverläufe oder SVGs verwenden.
  • Beschränke above-the-fold Bilder auf ein Logo und ein Hero-Bild.
  • Verwende keine Slider oder Karussells above-the-fold.

 

Sobald du deine Bilder entrümpelt hast, kannst du den Rest optimieren. Die Bildoptimierung kann die Größe der Bilder reduzieren, ihre Dimensionen verbessern und sie über ein Content Delivery Network (CDN) ausliefern, das Server verwendet, die näher an deinen Nutzern sind. Für all dies empfehle ich wiederum NitroPack*. 

Geschwindigkeit

Fazit – Core Web Vitals verbessern und optimieren

Ab August 2021 sind deine Core Web Vitals Metriken ein weiterer Rankingfaktor, den du im Auge behalten solltest. Obwohl sie ein großartiges Werkzeug zur Verbesserung des Rankings sind, sollten gute Werte auch dazu beitragen, die User Experience zu verbessern.

Mit den genannten Tipps solltest du eine sofortige Verbesserung deiner Ergebnisse sehen. Besser noch, jede der Optionen gibt dir einen guten Startpunkt für weitere Optimierungen der Core Web Vitals.

Und wenn Du es wirklich einfach haben willst, Deine Core Web Vitals zu verbessern und zu optimieren, dann kann ich NitroPack* voll und ganz empfehlen. Einfach Installieren, anschalten und zurücklehnen. Einfacher geht´s nicht mehr.

Was denkst Du über die Core Web Vitals? Schreibe es in die Kommentare!

5/5 (1 Review)