Google ist bestrebt, die Ergebnisse, die den Nutzern angezeigt werden, zu optimieren und zu verbessern. Im Einklang mit diesem Bestreben hat Google angekündigt, dass die Messzahlen für Core Web Vitals ab Mai 2021 ein Rankingsignal sein werden.
In diesem Artikel erklären wir, was Core Web Vitals sind, wie man sie misst und wie man seine Website gemäß den Richtlinien optimiert. Wir werden unsere Erfahrungen mit der Optimierung dieser Website einbeziehen, die die folgenden Ergebnisse erzielt:
Desktop-Ergebnisse:
Mobile Ergebnisse:
Was sind Core Web Vitals?
Core Web Vitals sind eine Reihe von Messzahlen, die die Erfahrung eines Benutzers beim Laden einer Webseite auf einem Desktop oder einem mobilen Gerät bewerten.
Mittlerweile weiß jeder, dass die Performance einer Website wichtig ist. Je schneller, desto besser – aber nur eine gute Zahl bei Google PageSpeed Insights oder GTMetrix zu erreichen, ist nicht genug.
Diese Messzahlen wurden erstellt, um sich auf das zu konzentrieren, was am wichtigsten ist: das Laden der Seite (LCP), die Zeit bis zur Interaktivität (FID) und die visuelle Stabilität (CLS).
- Largest Contentful Paint (LCP): misst die wahrgenommene Ladezeit, die benötigt wird, bis das Hauptelement der Seite erscheint. Der ideale Wert für LCP ist weniger als 2,5 Sekunden.
- First Input Delay (FID): misst die Zeit, die es dauert, bis die Seite interaktiv wird. Das heißt, wie lange es dauert, bis ein Benutzer scrollen oder auf ein Element, zum Beispiel eine Schaltfläche, klicken kann. Der ideale Wert für FID ist kleiner als 100 Millisekunden oder 0,1 Sekunden.
- Cumulative Layout Shift (CLS): misst die visuelle Stabilität oder die Verschiebung von Änderungen. Seiten, auf denen Anzeigen geladen werden und den Inhalt verschieben, können für Benutzer störend sein, wenn sie lesen oder versuchen, auf einen Link zu klicken. Dies kann auch durch das Laden von Schriftarten, die ihre Größe ändern, oder Bilder ohne definierte Abmessungen beeinträchtigt werden. Der Idealwert für CLS ist weniger als 0,1 Sekunden.
Wie man Core Web Vitals misst
Der einfachste Weg, diese Messzahlen zu erhalten, ist die Verwendung von PageSpeed Insights oder einer Chrome-Erweiterung. Wenn du jedoch eine größere Website hast und über verschiedene Seitentypen hinweg messen möchtest, kannst du ein CrUX-Dashboard erstellen, Sistrix verwenden, einen Website-Crawler, der die Website als Benutzer wiedergibt, oder du kannst Google Analytics nutzen.
Verstehen der Messzahlen
Das Tool PageSpeed Insights von Google zeigt eine ganze Tabelle, die diesen Messzahlen gewidmet ist. Sie ist sehr intuitiv zu verstehen, da sie Farben verwendet (Rot für schlecht, Grün für gut).
Sobald du mit der Analyse deiner Webseite beginnst, gibt dir das Tool Vorschläge, wie du diese spezifische Seite optimieren kannst. In unserem Fall heißt es zum Beispiel “Entferne ungenutztes CSS” – das liegt daran, dass wir Elementor verwenden, um unsere Seiten zu erstellen, und das fügt viele Stile aus allen unseren Seitenvorlagen hinzu.
Neue Chrome-Erweiterung
Diese Erweiterung misst und markiert die drei Schlüssel-Messzahlen der Core Web Vitals und zeigt dir, welche Elemente zu den Werten beitragen und wie du diese beheben kannst. Sie wird auch die HTML-Elemente protokollieren, die das Layout verschoben haben. Hole dir die Erweiterung hier.
Erstellen eines CrUX-Dashboards
Wir empfehlen, den Artikel von Sam Underwood zu lesen, wie du ein CrUX-Dashboard erstellen kannst, um deine Projekte und die Websites deiner Kunden in Data Studio zu verfolgen, und zwar hier.
Dies ist das Ergebnis, wenn du eine Kopie der Vorlage für die Website von Key Content erstellst:
Messen mit Sistrix
Füge deine Domain hinzu, gehe zu Struktur > Core Web Vitals, und du findest die letzten Ergebnisse:
Dann kannst du den Entwicklungstrend deiner Website sehen, wobei verschiedene Farben verwendet werden, um leicht zu erkennen, wann etwas falsch ist oder welche Optimierung gut funktioniert.
Du kannst auch die Leistung nach Land finden:
Mit all diesen Informationen wäre es einfach, dein eigenes Dashboard zu erstellen, um die Ergebnisse zu verfolgen:
- die Websites deiner Kunden
- deine Projekte
- die Websites deiner Konkurrenten
Diese Analyse zeigt die Wettbewerber in der Kosmetikbranche:
Google Analytics verwenden
Matteo Zambon von TagManagerItalia hat hier eine tolle Anleitung geschrieben, wie man Core Web Vitals mit Google Analytics unter Verwendung des Google Tag Managers tracken kann.
In sechs Schritten kannst du oder dein Entwickler den Code implementieren, der benötigt wird, um die Daten von deinen Nutzern zu sammeln. Sobald du anfängst, alle Informationen zu sammeln, kannst du Maßnahmen ergreifen und mit der Optimierung der Website beginnen.
Wie du deine Google Core Web Vitals verbessern kannst
Die folgenden Empfehlungen helfen dir, die Geschwindigkeit deiner Seite und die Erfahrung der Nutzer mit der Website zu verbessern:
Verbessern der LCP- Messzahlen:
- Verbessern der Server-Antwortzeit
- Beseitige blockierende JavaScript- und CSS-Funktionen
- Verringern der Ressourcen-Ladezeit
- Optimiere das Rendering von Frontend-Elementen
Optimieren der FID-Metriken:
- JavaScript-Elemente und -Laufzeit reduzieren
- Minimiere die Arbeit des Hauptelements der Seite
CLS- Messzahlen reduzieren:
- Gib immer exakte Abmessungen für die Bilder an
- Wenn deine Site “Lazy Load” für Bilder verwendet, stelle sicher, dass der Austausch die Position der Elemente nicht verändert
- Wenn deine Seite benutzerdefinierte Schriftarten verwendet, solltest du font-display:swap gegen block austauschen
- Wenn deine Seite Anzeigen verwendet, dann stelle sicher, dass diese eine feste Größe haben, bis sie geladen sind
Erfahre mehr darüber, wie man für Techbeatly den Score der Core Web Vitals verbessern kann.
Verbessere deine WordPress-Site mit einem einzigen Plugin
Ich arbeite seit mehr als einem Jahrzehnt mit WordPress, und die Verbesserung der Seitengeschwindigkeit ist wirklich schwierig. Ich habe viele Cache-Plugins ausprobiert (WP Fastest Cache, WP Rocket, WP Super Cache, W3 Total Cache und viele mehr), sowie CDN-Dienste (StackPath, Fast.io, KeyCDN, CloudFront …) und eine Reihe von Bild-Plugin-Optimierern.
Und dann habe ich NitroPack ausprobiert – es ist eine Mischung aus fortschrittlichem Caching, CDN, Bild- und HTML-Optimierer, die einfach funktioniert. Wir haben nichts mit NitroPack zu tun, deshalb ist die Bewertung unsere ehrliche Meinung.
Vor NitroPack waren unsere Ergebnisse schlecht. Wir verwenden Elementor für das Design, was viele Assets hinzufügt, um die Website “hübsch” zu machen, jedoch zu einem hohen Preis in Bezug auf das Laden. Wir haben fünf Plugins verwendet, um die Geschwindigkeit der Website zu verbessern, aber jetzt haben wir alle gelöscht und verwenden nur noch Nitropack. Es ist kostenlos und arbeitet rasend schnell.
Fazit
Mache deine Hausaufgaben – warte nicht bis Mai 2021, um deine Website zu optimieren. Fange klein an, miss, teste und priorisiere die Dinge, die dir die besten Ergebnisse bringen.
Das Reduzieren von JavaScript-Elementen und das Optimieren von Bildern können dir helfen, die Geschwindigkeit um ein paar Sekunden zu erhöhen und die Gesamtgröße der Seite zu reduzieren. Der Wechsel auf einen besseren Server, die Umstellung auf statische Inhalte mit Technologien wie Jamstack oder die Implementierung eines Content Delivery Network (CDN) können ebenfalls nützlich sein.
