Warum Core Web Vitals?<\/h2>\n
Der Inhalt bleibt entscheidend. Aber wenn du zwei Webseiten mit \u00e4hnlichem Text und \u00e4hnlicher Popularit\u00e4t vergleichst, wird diejenige, die das beste Web-Erlebnis bietet, in den Google-Suchergebnissen h\u00f6her eingestuft.<\/p>\n
Neben einem verbesserten Page Rank k\u00f6nnen leistungsstarke Webseiten auch in das Karussell f\u00fcr die mobile Suche aufgenommen werden. Dies war bisher den Accelerated Mobile Pages (AMP)<\/a> vorbehalten, f\u00fcr die du Inhalte auf eine separate, von Google gehostete Webseite portieren musstest. AMP hat Kritik auf sich gezogen, vor allem weil die Seiten nicht immer schneller sind als eine gut optimierte WordPress- oder statische Webseite. Das ist aber keine Voraussetzung<\/a> mehr.<\/p>\n Egal, wof\u00fcr du dich entscheidest, je schneller und reaktionsschneller deine Seite ist, desto gr\u00f6\u00dfer sind die Chancen, dass sie in den Google-Suchergebnissen besser platziert wird.<\/p>\n Wenn du bedenkst, dass eine durchschnittliche Seite etwa 2 MB gro\u00df ist, mehr als 60 HTTP-Anfragen stellt und 16 Sekunden braucht, um auf einem mobilen Ger\u00e4t vollst\u00e4ndig dargestellt zu werden, wird dir klar, dass es einiges an Verbesserungsm\u00f6glichkeiten f\u00fcr deine Webseite gibt. Wir zeigen dir, wie du diese Verbesserungen am besten erreichen kannst.<\/p>\n Es gibt vier wichtige Ranking-Faktoren, die du pr\u00fcfen solltest, bevor du mit der Leistungsbewertung beginnst:<\/p>\n Sobald du diese Anforderungen erf\u00fcllst, wird deine Webseite auf ihre Leistungsf\u00e4higkeit gepr\u00fcft.<\/p>\n\n Es ist wichtig, dass deine Webseite schnell l\u00e4dt<\/a>, schnell gerendert wird und schnell reagiert. Aber f\u00fchlt es sich f\u00fcr die Nutzer auch schnell an?<\/p>\n Anwendungen zur Leistungsmessung<\/a> wie die Browser DevTools melden technische Messwerte wie:<\/p>\n Mit ihnen lassen sich bestimmte Engp\u00e4sse wie Serverlast, CMS-Caching<\/a>, Browser-Caching, Download-Geschwindigkeiten und JavaScript<\/a>-Effizienz ermitteln. Aber sie k\u00f6nnen nicht feststellen, ob eine Seite ein gutes oder schlechtes Nutzererlebnis bietet. Ein Beispiel:<\/p>\n Core Web Vitals ist Googles Versuch, dieses Dilemma zu l\u00f6sen.<\/p>\n Die Core Web Vitals (CWV) von Google sind drei Leistungskennzahlen, die das reale Nutzererlebnis bewerten:<\/p>\n Dieses neue Google-Algorithmus-Update<\/a> wird ab Ende August 2021 weltweit ausgerollt. Die Core Web Vitals-Kennzahlen wirken sich in erster Linie auf die mobilen Suchergebnisse aus, aber die Desktop-\u00c4quivalente werden folgen, wenn das Experiment erfolgreich ist.<\/p>\n Die LCP-, FID- und CLS-Werte einer Seite basieren auf den echten Nutzermessungen der letzten 28 Tage, die anonym \u00fcber den Chrome-Browser gesammelt wurden. Diese Messwerte k\u00f6nnen aufgrund des Ger\u00e4ts, der Verbindung und anderer gleichzeitiger Aktivit\u00e4ten des Nutzers variieren, daher wird das 75ste Perzentil und nicht der Durchschnitt berechnet.<\/p>\n Mit anderen Worten: Die Messwerte aller Nutzer\/innen werden vom besten zum schlechtesten sortiert, und der Wert am Dreiviertelpunkt wird genommen. Drei von vier Website-Besuchern werden also dieses Leistungsniveau oder mehr erreichen.<\/p>\n Jede Seite, die bei allen drei Core Web Vitals-Kennzahlen einen guten (gr\u00fcnen) Wert erreicht, wird in den Suchergebnissen h\u00f6her eingestuft und in das Karussell der „Top Stories“ in der Google News-App aufgenommen.<\/p>\n In den folgenden Abschnitten beschreiben wir den Algorithmus, der zur Berechnung einer Kennzahl verwendet wird, die Tools, mit denen du den Wert einer Seite ermitteln kannst, typische Ursachen f\u00fcr niedrige Werte und die Schritte, die du unternehmen kannst, um Leistungsprobleme zu beheben.<\/p>\n Largest Contentful Paint misst die Ladeleistung<\/a>. Im Wesentlichen geht es darum, wie schnell nutzbare Inhalte auf der Seite gerendert werden.<\/p>\n LCP analysiert, wie lange es dauert, bis das gr\u00f6\u00dfte Bild oder der gr\u00f6\u00dfte Textblock innerhalb des Browserfensters (above the fold) sichtbar wird. In den meisten F\u00e4llen ist das prominenteste Element ein Hero-Bild, ein Banner, eine \u00dcberschrift oder ein gro\u00dfer Textblock.<\/p>\n Jedes der folgenden Elemente kommt f\u00fcr die Analyse von Largest Contentful Paint in Frage:<\/p>\n Seiten, bei denen das Largest Contentful Paint innerhalb der ersten 2,5 Sekunden nach dem Laden der Seite abgeschlossen ist, gelten als gut (gr\u00fcn). Seiten, die l\u00e4nger als 4,0 Sekunden dauern, gelten als schlecht (rot):<\/p>\n LCP ist die am einfachsten zu verstehende Metrik von Core Web Vital, aber es ist vielleicht nicht offensichtlich, welches Element f\u00fcr die Analyse ausgew\u00e4hlt wird.<\/p>\n Das DevTools Lighthouse<\/strong> Panel wird in Chromium-basierten Browsern wie Chrome, Edge, Brave<\/a>, Opera und Vivaldi bereitgestellt. \u00d6ffne DevTools \u00fcber das Browsermen\u00fc – normalerweise \u00fcber Mehr Tools<\/strong> > Entwicklertools<\/strong> oder die Tastaturk\u00fcrzel Strg | Cmd + Shift + i<\/strong> oder F12<\/strong> – und navigiere dann zur Registerkarte Lighthouse<\/strong> (in \u00e4lteren Versionen hei\u00dft sie vielleicht Audit<\/strong>).<\/p>\n Erstelle einen Bericht \u00fcber die mobile Leistung<\/strong> und untersuche den daraus resultierenden Leistungsabschnitt. Die gr\u00f6\u00dfte inhaltsreiche Paint-Time wird mit einem erweiterbaren Abschnitt angezeigt, der das ausgew\u00e4hlte Element identifiziert:<\/p>\n Du kannst die gleichen Informationen mit den Online-Tools PageSpeed Insights<\/a> und web.dev Measure<\/a> generieren, wenn du keinen Zugang zu einem Chromium-basierten Browser hast:<\/p>\n Das DevTools Performance<\/strong> Panel zeigt auch eine LCP-Anzeige an. Klicke zum Starten auf das runde Aufzeichnungssymbol<\/strong>, lade deine Seite neu und klicke dann auf die Schaltfl\u00e4che Stopp<\/strong>, um den Bericht anzuzeigen. Klicke auf das LCP-Symbol im Abschnitt Timings<\/strong>, um das Element zu identifizieren und eine Zusammenfassung der Statistiken anzuzeigen.<\/p>\n Die Web Vitals Erweiterung<\/a> ist f\u00fcr Google Chrome verf\u00fcgbar, kann aber auf den meisten Chromium-basierten Browsern installiert werden. Sie berechnet die Core Web Vitals-Kennzahlen f\u00fcr jede Webseite, die du besuchst, und ihr Symbol wird je nach Ergebnis gr\u00fcn, orange oder rot. Du kannst auch auf das Symbol der Erweiterung klicken, um weitere LCP-Details anzuzeigen:<\/p>\n In der Google Search Console<\/a> gibt es jetzt einen Abschnitt Core Web Vitals<\/a>, wenn deine Webseite als Eigenschaft hinzugef\u00fcgt<\/a> wurde. Der Bericht zeigt, wie sich die CWV-Kennzahlen im Laufe der Zeit ver\u00e4ndert haben. Beachte, dass er keine spezifischen LCP-Kennzahlen enth\u00e4lt und dass nur Webseiten mit relativ hohem Traffic verf\u00fcgbar sind:<\/p>\n Mit dem Chrome User Experience Report<\/a> kannst du echte Nutzungsstatistiken, einschlie\u00dflich LCP \u00fcber verschiedene L\u00e4nder, Verbindungen und Ger\u00e4te hinweg, f\u00fcr eine bestimmte URL abfragen. Da es sich um ein \u00f6ffentliches Projekt auf Google BigQuery handelt, musst du dich f\u00fcr ein Google Cloud Platform<\/a>-Konto anmelden und deine Rechnungsdaten angeben. Auch hier ist der Bericht nur dann n\u00fctzlich, wenn eine URL ein relativ hohes Verkehrsaufkommen hat.<\/p>\n Die web-vitals JavaScript-Bibliothek<\/a> schlie\u00dflich ist ein kleines 1 kB gro\u00dfes Skript, das LCP und andere Core Web Vital-Kennzahlen f\u00fcr echte Nutzer\/innen auf deiner Live-Site berechnen kann. Da es von einem CDN heruntergeladen werden kann, kannst du das folgende Skript in deinen HTML Das obige Skript gibt das Objekt in der Konsole aus, obwohl es praktischer ist, die Daten zur weiteren Analyse an einen Server oder Google Analytics<\/a> zu senden.<\/p>\n Schlechte LCP-Bewertungen werden in der Regel durch langsam ladende Seiten verursacht, die verhindern, dass der gr\u00f6\u00dfte Block schnell angezeigt wird:<\/p>\n Eine gr\u00fcndliche Pr\u00fcfung kann Ladeprobleme aufdecken, aber in der Regel geht es darum, die Menge der an den Browser gesendeten Daten zu reduzieren<\/a>. Die folgenden Tipps helfen dir, deinen LCP-Wert zu verbessern:<\/p>\n Die erste Eingabeverz\u00f6gerung misst die Reaktionsf\u00e4higkeit deiner Seite. Im Wesentlichen geht es darum, wie schnell sie auf Benutzeraktionen wie Klicken, Tippen und Scrollen reagiert.<\/p>\n Die FID-Kennzahl wird als die Zeit zwischen der Benutzerinteraktion und der Verarbeitung der Anfrage durch den Browser berechnet. Sie misst nicht die Zeit f\u00fcr die Ausf\u00fchrung der Handler-Funktion, die normalerweise die Eingaben verarbeitet und das DOM aktualisiert.<\/p>\n Seiten mit einer FID-Zeit von 100 Millisekunden oder weniger werden als gut (gr\u00fcn) eingestuft. Seiten, die 300 Millisekunden \u00fcberschreiten, gelten als schlecht (rot):<\/p>\n Die erste Eingabeverz\u00f6gerung kann nicht simuliert werden, da sie nur gemessen werden kann, wenn die Seite einem tats\u00e4chlichen Benutzer angezeigt wird, der mit der Seite interagiert. Das Ergebnis ist daher abh\u00e4ngig von der Prozessorgeschwindigkeit und den F\u00e4higkeiten des jeweiligen Ger\u00e4ts.<\/p>\n Die FID wird weder im DevTools Lighthouse Panel noch in PageSpeed Insights<\/a> berechnet. Sie k\u00f6nnen jedoch die Total Blocking Time (TBT) ermitteln. Dies ist ein guter N\u00e4herungswert f\u00fcr die erste Eingabeverz\u00f6gerung. Sie misst die Differenz der Zeit zwischen:<\/p>\n Die Web Vitals-Erweiterung<\/a> f\u00fcr Google Chrome kann auch eine FID-Metrik anzeigen, nachdem du mit der Seite durch Scrollen oder Klicken interagiert hast. Klicke auf das Symbol der Erweiterung, um mehr Informationen zu erhalten:<\/p>\n Wie LCP<\/a> erm\u00f6glicht auch der Chrome User Experience Report<\/a> die Abfrage echter FID-Statistiken, die \u00fcber verschiedene L\u00e4nder, Verbindungen und Ger\u00e4te f\u00fcr eine bestimmte URL aufgezeichnet wurden.<\/p>\n Die JavaScript-Bibliothek von web-vitals<\/a> kann auch FID-Metriken f\u00fcr echte Nutzer\/innen auf deiner Live-Site berechnen. Du kannst das folgende Skript in deinen HTML Schlechte FID- und TBT-Werte werden in der Regel durch clientseitigen Code verursacht, der den Prozessor auslastet, wie z. B:<\/p>\n Standardm\u00e4\u00dfig laufen Browser auf einem einzigen Thread, der immer nur eine Aufgabe auf einmal bearbeiten kann. Wenn eine JavaScript-Funktion eine Sekunde f\u00fcr die Ausf\u00fchrung braucht, werden alle anderen Rendering-Prozesse w\u00e4hrend dieser Sekunde blockiert. Die Seite kann nicht auf Benutzereingaben reagieren, das DOM nicht aktualisieren, keine Animationen anzeigen usw. Selbst GIF-Animationen k\u00f6nnen in \u00e4lteren Browsern blockiert werden.<\/p>\n Ein clientseitiger JavaScript-Audit kann Probleme aufdecken, aber im Allgemeinen geht es darum, \u00fcberfl\u00fcssigen Code zu entfernen und sicherzustellen, dass Aufgaben schnell ausgef\u00fchrt werden.<\/p>\n Die folgenden Tipps helfen dir, deinen FID-Wert zu verbessern:<\/p>\n CLS misst die visuelle Stabilit\u00e4t der Seite. Im Wesentlichen geht es darum, ob sich der Seiteninhalt unerwartet bewegt oder springt, vor allem beim ersten Laden?<\/p>\n CLS berechnet eine Punktzahl, wenn sich Elemente ohne Vorwarnung oder Benutzerinteraktion bewegen. Du hast das sicher schon erlebt, wenn du einen Artikel auf einem mobilen Ger\u00e4t liest – der Text springt pl\u00f6tzlich aus dem Bildschirm und du verlierst deinen Platz. In den schlimmsten F\u00e4llen klickst du auf einen falschen Link.<\/p>\n CLS-Probleme treten vor allem dann auf, wenn ein gro\u00dfes Bild oder eine Werbung oberhalb der aktuellen Scroll-Position geladen wird und eine Null-H\u00f6he-Fl\u00e4che sofort um mehrere hundert Pixel w\u00e4chst.<\/p>\n Cumulative Layout Shift Scores werden berechnet, indem die folgenden Kennzahlen miteinander multipliziert werden:<\/p>\n \u00a0<\/p>\n Google hat \u00c4nderungen an der CLS-Metrik vorgenommen, um die folgenden Situationen zu ber\u00fccksichtigen:<\/p>\n Seiten mit einem CLS-Wert von 0,1 oder weniger werden als gut (gr\u00fcn) eingestuft. Seiten, die einen Wert von 0,25 \u00fcberschreiten, gelten als schlecht (rot):<\/p>\n CLS-Metriken werden im DevTools Lighthouse<\/strong>-Panel, in PageSpeed Insights<\/a> und in den web.dev Measure<\/a>-Tools berechnet:<\/p>\n Die Web Vitals-Erweiterung<\/a> f\u00fcr Google Chrome zeigt auch die CLS-Kennzahl an:<\/p>\n Wie bei LCP<\/a> und FID<\/a> kannst du mit dem Chrome User Experience Report<\/a> echte CLS-Statistiken abfragen, die \u00fcber verschiedene L\u00e4nder, Verbindungen und Ger\u00e4te f\u00fcr eine bestimmte URL aufgezeichnet wurden.<\/p>\n Die JavaScript-Bibliothek von web-vitals<\/a> kann auch CLS-Metriken f\u00fcr echte Nutzer\/innen auf deiner Live-Site berechnen, genau wie bei LCP und FID. Das folgende Skript kann in deinen HTML Schlechte CLS-Werte werden in der Regel durch langsam ladende Seiteninhalte und dynamische oder nicht dimensionierte DOM-Elemente verursacht:<\/p>\n Eine clientseitige Pr\u00fcfung kann Probleme aufdecken, aber im Allgemeinen geht es darum, sicherzustellen, dass Platz f\u00fcr Inhalte reserviert wird, bevor sie heruntergeladen werden. Die Tipps zur Serveroptimierung, die f\u00fcr Largest Contentful Paint<\/a> vorgeschlagen wurden, werden einen gewissen Nutzen haben, aber es sind noch weitere Verbesserungen m\u00f6glich:<\/p>\nDie wichtigsten Ranking-Faktoren von Google<\/h2>\n
\n
Wie bewertet Google die Webleistung?<\/h2>\n
\n
\n
Was sind Core Web Vitals?<\/h2>\n
\n
Largest Contentful Paint (LCP)<\/h2>\n
\n
<img><\/code>-Element)<\/li>\n<image><\/code> eingebettet in eine <svg><\/code>)<\/li>\n<video><\/code>-Elements gesetzt ist)<\/li>\nbackground-image url()<\/code> geladen)<\/li>\n![\"Largest](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/lcp-rank.png\"){kind=icon}
<\/a>Largest Contentful Paint Analyse Tools<\/h3>\n
![\"DevTools](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/devtools-lcp-lighthouse.png\")
<\/a>![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-lcp.png\")
<\/a>![\"DevTools](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/devtools-lcp-performance.png\")
<\/a>![\"Web](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-lcp.png\")
<\/a>![\"Google](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/console-lcp.png\")
<\/a><head><\/code> einf\u00fcgen:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getLCP } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetLCP(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\ngetLCP()<\/code> ist eine asynchrone Funktion, der ein Callback \u00fcbergeben wird, der ausgel\u00f6st wird, wenn der LCP-Wert berechnet wurde (obwohl er m\u00f6glicherweise nie ausgel\u00f6st wird, wenn die Seite in einem Hintergrund-Tab geladen wird). Der Callback-Funktion wird ein Objekt \u00fcbergeben, das Folgendes enth\u00e4lt:<\/p>\n\n
name<\/strong><\/code>: der Name der Metrik („LCP“ in diesem Fall)<\/li>\nWert<\/strong><\/code>: der berechnete Wert<\/li>\nid<\/code><\/strong>: eine eindeutige ID, die diese Metrik f\u00fcr die aktuelle Seite repr\u00e4sentiert<\/li>\ndelta<\/strong><\/code>: das Delta zwischen dem aktuellen Wert und dem zuletzt gemeldeten Wert<\/li>\nEintr\u00e4ge<\/strong><\/code>: ein Array von Eintr\u00e4gen, die bei der Wertberechnung verwendet werden<\/li>\n<\/ul>\nH\u00e4ufige Ursachen f\u00fcr schlechte Largest Contentful Paint Scores<\/h3>\n
\n
Wie man den gr\u00f6\u00dften Contentful Paint Scores verbessert<\/h3>\n
\n
loading=\"lazy\"<\/code>-Attribut hinzu, um das Laden von Bildern zu verz\u00f6gern. F\u00fcge Attribute f\u00fcr Breite und H\u00f6he hinzu, um sicherzustellen, dass ein angemessener Platz auf der Seite reserviert wird, bevor das Bild fertig geladen ist.<\/li>\n<link><\/code>-Block am Anfang der Seite ein und lade dann weitere Stylesheets asynchron.<\/li>\nErste Eingabeverz\u00f6gerung (FID)<\/h2>\n
![\"First](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/fid-rank.png\"){kind=icon}
<\/a>First Input Delay Analyse-Tools<\/h3>\n
\n
![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-fid.png\")
<\/a>![\"Web](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-fid.png\")
<\/a><head><\/code> einf\u00fcgen, um FID-Metriken an eine Callback-Funktion auszugeben:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getFID } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetFID(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\nH\u00e4ufige Ursachen f\u00fcr schlechte First Input Delay Scores<\/h3>\n
\n
Wie du die Werte f\u00fcr die erste Eingabeverz\u00f6gerung verbesserst<\/h3>\n
\n
Kumulative Layout-Verschiebung (CLS)<\/h2>\n
\n
\n
![\"Kumulative](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/cls-rank.png\"){kind=icon}
<\/a>Tools zur Analyse der kumulativen Layoutverschiebung<\/h3>\n
![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-cls.png\")
<\/a>![\"Web](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-cls.png\")
<\/a><head><\/code> eingef\u00fcgt werden, um CLS-Metriken an eine Callback-Funktion auszugeben:<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getCLS } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetCLS(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\nH\u00e4ufige Ursachen f\u00fcr schlechte Cumulative Layout Shift Scores<\/h3>\n
\n
Wie du die kumulativen Layoutverschiebungswerte verbesserst<\/h3>\n
\n
<img><\/code>– und <iframe><\/code>-Tags hinzu oder verwende die neue CSS-Eigenschaft aspect-ratio<\/a>, um sicherzustellen, dass vor dem Herunterladen von Inhalten der entsprechende Platz auf der Seite reserviert wird.<\/li>\n<link><\/code>-Block am Anfang der Seite ein und lade dann zus\u00e4tzliche Stylesheets asynchron.<\/li>\n