4 neue Techniken zur Beschleunigung Ihrer Website und zur Behebung grundlegender Web-Vitalfunktionen
Dieser Beitrag wurde von DebugBear gesponsert. Die in diesem Artikel geäußerten Meinungen sind die eigenen des Sponsors.
Möchten Sie Ihre Website schnell machen?
Glücklicherweise gibt es viele Techniken und Anleitungen, die Ihnen dabei helfen, Ihre Website zu beschleunigen.
Tatsächlich wurden erst im letzten Jahr mehrere neue Browserfunktionen veröffentlicht, die Folgendes bieten:
- Neue Möglichkeiten zur Optimierung Ihrer Website.
- Neue Möglichkeiten, Ursachen für langsame Leistung zu identifizieren.
Alles in Ihrem Browser.
In diesem Artikel geht es also um diese neuen Browser-SEO-Funktionen und wie Sie sie nutzen können, um die Core Web Vitals-Bewertung von Google zu bestehen.
Warum die Website-Leistung für Benutzererfahrung und SEO von entscheidender Bedeutung ist
Eine schnelle Website macht Ihre Benutzer zufriedener und erhöht die Konversionsraten.
Aber auch Leistung ist ein Google-Rankingfaktor.
Google hat drei Kennzahlen zur Nutzererfahrung definiert, die sogenannten Core Web Vitals:
- Largest Contentful Paint: Wie schnell erscheinen Seiteninhalte?
- Kumulative Layoutverschiebung: Verschieben sich Inhalte nach dem Laden?
- Interaktion mit Next Paint: Wie reagiert die Seite auf Benutzereingaben?
Für jede dieser Metriken gibt es einen maximalen Schwellenwert, der nicht überschritten werden sollte, um die Web-Vitals-Bewertung zu bestehen.
1. Fügen Sie eine sofortige Navigation mit „Spekulationsregeln“ hinzu
Neue Schlüsseldefinitionen:
- Sofortige Navigation.
- Spekulationsregeln.
Wenn Websites langsam laden, liegt das meist daran, dass verschiedene Ressourcen vom Website-Server geladen werden müssen. Aber was wäre, wenn es eine Möglichkeit gäbe, eine sofortige Navigation zu ermöglichen, bei der Besucher nicht warten müssen?
Dieses Jahr hat Chrome eine neue Funktion namens Spekulationsregeln eingeführt, die genau das erreichen kann. Nach dem Laden der ersten Seite einer Website können im Hintergrund weitere Seiten vorgeladen werden. Wenn der Besucher dann auf einen Link klickt, erscheint sofort die neue Seite.
Das Beste daran ist, dass diese Funktion einfach durch Hinzufügen eines zu implementieren ist Tag zur Website hinzufügen. Sie können dann:
- Rendern Sie automatisch ganze Seiten vorab, die der Benutzer wahrscheinlich als nächstes besuchen wird
- Laden Sie Seiteninhalte vorab, wenn ein Benutzer mit der Maus über einen Link fährt
- Laden Sie eine Seite teilweise vor, um Ressourcenverbrauch und Navigationsgeschwindigkeit auszugleichen
Die nächste Seite wird dann viel schneller geladen, was zu einem großartigen Benutzererlebnis und einem niedrigen Wert für „Größter Contentful Paint“ führt.
2. Optimieren Sie die Interaktion mit der nächsten Farbe mit der neuen API für lange Animationsrahmen
Neue Schlüsseldefinition:
- API für lange Animationsrahmen.
Die Interaktion mit Next Paint (INP) wurde im März 2024 zu einer zentralen Web Vitals-Metrik. Langsame Interaktionen werden häufig durch auf der Seite ausgeführten JavaScript-Code verursacht. Allerdings kann es oft schwierig sein, zu erkennen, welche Interaktionen langsam sind und welche Skripte Verzögerungen verursachen.
Aus diesem Grund hat Google Chrome die Long Animation Frames API hinzugefügt. Es kann Rendering-Verzögerungen bestimmten Skripten zuordnen, die auf Ihrer Website ausgeführt werden, und Ihnen sagen, was Sie beheben müssen, um Ihren INP-Score zu verbessern.
Die direkte Verwendung der API ist etwas kompliziert, aber Sie können die web-vitals.js-Bibliothek von Google oder ein kommerzielles Tool wie DebugBear verwenden, um die Daten zu sammeln.
Mit der Funktion „Lange Animationsrahmen“ können Sie Folgendes herausfinden:
- Welche spezifischen Skripte verlangsamen Ihre Website?
- Warum der Code ausgeführt wird (z. B. als Reaktion auf eine Benutzerinteraktion oder aufgrund einer Hintergrundaufgabe, die auf der Seite ausgeführt wird)
- Wie die Verarbeitungszeit aufgewendet wird (z. B. Ausführen von Code oder Aktualisieren des Seitenlayouts)
3. Sehen Sie sich die wichtigsten Web-Vitals-Metriken auf der neuen DevTools-Registerkarte „Leistung“ an
Neue Schlüsseldefinition:
- Neue Registerkarte „DevTools-Leistung“.
Chrome DevTools ist seit langem ein großartiges Tool für tiefgreifende technische Leistungsanalysen. Es bot jedoch nicht immer einen guten allgemeinen Überblick über Ihre Core Web Vitals-Daten.
Das hat sich jetzt mit der neuen DevTools-Registerkarte „Leistung“ geändert. Sie können jetzt leicht erkennen:
- Eine Übersicht der Core Web Vitals auf der aktuellen Seite
- Eine Liste der Seiteninteraktionen und Layoutänderungen
- Echte Benutzerdaten aus dem Chrome User Experience (CrUX)-Bericht von Google
Die Liste der Benutzerinteraktionen ist besonders nützlich zum Debuggen schlechter INP-Scores, da Sie nicht mehr ein vollständiges Leistungsprofil aufzeichnen müssen, um zu überprüfen, wie schnell eine Interaktion erfolgt.
4. Analysieren Sie die größten Contentful-Paint-Komponenten
Es gibt viele Faktoren, die sich auf Ihren Wert für Largest Contentful Paint auswirken, sei es die Reaktionszeit des Servers, die Zeit, die für das Herunterladen eines Bilds aufgewendet wird, oder das Warten auf die Anzeige des Inhalts.
Google hat nun einen neuen Artikel veröffentlicht, der anhand realer Nutzerdaten erklärt, welche dieser Komponenten den größten Einfluss haben.
Interessanterweise wurde zwar viel Wert auf die Optimierung von Bildern gelegt, um sie schneller laden zu lassen, Google hat jedoch festgestellt, dass das Laden eines LCP-Bildes tatsächlich nur etwa 10 % des gesamten LCP-Metrikwerts ausmacht. Wir betrachten hier Websites mit einer durchschnittlichen LCP-Bewertung, aber dieses Ergebnis stimmt mit anderen Website-Kategorien überein.
Theoretisch kann das Bild der Hauptseite sofort geladen werden, nachdem der Server dem Browser das HTML-Dokument bereitgestellt hat. Es stellt sich jedoch heraus, dass es oft eine große Verzögerung gibt, bis das Bild tatsächlich geladen wird, wie die Komponente „Image Load Delay“ zeigt, die 27 % des gesamten LCP-Scores in der Tabelle oben ausmacht.
Diese Erkenntnisse können nicht verallgemeinert und auf eine bestimmte Website angewendet werden. Stattdessen können Sie einen Lighthouse-Test mit einem Tool wie PageSpeed Insights durchführen. Die Aufschlüsselung finden Sie im Audit „Größtes Contentful Paint Element“.
Sie können auch den kostenlosen Website-Geschwindigkeitstest von DebugBear verwenden, um die Aufschlüsselung der LCP-Komponenten anzuzeigen und mehr Einblick in die Optimierung der Metrik zu erhalten.
Klicken Sie auf die größte Contentful Paint-Metrik, um zusätzliche Debug-Daten wie die Bild-URL, die Ladedauer und die Anforderungspriorität anzuzeigen.
So bestehen Sie die Core Web Vitals-Bewertung von Google
In diesem Artikel haben wir uns einige der neuen Diagnosetools angesehen, mit denen Sie Probleme mit der Seitengeschwindigkeit auf Ihrer Website untersuchen können, sowie neue Browsertechnologien, die Ihnen dabei helfen können, eine schnellere Website zu erstellen.
Um Ihre Optimierungen im Auge zu behalten und den Überblick über Ihre Core Web Vitals-Metriken zu behalten, können Sie ein Tool zur Überwachung der Website-Leistung wie DebugBear verwenden. Identifizieren Sie potenzielle Optimierungen auf Ihrer eigenen Website und vergleichen Sie Ihre Website mit der Konkurrenz, um ein erstklassiges Erlebnis zu bieten.
Überwachungstools helfen Ihnen, langfristige Trends zu erkennen, zu überprüfen, ob die von Ihnen vorgenommenen Änderungen positive Auswirkungen haben, und stellen sicher, dass Sie schnell erkennen, wenn neue Probleme auftreten.
DebugBear liefert drei Arten von Seitengeschwindigkeitsdaten, die Ihnen helfen, Ihre Seitengeschwindigkeit wirklich zu verstehen und zu optimieren:
- Synthetische Überwachung: Erhalten Sie detaillierte Einblicke in die Ladezeiten von Seiten
- Echte Benutzerüberwachung: tatsächliche Besuchererlebnisse und Optimierung der Interaktion mit Next Paint
- CrUX-Überwachung: Verfolgen Sie die Kennzahlen, die sich auf das Google-Ranking auswirken
Starten Sie eine kostenlose Testversion, um zu sehen, was Sie tun können, um die besten Erlebnisse auf Ihrer Website zu bieten.
Dieser Artikel wurde von DebugBear gesponsert und die hier dargestellten Ansichten geben die Sichtweise des Sponsors wieder.
Sind Sie bereit, mit der Optimierung Ihrer Website zu beginnen? Melden Sie sich bei DebugBear an und erhalten Sie die Daten, die Sie für die Bereitstellung großartiger Benutzererlebnisse benötigen.
Bildnachweise
Ausgewähltes Bild: Bild von DebugBear. Mit Genehmigung verwendet.