Neue Google-Kriterien: Core Web Vitals
Veröffentlicht: 2020-12-01Mai 2021 aktualisiert
Im SEO-Marketing konkurrieren täglich Unternehmen, Blogs, Websites und Online-Plattformen. Die Spitze von Googles Liste ist, wo sie sein wollen.
Von den unzähligen Einträgen bei Google schaffen es 90 % der aufgelisteten Websites nie auf die Titelseite. Die 10 %, die dies tun, sind die bezahlten Anzeigen, Knowledge Graphs und ungefähr zehn organische Einträge. Der Verkehr zwischen ihnen ist ungleichmäßig. Weniger als 3 % der Webnutzer schaffen es zu Ergebnissen auf den Folgeseiten.
Bisher waren die Haupteinflussmechanismen des SEO-Marketings Überschriften, Inhalte, Titel-Tags, Schlüsselwörter, Bildbeschreibungen, interne Links, Backlinks usw. Mit dem Fokus auf die Qualitätskontrolle, die Mammut-Engine, wird Google neu einkalkulieren Requisit.
Core Web Vitals sollen zu einem bestimmenden Bestandteil technischer SEO-Agenturen in den USA werden . Es ist auch zu erwarten und neigt dazu, Suchergebnisse neu zu definieren. Während traditionelles SEO-Marketing im Wesentlichen Relevanz, Distanz und Bekanntheit umfasst, wird Core Web Vitals den Wert festigen.
Inhaltsverzeichnis
- Was sind Core Web Vitals?
- Die drei Elemente von Core Web Vitals
- Größte zufriedene Farbe
- Erste Eingangsverzögerung
- Kumulative Layoutverschiebung
- Wichtige Webmetriken
- Core Web Vitals-Analysetools
- Warum ist die Optimierung von Core Web Vitals wichtig?
- Fazit
Was sind Core Web Vitals?
Core Web Vitals sind ein separater Satz von Metriken, die die Benutzererfahrung (UX) auf Websites bestimmen. Letzteres beinhaltet drei verschiedene Seitengeschwindigkeits- und Client-Knoten-Interaktionsmessungen. Die Summe dieser Faktoren wird in einem Bewertungssystem berücksichtigt, das die Priorität bestimmt, die eine Seite als Auflistung erhält.
Die drei Elemente von Core Web Vitals
Größte zufriedene Farbe
Largest Contentful Paint (LCP) ist eine von Google erstellte Messung, um die Zufriedenheit der Nutzer sicherzustellen. Dieser Parameter konzentriert sich eher auf die Leistung als auf die Präsentation. Wenn das Laden der Seite zu lange dauert und der Websurfer die Seite verlässt, gilt dies als unbefriedigend.
Die Ladezeit der Webseite und Google-Erfahrungsfaktoren wie Bild-Tags und Video-Thumbnails bestimmen die LCP-Bewertung. Auch Hintergrundbilder mit CSS und Textelemente wie Absätze, Überschriften und Listen werden auf Fließfähigkeit überwacht.
Ursachen für schlechtes LCP
Langsame Serverantwortzeiten
Die Darstellungsgeschwindigkeit einer Website ist abhängig von der Reaktionszeit eines Servers. Je langsamer der Server ist, desto länger dauert es, bis etwas auf dem Bildschirm eines Geräts angezeigt wird.
Die primäre Lösung hier ist die Optimierung Ihres Servers. Das Caching von Assets und die Cache-First-Bereitstellung von HTMLs beschleunigt Serviceprozesse. Darüber hinaus ist es ratsam, Benutzer zu einem nahe gelegenen CDN weiterzuleiten. Durch den frühen Aufbau von Verbindungen zu Drittanbietern wird die Latenz minimal, was für responsive Websites auf Mobilgeräten wichtig ist.
CSS- und JavaScript-Renderblockierung.
Browser stellen Inhalte bereit, indem sie HTML-Markups in einen DOM-Baum parsen. Sollte der Parser auf externe Stylesheets stoßen, hält er an. Skripte und externe Stylesheets verzögern die Verteilung von blockierenden Ressourcen, FCP und letztendlich LCP.
CSS und Java sind robust und können durch Respekt, Minimierung und Verkleinerung „viel Gewicht“ verlieren. Zu den für die Java-Komprimierung verfügbaren Software gehören UglifyJS2, Closure Compiler und YUI Compressor. CSSnano, UNCSS und CSSO sind Mechanismen, die CSS komprimieren können. Die Zeit der Ladeoptimierung wird sich durch den Einsatz dieser Tools verbessern.
Schlechte Ressourcenladezeiten
Während die Zunahme der CSS- und JavaScript-Aktivität schlechte Ergebnisse liefert, erweisen sich andere Komponenten als ebenso problematisch. Elemente, die sich negativ auf LCP auswirken, sind < image >, < img > und < video > sowie Komponenten auf Blockebene, die Textknoten enthalten.
Hier hilft die Optimierung und Komprimierung von Bild- und Textdateien. Durch das Vorladen der erforderlichen Ressourcen und das Zwischenspeichern von Assets bei gleichzeitigem Einsatz eines anderen Servicemitarbeiters wird die benötigte Zeit reduziert.
Benutzerseitiges Rendering
Sites, die den größten Teil ihres Renderings auf Client-Seite erledigen, verlieren ein gutes Maß an Kontrolle. Der Nachteil dieser Option zeigt sich beim Einsatz großer JavaScript-Bundles. In den meisten Fällen wird der Inhalt erst angezeigt, wenn JavaScript seine Wiedergabe abgeschlossen hat. es wird die LCP-Ratings gefährden.
Die JavaScript-Minimierung ist von entscheidender Bedeutung, und das serverseitige Rendering ist dem benutzerseitigen vorzuziehen. Eine weitere Lösung ist das Pre-Rendering, das bei der Ladezeitoptimierung hilft.
Erste Eingangsverzögerung
First Input Delay (FID) misst die Zeit von der ersten Benutzerinteraktion bis zur Reaktion des Browsers. Es ist ein entscheidender Faktor, ob der Kunde die Website verlässt oder nicht. Verzögerungen treten im Allgemeinen auf, wenn der Haupt-Thread eines Browsers ausgelastet ist.
JavaScript-Dateien, die von lokalen Apps geladen werden, sind normalerweise für FID-Probleme verantwortlich. Was passiert, ist, dass Browser versuchen, zu parsen und auszuführen, aber es tritt Latenz auf, was dazu führt, dass Endgeräte nicht mehr reagieren. Eine niedrige FID-Bewertung kann bedeuten, dass die betreffende Website oder Seite unbrauchbar ist.
Ursachen für einen schlechten FID
JavaScript
Im Allgemeinen kann der Browser nicht auf Interaktionen reagieren, während der Hauptthread beschäftigt ist. Eine starke JavaScript-Ausführung verschlimmert dieses Problem und führt zu Verzögerungen bei der Ladegeschwindigkeit.
Indem Sie lange Aufgaben aufteilen, können Sie den Rückstand abbauen. Darüber hinaus sollte die Begrenzung der JavaScript-Laufzeit die Reaktionsfähigkeit verbessern. Auch der Einsatz eines Webworkers ist hilfreich. All dies sind Möglichkeiten, die Website-Metriken für die Interaktion zu optimieren.
Kumulative Layoutverschiebung
Die Metrik Cumulative Layout Shift (CLS) misst die Stabilität des Designs einer Webseite. Es funktioniert, um sicherzustellen, dass Kundeninteraktionen so natürlich wie möglich ablaufen. Web-Surfer erleben oft Unterbrechungen oder Sprünge, während sie Inhalte auf einer Website ansehen. Daher führt es zu einer Unterbrechung der Konzentration und schafft eine schlechte Erfahrung.
Die Unannehmlichkeiten sind auf ein schwaches Design zurückzuführen. Die Auswirkungen überwiegen auf mobilen responsiven Websites und Desktop-Browsern.
Das Fehlen korrekter Designelemente führt zu visueller Instabilität. Letzteres erzwingt häufig plötzliche Layoutverschiebungen, was dazu führt, dass der Benutzer oft versehentlich auf unerwünschte Inhalte klickt. Typische Beispiele sind Websites mit Popup-Werbung.
Auch neue Designs können Webseiten verlangsamen, selbst wenn sie korrekt strukturiert sind. Der Google-Algorithmus kompensiert dies, indem er eine Auslassung von 500 ms zulässt, bevor er mit dem Berechnungsprozess beginnt.
Häufige Ursachen von CLS
Bilder ohne Maße
Der Ausschluss von Breiten- und Höhenattributen sowohl für Videos als auch für Bilder führt zu einem niedrigen Ranking. Viele Menschen reservieren keinen Platz für Medien, was zu Sprüngen und Verschiebungen führt.
Die Lösung hier ist einfach; Geben Sie immer Breite und Höhe an. Die andere Option sind CSS-Seitenverhältnisfelder. Sie sind praktisch für die Reservierung von Speicherplatz auf Websites. Dies ist besonders nützlich auf Websites, die Anzeigen hosten.
Anzeigen, Einbettungen und Iframes ohne Dimensionen
Anzeigen leisten einen großen Beitrag zum Thema. Werbenetzwerke entscheiden sich für die dynamische Größenanpassung im Gegensatz zur statischen Variante, die den Traffic auf Websites erhöht. Leider geht dies zu Lasten der Desktop- oder mobilen Erfahrung.
Bestimmte Widgets ermöglichen das Einbetten von Elementen wie Videos, Karten und Social-Media-Inhalten in die Webseite. Das Problem dabei ist, dass die Website oft keine Ahnung von der genauen Größe oder Zusammensetzung der Einbettung hat. Wenn kein Speicherplatz reserviert wird, wird die Instabilität offensichtlich, sobald die Seite geladen wird.
Vorkalkulation des notwendigen Platzbedarfs für eine Einbettung oder einen Fallback der Site bannt die Gefahr von CLS. Browser-Entwicklertools sind praktisch, um die Höhe und Breite des Ergebnisses zu ermitteln. Nachdem dies festgelegt wurde, passt der Iframe bei jedem Laden der Seite automatisch in den reservierten Bereich.
Dynamisch eingefügter Inhalt
Auch neu eingefügte Elemente über alten Medien führen zu Layoutverschiebungen. Typische Beispiele hierfür sind Call-to-Action-Banner. Sie blockieren nicht nur die Interaktion, sondern irritieren eher, als dass sie überzeugen.
Reservieren Sie noch einmal Platz. Darüber hinaus können Website-Designer ein UI-Skelett hinzufügen. Letzteres ist ein Platzhalter, der verhindert, dass der Text beim Laden des Bildes migriert.
Webfonts, die FOIT/FOUT verursachen
Das Herunterladen und Rendern von Web-Schriftarten ist für einen Flash of Unstyled Text (FOUT) von entscheidender Bedeutung. In diesem Fall ersetzt ein neuer Stil den Fallback-Druck.
Eine weitere Konsequenz ist Flash of Invisible Text (FOIT), der die Schriftart verbirgt, bis eine neue Groß-/Kleinschreibung verfügbar wird.
Die API zum Laden von Schriftarten reduziert die Zeit, die benötigt wird, um die erforderlichen Schriftstile zu erhalten, wodurch das Auftreten von FOUT und FOIT minimiert oder beseitigt wird.
Wichtige Webmetriken
Wie bereits erwähnt, haben die drei Core Web Vital-Elemente individuelle Messungen. Jeweils nach unterschiedlichen Zeitstandards abgestuft.
- Eine gute LCP-Bewertung liegt bei weniger als 2,5 s. Google gewährt Nachsicht für alles unter 4 Sekunden, aber das bedeutet immer noch, dass es Raum für Verbesserungen gibt.
- Die Maßeinheit von FID ist Millisekunden und wenn die Zeit zwischen Benutzereingabe und Webseitenreaktion unter 100 fällt, ist dies ideal. Eine Metrik von 300 ms ist akzeptabel, deutet aber auf kommende Probleme hin. Alles über 300 ms führt zum Abstieg des Weblistings.
- Der ideale Wert für CLS ist Null. Google-Algorithmen akzeptieren 0,1, aber da die maximale Akzeptanz 0,25 beträgt, entsteht ein zu geringer Spielraum für Flexibilität. Die Website-Administratoren können auch nach vollständiger Perfektion streben.
Core Web Vitals-Analysetools
- Web Vitals For Chrome ist wie jede andere Erweiterung, und einige sind mit dieser Option aus Datenschutzgründen möglicherweise nicht zufrieden.
- Page Speed Insight ist eine einfache Benutzeroberfläche, mit der Sie zwischen Desktop- und mobilen Optionen wechseln können. PC- und Smart-Device-Ergebnisse unterscheiden sich unabhängig von der verwendeten Analysesoftware. Das oben Genannte erzeugt Felddaten von echten Google-Nutzern über 28 Tage.
- Die Designs von Chrome Dev Tools und Lighthouse ermöglichen die Überwachung von LCP und CLS. Leider ist dieselbe Software nicht in der Lage, FID zu messen, aber dafür gibt es TBT.
Mit der Verbreitung von Core Web Vitals werden zwangsläufig weitere Überwachungstools auf den Markt kommen.
Warum ist die Optimierung von Core Web Vitals wichtig?
Das Google Core Update soll im Mai 2021 erfolgen. Das bedeutet, dass die üblichen SEO-Signale fortan nicht mehr ausreichen werden, um ein hohes Ranking bei Google zu halten.
Es ist eine Implementierung eines Standards, der für hochwertige UX eintritt. Die Websites, die den neuen Kriterien entsprechen, sind nicht betroffen. Webseiten, die sich nicht angepasst haben, werden die Auswirkungen sicher spüren, trotz der Effektivität ihrer SEO. Einträge mit schwachen Core Web Vitals werden im Ranking fallen und Platz für konforme Unternehmen schaffen.
Fazit
Mit einer neuen Regulierung im SEO-Marketing ebnet Google den Weg für Verbesserungen. Der Core Web Vital-Standard ist der erste, und viele weitere werden sicher folgen. Diese Maßnahmen schaffen eine Plattform für eine neue Ära des Internets, um mit anderen fehlerfrei aufkommenden Technologien zu verschmelzen. Darüber hinaus können Sie diese Tipps verwenden, um die Ladegeschwindigkeit Ihrer Website zu erhöhen.