Core Web Vitals für A/B-Tests: Verlangsamt Ihre A/B-Testsoftware Ihre Website?

Google hat gerade sein Core Web Vitals-Update veröffentlicht und wir müssen darauf achten.

Warum kümmern?

Als CROs machen wir uns normalerweise nicht allzu viele Gedanken über den Traffic, da wir uns darauf konzentrieren, was passiert, wenn Menschen auf unseren Websites landen, und was sie tun.

Die Sache ist die, dass sich dieses neue Update auf die Benutzererfahrung konzentriert, daher ist es nicht nur für uns als Optimierer relevant, sondern es besteht auch die Möglichkeit, dass Ihre Tests die Page Experience -Werte und den Traffic Ihrer Website tatsächlich negativ beeinflussen.

Nicht toll, oder?

In diesem Artikel werde ich Ihnen erklären, was dieses Update ist, wie es funktioniert, wie sich Ihre Tests darauf auswirken könnten, einige Best Practices, um nicht nur die Auswirkungen dieses neuen SEO-Updates zu verringern, sondern auch, wie Sie Ihre Ergebnisse tatsächlich verbessern können und dadurch vielleicht etwas mehr organischen Traffic herausholen.

Wird mein A/B-Testtool meine Website verlangsamen und meinen Core Web Vitals Score beeinflussen?

Lassen Sie uns das ganz oben aus dem Weg räumen. Die Convert-App ist unglaublich schnell und sollte sich nicht negativ auf Ihre Seitenerfahrung oder Ihren Core Web Vitals-Score auswirken, solange Sie sowohl beim Testen als auch beim CWV-Setup die Best Practices befolgen.

Nicht jede Website folgt jedoch Best Practices, und in diesen Situationen können sich Ihre A/B-Tests auf die Seitenladegeschwindigkeit, die Verzögerung der ersten Eingabe, die kumulative Layoutverschiebung oder den größten Contentful Paint auswirken, je nachdem, wie Sie Ihren Test und Ihre Website eingerichtet haben .

Die guten Nachrichten?

Jedes dieser Elemente ist leicht zu fixieren. Wir werden all dies behandeln, während wir diesen Leitfaden durchgehen, zusammen mit der Frage, wie Sie Ihre Baseline Page Experience und CWV-Scores verbessern können, ohne sie beim Testen zu brechen.

Was ist der Unterschied zwischen Core Web Vitals und Google Page Experience?

Sie scheinen kompliziert zu sein und haben ausgefallene Namen, aber sie lassen sich im Grunde darauf reduzieren, Schlüsselmomente in der Seitenerfahrung eines Benutzers zu verfolgen:

• Wie schnell lädt Ihre Seite?
• Wie schnell kann der Benutzer die Hauptelemente auf der Seite sehen und verstehen, worum es geht?
• Wie schnell können sie mit der Seite interagieren?
• Wie lange dauert es, bis diese Interaktion vom Klicken auf eine Schaltfläche bis zur stattfindenden Aktion funktioniert?
• Wie sieht die Seite aus und ist sie einfach zu bedienen?

Warum kümmern wir uns?

Wir kümmern uns darum, weil Google sich darum kümmert, und es ist einer der SEHR seltenen Fälle, in denen sie auf einen bestimmten Ranking-Faktor hingewiesen haben, wie er funktioniert und wie man ihn verbessern kann. Wenn dies geschieht, lohnt es sich, darauf zu achten, da dies ein Zeichen für die Zukunft ist.

Warum kümmert sich Google um die Benutzererfahrung?

Einfach ausgedrückt, wenn sie Ergebnisse empfehlen, die eine schlechte Erfahrung oder ein falsches Ergebnis liefern, besteht die Möglichkeit, dass ihre Benutzer zu ihren Konkurrenten wechseln.

Die Seitenerfahrung wird noch nicht als wichtiger Rankingfaktor angesehen. Google hat kürzlich erklärt, dass die Seitenerfahrung bei gleichen Bedingungen zwischen Ihnen und einem Konkurrenten eher der entscheidende Faktor sein wird, der bestimmt, wer höher eingestuft wird, einfach weil Sie die beste Erfahrung bieten, aber es ist nicht der einzige Faktor.

(Großartige Inhalte, Angebote, EAT und Backlinks werden immer die Nadel am meisten bewegen.)

Allerdings… Google scheint große Schritte zu unternehmen, um die Benutzererfahrung in Zukunft zu einem wichtigen Faktor für das Suchranking zu machen. Sie änderten ihre gesamten Ranking-Indexergebnisse, um sich auf Mobile-First-Erlebnisse und -Ergebnisse zu konzentrieren.

Dies bedeutet, dass Page Experience zwar ein auf Mobilgeräte ausgerichteter Algorithmus ist, da ihr gesamter Index jetzt auf Mobilgeräte ausgerichtet ist, dies jedoch alle Website-Eigentümer da draußen und ihre Anzeige in Desktop-Ergebnissen betrifft.

Sie haben vielleicht einen großartigen Inhalt auf dem Desktop, aber es ist die mobile Version, nicht die Desktop-Version, die sich auf Ihren Rang in den Ergebnissen auswirkt. Nicht nur das, Google kümmert sich auch um die Ladegeschwindigkeit und das Layout der Seite. Sie haben die Messlatte für das, was benötigt wird, mehrfach aktualisiert und höher gelegt, einen Standard für die Ladezeit und mehr festgelegt, um die mobile Suche zu verbessern.

Ich habe das bereits gesagt, aber es ist besser, sich jetzt eine Vorstellung davon zu machen und mit der Implementierung von Best Practices zu beginnen, insbesondere weil die Benutzererfahrung unsere CRO-Kampagnen direkt beeinflussen kann und Ihr Testtool möglicherweise auch diese SEO-Ergebnisse beeinflusst…

Lassen Sie uns also jede dieser Seitenerfahrungsmetriken aufschlüsseln, Ihre aktuellen Ergebnisse, was jede Metrik bedeutet und wie Sie ihre Anforderungen erfüllen können, zusammen mit einigen Dingen, die Sie beachten sollten, damit Ihre Tests Ihre Punktzahl nicht negativ beeinflussen.

So messen Sie Ihre aktuellen Core-Web-Vitals und Page Experience-Ergebnisse

Sie können dafür technisch gesehen die Google Search Console verwenden, aber ich habe das Gefühl, dass die Daten etwas vage oder begrenzt sein können. (Ergebnisse werden als „schlecht“, „verbesserungsbedürftig“ oder „gut“ aufgeführt.)

Gehen Sie stattdessen zum PageSpeed ​​Insights-Tool von Google und sehen Sie sich dort Ihre Website an.

Das Insights-Tool ist wirklich einfach zu bedienen. Geben Sie einfach die URL der Seite ein, die Sie überprüfen möchten, lassen Sie sie laufen und sehen Sie sich dann Ihre Ergebnisse für Mobilgeräte und Desktops an.

Ihr Ziel ist es, eine Punktzahl von 90 oder mehr für Mobilgeräte UND Desktops zu erreichen.

Diese Seite muss eindeutig überarbeitet werden, da es 14,7 Sekunden dauert, bis mobile Benutzer vollständig mit dieser Seite interagieren können!

Nun, es gibt einen Grund, warum das Laden dieser Seite auf Mobilgeräten so lange dauert. Es sind etwa 11.000 Wörter mit etwa 30 Bildern und 3 Videos.

über GIPHY

Das ist eine GROSSE Seite!

Während dieses Artikels werde ich diese Verkaufsseite weiter verbessern, während wir jede Empfehlung des Core Web Vitals-Berichts durcharbeiten, damit Sie den Unterschied in der Seitengeschwindigkeit und -punktzahl sehen können.

Sobald ich die Site und Seite aktualisiert habe, um Page Experience und Core Web Vitals zu erfüllen, werde ich zeigen, wie sich das Einrichten von A/B-Tests auf dieser Seite auf meine Ergebnisse auswirken kann.

• Alles in Rot muss so schnell wie möglich bearbeitet werden.
• Alles in Gelb kann verbessert werden.
• Und was grün ist, erfüllt derzeit die Anforderungen.

Interessant ist, dass die Convert Experiences-App meine Seite im Hintergrund nur um 107 Millisekunden verlangsamt, während die Vimeo-App eine Verzögerung von 1.567 Millisekunden verursacht.

Dies ist nicht die Schuld ihrer App, sondern liegt daran, dass ich eine Reihe von Problemen mit meiner Seite und meiner Website beheben muss, die dazu führen, dass sie nicht richtig funktioniert.

Bevor ich diese Probleme jedoch verbessern kann, müssen wir verstehen, was sie bedeuten und wie das Tool zu diesem Ergebnis geführt hat …

Wie kommt das Tool PageSpeed ​​Insights zu diesen Ergebnissen?

Das PageSpeed ​​Insights-Tool verwendet das Lighthouse-Entwicklungstesttool von Google, um sich ein Bild von der Leistung Ihrer Seite zu machen.

Lighthouse wendet spezifische Gewichtungsmetriken basierend auf Ihrer Seitenleistung an, um diese Punktzahl zu ermitteln.

Diese Gewichtungen basieren auf den wichtigsten Faktoren des Nutzererlebnisses und ändern sich häufig, wenn Google neue Funktionen zur Verfolgung von UX hinzufügt. (Auch deshalb scheint dies eine wichtige Sache zu sein, auf die man sich heute konzentrieren sollte).

Wenn wir die letzte Version dieser Gewichtungen mit der neuesten Version von Lighthouse vergleichen, können wir sehen, dass der kumulativen Layoutverschiebung und der gesamten Blockierungszeit im Vergleich zu früheren Versionen eine viel stärkere Gewichtung in ihrer Bedeutung beigemessen wurde.

Bedeutet dies, dass die anderen Elemente plötzlich weniger wichtig sind?

Gar nicht. Tatsächlich haben sie wahrscheinlich weniger Gewicht erhalten, da mehr Websites aktualisiert werden und die Standardanforderungen für die Seitenerfahrung erfüllen.

Es scheint, dass sich der Fokus jetzt darauf verlagert hat, Seiten daran zu hindern, das Layout zu ändern, während die Seite geladen wird, und die Zeit zu verkürzen, die die Seite benötigt, um auf Benutzereingaben zu reagieren.

Dies sind beides wichtige Dinge, die wir als Tester berücksichtigen müssen, da unser Test dazu führen kann, dass die Seite langsamer geladen wird oder sich das Layout verschiebt, wenn wir neue Layout-Designs testen.

Das Lighthouse-Tool nimmt diese Gewichtungen und wendet sie dann auf Ihre aktuelle Seite an, indem es sogenannte Lab-and-Field-Daten verwendet, um die Leistung Ihrer Seite zu messen.

Was sind Labor- und Felddaten?

Lab Data ist im Grunde eine Simulation spezifischer Bedingungen, um eine Kontrollumgebung zu schaffen. Es ist das, was die Mehrheit der Benutzer, die diesen Artikel lesen, verwenden wird, um ihre Seite zu testen und zu verbessern.

Während Field Data auf dieser speziellen Seite auf der realen Benutzererfahrung basiert , ist sie jedoch etwas fehlerhaft. Sie benötigen viel Live-Traffic auf dieser Seite, um Ergebnisse zu erzielen. Darüber hinaus muss dieser Datenverkehr von Chrome-Benutzern stammen, die sich auch für den (CrUX) Chrome User Experience Report entschieden haben, den nicht jeder verwendet oder für den er sich entscheidet.

Die Benutzerbewertung vor Ort basiert auf dem 75. Perzentil der Benutzererfahrung auf dieser Seite.

Warum ist das wichtig? Weil die Erfahrung jedes Benutzers je nach Gerät und Internetgeschwindigkeit variieren kann.

Wenn 26 % Ihres Publikums auf einem iPhone 5 mit einer langsamen Verbindung surfen, dann könnte Ihre Punktzahl auf 74 % fallen und es würde zeigen, dass Ihre Seite „Verbesserung benötigt“.

Schließlich basieren die Felddaten auf einem fortlaufenden 28-Tage-Aggregat, sodass die Berichte auf früheren Ergebnissen basieren. Heute vorgenommene Änderungen spiegeln sich erst in einem weiteren Monat in den Ergebnissen wider.

Wie Sie sehen können, sind Felddaten nicht für uns alle relevant. Die gute Nachricht ist, dass die Lab-Daten aus dem Insights-Tool gut genug sind und uns genügend Informationen liefern, um zu sehen, wie sich unsere Änderungen und Aktualisierungen auf diese simulierte Umgebung auswirken, sodass wir uns eine ungefähre Vorstellung davon machen können, wie unsere Website in freier Wildbahn funktionieren könnte.

Jetzt kennen wir also unsere Basisergebnisse auf unseren leistungsschwächsten/wichtigsten Seiten, wir können lernen, was all diese Metriken bedeuten und wie wir sie verbessern können.

Was sind die Page Experience Metrics von Google, die Three Core Web Vitals Metrics, und wie können wir sie verbessern?

Es gibt 4 grundlegende Page Experience-Metriken und 3 weitere in einer bestimmten Teilmenge namens Core Web Vitals (der Schwerpunkt des neuesten Google-Updates).

Jede dieser grundlegenden Metriken ist recht einfach zu erreichen. Alles, was Sie brauchen, ist eine reaktionsschnelle Website, kein zwielichtiger Code, die Website darf nicht in Popups verdeckt werden und über HTTPS ausgeführt werden.

Dies sind jedoch nur die Grundelemente. Es gibt 6 weitere Metriken zur Seitenerfahrung, die von Lighthouse verwendet werden, wenn es die Leistung Ihrer Seitenerfahrung mithilfe von Lab-Daten misst.

Obwohl es nun 6 Lab-Metriken gibt, auf die man sich konzentrieren muss, sind sie alle miteinander verbunden. Dies bedeutet, dass eine Verbesserung bei einem normalerweise eine Verbesserung bei anderen sieht.

Um all dies zu vereinfachen, hat Google diese in 3 Core Web Vitals unterteilt:

• Größte zufriedene Farbe
• Erste Eingangsverzögerung und
• Kumulative Layoutverschiebung

Hier müssen wir uns verbessern, und hier können sich unsere Tests auch auf unser Ranking auswirken.

Lassen Sie uns jeden dieser Core Web Vitals unten durchgehen und was Sie tun müssen, um sie zu verbessern, bevor wir uns ansehen, wie sich Ihre Tests auf diese Ergebnisse auswirken könnten.

1. Größte zufriedene Farbe (LCP)

Largest Contentful Paint basiert auf der Ladegeschwindigkeit des größten sichtbaren Elements auf Ihrem Bildschirm. Dies kann ein Hero Shot, ein Hintergrundbild oder sogar der Text der Überschrift sein.

Diese Punktzahl soll reproduzieren, wie lange es dauert, bis Ihr Publikum den Hauptinhalt Ihrer Seite sieht und eine Vorstellung davon bekommt, worum es auf der Seite geht.

Derzeit wird LCP mit 25 % Ihres CWV-Scores gewichtet.

Es ist wichtig, dass Ihre Leser Ihre Seite verstehen, aber es ist mehr als das. Sie sehen, die meisten Probleme, die ein langsames LCP verursachen, sind normalerweise die Hauptursachen dafür, was Seiten verlangsamt und andere CWV-Probleme verursacht . Das bedeutet, wenn Sie diese LCP-Elemente reparieren, haben Sie den Großteil der Arbeit erledigt.

Ihr Ziel sollte es sein, Ihr LCP in weniger als 2,5 Sekunden zu laden.

Die Hauptprobleme, die Ihre LCP-Punktzahl/Geschwindigkeit senken, sind:

• Langsame Serverantwortzeiten
• Rendering-blockierendes JavaScript und CSS, was zu Elementverzögerungen führt
• Langsame Ressourcenladezeiten
• Langsames clientseitiges Rendern
• Schlecht/Falsch eingestellte Bildoptimierung.

So verbessern Sie Ihren LCP-Score

Es gibt mehrere Dinge, die Sie implementieren können, um Ihren LCP-Score zu verbessern.

Hier sehen Sie mein Beispiel für den LCP-Score meiner Verkaufsseite, bevor ich eine der empfohlenen Optimierungen vornehme.

Es dauert derzeit 3,4 Sekunden, bis mein LCP-Element auf der Seite geladen ist, obwohl es nur eine Textüberschrift ist, und meine Seite braucht 14,7 Sekunden zum Laden, bevor sie interaktiv wird.

Wenn wir durch das PageSpeed ​​Insights-Tool nach unten scrollen und uns die Möglichkeiten ansehen, gibt es eine Reihe von Dingen, die ich tun kann, um die allgemeine Seitengeschwindigkeit zu verbessern und einige der Dinge zu stoppen, die das LCP verlangsamen.

Gehen wir sie alle durch.

a. Laden Sie das LCP-Element vor

Als erstes müssen Sie überprüfen, was das tatsächliche LCP-Element für Ihre aktuelle Seite ist, da es zwischen den Seiten variieren kann.

Scrollen Sie in der mobilen Ansicht des PageSpeed-Tools auf der Seite nach unten zum Diagnosebereich, klicken Sie auf das Element „Largest Contentful Paint“ und sehen Sie, was angezeigt wird.

Auf dieser speziellen Seite ist mein LCP-Element meine Überschrift.

Ich kann die Ladegeschwindigkeit meines Textes verbessern, indem ich andere Dinge auf meiner Seite wie Komprimierung und Caching aussortiere, aber was wäre, wenn mein LCP-Element ein Bild wäre?

In diesem Fall möchte ich das Bild auf der Seite vorab laden, damit es geladen wird, bevor die Seite überhaupt mit dem Rendern beginnt.

Auf diese Weise beginnt das Bild sofort zu laden und wird nicht durch anderen Code oder Anfragen verlangsamt.

Das ist eine riesige Sache.

Die Standardpraxis besteht darin, alle Bilder auf einer Seite träge zu laden, um die Seitengeschwindigkeit zu verbessern. Aber wenn Sie das mit Ihrem LCP-Bild machen, wird es tatsächlich langsamer geladen und Ihr LCP-Score sinkt!

(Dies ist ein großes Problem, wenn Sie Ihr LCP-Element auch A/B-testen!)

Wie können wir es also beheben?

Wir möchten Code schreiben, um anzugeben, dass dieses bestimmte LCP-Element auf einer bestimmten Seite vorab geladen werden soll.

Das Skript, das Sie hinzufügen möchten, ist das Skript rel="preload" und es sieht in etwa so aus:

In diesem Beispiel sage ich dieser bestimmten Seite, dass sie das TRAFFIC-SMALL-HEADER-Bild vorab laden soll (das das LCP-Bildelement für diese Seite ist). Ich gebe auch mehrere Dimensionsoptionen an, damit ein ansprechendes Bild für Mobilgeräte und Desktops geladen werden kann.

Allein diese Änderung hilft bei langsam ladenden Bildern, die sich auf Ihren LCP-Score auswirken.

Bei einigen WordPress- oder Shopify-Designs können Sie benutzerdefinierten Code in die Kopfzeile dieser bestimmten Seite einfügen, während einige Plugins dies zulassen. Andernfalls können Sie auch die Datei header.php für Ihre Seite bearbeiten und den Code direkt hinzufügen.

Ich habe hier einige der Grundlagen behandelt, aber die meisten Korrekturen, die wir behandeln werden, können je nach Ihrer Site und dem, was Sie verwenden, variieren. (Wenn Sie nicht auf WordPress sind oder einen Entwickler haben, dann bitten Sie ihn, sich hier die Dev-Ratschläge von Google zur Optimierung von LCP anzusehen).

Da meine Website auf WordPress basiert, werde ich das WPRocket-Plugin verwenden, da es mir helfen wird, die meisten Probleme mit LCP an einem Ort zu beheben.

b. Verwenden Sie High Performance/Dedicated Hosting

Eine super einfach zu implementierende Lösung. Wenn Ihr Benutzer Ihre Webseite lädt, sendet er eine Anfrage an Ihren Webhost für die Seiteninformationen und gespeicherten Dateien usw.

Einige Webhosting-Dienste arbeiten auf einer Shared-Hosting-Plattform. Das bedeutet, dass sie die Infrastruktur zwischen mehreren Standorten teilen. Aus diesem Grund bedeutet dies, dass der Datenverkehr anderer Websites auf Ihrem Shared Hosting die Leistung Ihrer eigenen Website verlangsamen kann.

Der Wechsel zu einem dedizierten Hosting-Service, der zu 100 % nur für Ihre Website gedacht ist, ist nicht nur schneller, sondern auch sicherer und kann bei Seitenladeproblemen und Serverantwortzeiten helfen.

Hier sehen Sie, dass die anfängliche Antwortzeit des Servers meiner Website 2,67 Sekunden betrug.

Nach dem Upgrade auf einen dedizierten Host wurde diese Verzögerung der Serverantwort vollständig beseitigt, wodurch ich 2,67 Sekunden Ladezeit einspart und auch den Geschwindigkeitsindex und die Zeit bis zur Interaktivität verbessert habe.

c. Caching aktivieren und Cache-Länge erhöhen (falls erforderlich)

Durch Caching können Sie Serveranfragen einsparen, indem Sie eine gespeicherte Kopie Ihrer Website-Inhalte für Benutzer speichern, damit sie bei wiederholten Besuchen schnell geladen werden.

Wenn sie zurückkommen und den Inhalt erneut anzeigen möchten, wird er auf diese Weise unglaublich schnell geladen.

d. Unkritisches JS zurückstellen + unbenutztes JS entfernen

Wenn eine Seite geladen wird, lädt sie abwechselnd entweder die Dinge einzeln (asynchron) oder verlangsamt sich und versucht, mehrere Dinge gleichzeitig zu laden (synchronisieren). Dies ist nicht so schlimm, wenn Sie einen schnellen Server haben oder wenn die Drittanbieteranwendung, die Sie abrufen, schnell geladen wird, wie z. B. die Convert Experiences-App.

Aber wir können dazu beitragen, unseren Score und die Seitengeschwindigkeit zu verbessern, indem wir entweder einige Elemente zurückstellen (sie anweisen, nach wichtigeren Dingen zu laden) oder Elemente entfernen, die nicht auf jeder Seite geladen werden müssen.

Dies ist normalerweise eine große Ursache für LCP-Ladeprobleme, da diese Elemente versuchen, vor dem LCP-Element zu laden. (Sie können auch First Input Delay beeinflussen).

Sie können angeben, welche JS, Apps oder Plugins in WPRocket zurückgestellt oder entfernt werden sollen. (Stellen Sie einfach sicher, dass das Convert-Skript mit Priorität geladen und nicht verzögert wird).

Auf diese Weise werden alle nicht wesentlichen JS entfernt, andere JS werden bis zur Verwendung zurückgestellt, und das Convert-Skript kann so schnell wie möglich ausgeführt werden.

Randnotiz:

Sie können diesen Abschnitt auch verwenden, um das Laden von Above-the-Fold-Elementen wie Schiebern oder Karussells zu priorisieren. Fügen Sie einfach den Code zum Ausschlussabschnitt hinzu und er wird wie gewohnt geladen.

e. Erwägen Sie die Code-Minifizierung

Sie können die Seitenladezeit auch beschleunigen, indem Sie den JS- und CSS-Code auf Ihrer Website verkleinern. Die Minimierung wird verwendet, um unnötige oder redundante Daten zu entfernen, ohne die Verarbeitung der Ressource durch den Browser zu beeinträchtigen, z. B. Codekommentare, Leerzeichen und Formatierung, Entfernen von nicht verwendetem Code, Verwendung kürzerer Variablen- und Funktionsnamen usw.

Viele Plugins ermöglichen Ihnen dies.

Stellen Sie einfach sicher, dass Sie Ihre Seiten nach der Bewerbung überprüfen, da dies manchmal zu Problemen führen kann. (Besonders beim Kombinieren von Code, weshalb ich es hier nicht verwendet habe. Es sollte theoretisch gut funktionieren, aber ich hatte in der Vergangenheit Probleme.)

f. Optimieren Sie Bilder für Lazy Load und Reaktionsfähigkeit (nur nicht das LCP-Bild)

Etwas, das die Seitenleistung verlangsamen kann, ist die Bildgröße und das Volumen der Bilder, die Sie haben.

Wenn Sie eine Seite mit vielen Bildern haben, können Sie die Ladegeschwindigkeit verbessern, indem Sie die Bilder verzögert laden, sodass die Bilder weiter unten auf der Seite erst angezeigt werden, wenn der Betrachter nach unten scrollt.

(Denken Sie jedoch daran, das LCP-Image vorab zu laden!)

Sie können das Laden der Seite auch weiter unterstützen, indem Sie bestimmte Bildgrößen angeben. (Manchmal können Sie versehentlich ein riesiges Bild hochladen, das dann die Seite verlangsamt, da es auf die richtige Größe komprimiert wird.)

g. Verwenden Sie Bildkomprimierung und Responsive Sizing

Sie können dafür sorgen, dass Ihre Bilder noch schneller geladen werden, indem Sie ihre Dateigröße reduzieren und dann ansprechende Größen bereitstellen, die dem Gerät des Benutzers entsprechen.

Kleinere Dateigrößen bedeuten, dass sie weniger Ressourcen zum Laden auf dem Gerät des Benutzers benötigen, während sie aus ihrer Sicht dennoch eine hohe Qualität beibehalten.

WPRocket lässt sich auch in ein Plugin namens Imagify integrieren, um sowohl responsive Bilder zu komprimieren als auch bereitzustellen (durch Hinzufügen mehrerer Scrset-Optionen für unterschiedliche Bildschirmgrößen).

h. Stellen Sie so schnell wie möglich Verbindungen zu Drittanbietern her

Wenn Sie Inhalte oder Skripte auf Ihrer Website haben, die das Laden der Seite verlangsamen können, können Sie sie so einrichten, dass bestimmte Elemente so schnell wie möglich vorgeladen werden, damit sie schneller geladen werden.

Erinnern Sie sich, wie meine Videos meine Seite zuvor verlangsamt haben?

Durch das Einrichten von DNS-Prefetch-Anfragen von Drittanbietern kann ich das Laden all dieser Videos beschleunigen.

ich. Verwenden Sie ein CDN, um die Ladezeit zu reduzieren

Ein CDN oder Content Delivery Network trägt dazu bei, die Ladegeschwindigkeit Ihrer Website noch weiter zu beschleunigen, indem zwischengespeicherte Versionen Ihrer Website auf Servern gespeichert werden, die sich näher am Standort des Benutzers befinden.

Sie können dies kostenlos mit etwas wie Cloudflare tun.

j. Verwenden Sie die Gzip- oder Brotli-Komprimierung, um die Dateigröße zu optimieren

Sie können Ihre Website auch weiter beschleunigen, indem Sie ein Komprimierungs-Plugin wie Gzip oder Brotli verwenden, aber einige CDNs tun dies automatisch, also überprüfen Sie zuerst Ihres, um zu sehen, ob es installiert ist. (Cloudflare hat dies integriert.)

Welche Auswirkungen hatten also all diese Änderungen?

Ich habe die Ladegeschwindigkeit meiner Website verbessert und sie von 13,5 Sekunden auf 3,3 Sekunden auf Mobilgeräten gesenkt. Meine LCP-Geschwindigkeit beträgt jetzt 2,1 Sekunden.

Das ist eine Einsparung von 10,2 Sekunden!

Nicht schlecht, oder?

Es gibt noch ein paar Dinge zu beheben, aber sie sollten sich verbessern, während wir an den beiden anderen Core Web Vitals arbeiten.

2. Erste Eingangsverzögerung (FID)

Die Verzögerung bei der ersten Eingabe ist ein Maß dafür, wie lange es dauert, bis die Seite reagiert, wenn der Benutzer versucht, eine Aktion auszuführen, z. B. das Drücken einer Schaltfläche oder das Klicken auf einen Link.

Die häufigsten Ursachen für einen schlechten FID sind:

• Erstanbieter-Skriptausführung, die eine Verzögerung bei der Interaktionsbereitschaft verursacht.
• Das Abrufen von Daten beeinträchtigt die Interaktionsbereitschaft.
• Die Ausführung von Skripten von Drittanbietern verzögert die Interaktionslatenz.

Die erste Eingangsverzögerung wird mit 30 % Ihres CWV-Scores gewichtet und Ihr Ziel ist es, diese Antwort auf 100 Millisekunden oder weniger zu reduzieren.

So verbessern Sie Ihren ersten Input-Delay-Score

Wir können FID nicht ohne einen Live-Benutzer messen, daher versuchen wir stattdessen, die Total Blocking Time (TBT) zu verbessern, da beide verbunden sind.

Schauen wir also zurück auf unsere Seitenergebnisse…

Als ich meine Seite zum ersten Mal gemessen habe, betrug meine TBT 1,5 Sekunden (oder 1.560 Millisekunden).

Seit ich die LCP-Elemente verbessert habe, ist es auf 0,2 Sekunden (210 Millisekunden) und 3,5 Sekunden gesunken, bis es vollständig interaktiv ist.

Dies liegt daran, dass wir bereits einige der Probleme gelöst haben, die die Gesamtblockierzeit verlangsamen, indem wir einfach einige LCP-Probleme wie Code-Minifizierung und das Verzögern oder Entfernen von JS behoben haben.

Es liegt bereits nahe am gewünschten Geschwindigkeitsbereich, aber lassen Sie uns Ihnen ein paar andere Dinge zeigen, die Sie tun können, nur für den Fall, dass Ihre Punktzahl noch nicht ganz da ist.

a. Inhalte und Links vorab laden

Hier ist eine coole Funktion in WProcket. Mit dem Vorladen von LCP-Bildern weisen wir die Seite an, so schnell wie möglich mit dem Laden des LCP-Bildes zu beginnen.

Mit vorab ladenden Links und Sitemaps weisen wir die Website an, Inhalte im Hintergrund vorab zu laden, wenn der Benutzer mit der Maus über eine Schaltfläche oder einen Link fährt.

Das bedeutet, dass diese Assets zu laden beginnen, bevor der Benutzer sie überhaupt anfordert, was diese FID beschleunigt und die Gesamtblockierzeit für die anderen Seiten verringert, zu denen sie sich durchklicken.

Der Vorteil hier ist eine schnellere FID auf anderen Seiten, also schauen wir uns einige weitere Möglichkeiten an, um die erste Seite zu verbessern, auf der sie geladen werden.

Das Wichtigste, was wir tun können, um FID zu verbessern, ist, Code-Bloat von unserer Website zu entfernen.

Fahren Sie fort und laden Sie Ihre Seite in GTMetrix hoch.

Wow, das Ergebnis sieht fantastisch aus, oder!?

Nun, das liegt daran, dass dies Ihr Desktop-Score ist, nicht Ihr Handy. (Wenn Sie nicht bezahlen, um das Gerät und den Standort anzupassen, zeigt GTMetrix immer eine Simulation Ihres Seitenaufbaus von einem Chrome-Benutzer auf einem Desktop.)

Dies ist in Ordnung, da wir uns den Abschnitt Wasserfall ansehen möchten, um Bereiche zu sehen, in denen das Laden Ihrer Seite verzögert ist.

Die Balken in Beige sind Bereiche, die wir verbessern müssen, da dies Zeiten sind, in denen das Laden eines anderen Codes blockiert wird.

Ich kann im Wasserfall sehen, dass einige alte Plugins und Schriftarten das Laden der Seite verlangsamen, sodass ich zurückgehen und diese benutzerdefinierten Schriftarten vorladen kann.

Öffnen Sie sie im Wasserfall, kopieren Sie die Schriftart-URLs und fügen Sie sie in WProcket ein. (Ich hätte sie früher hinzufügen sollen, aber hoppla vergessen!)

Schauen wir uns also ein paar Möglichkeiten an, um weitere Blockierungen und aufgeblähten Code zu entfernen.

b. Plugin-Bloat entfernen

Wenn Sie Ihre Website schon eine Weile haben, ist es sehr einfach, eine Reihe von Plugins zu sammeln und überschüssigen Code hinzuzufügen, der nicht mehr benötigt wird.

Sie können Ihre Website beschleunigen, indem Sie ungenutzte Plugins oder doppelte Plugins entfernen, die die gleiche Aufgabe erfüllen.

Du kannst auch:

• Aktualisieren Sie Plugins, um zu sehen, ob sie schneller laufen.
• Oder suchen Sie nach alternativen Plugins, die dasselbe für weniger Code tun.

c. Entferne den Theme Code Bloat

Einige Themen haben überschüssigen Code eingebaut, um Design- oder Stiloptionen bereitzustellen, die Sie möglicherweise nicht benötigen, was dazu führt, dass das Laden der Seiten länger dauert.

Sie können Ihr aktuelles Design durch ein leichteres ersetzen, das Ihren Anforderungen entspricht, und große Sprünge bei der Seitengeschwindigkeit und Ladezeit feststellen.

Persönlich verwende ich das kostenlose Neve-Theme, weil es mit einer Gesamtinstallationsgröße von nur 75 KB sauber und leicht ist, aber Sie können jedes gewünschte Thema verwenden. (Suchen Sie einfach nach den Themen „Schnelles Laden“ oder „Mobile First“.)

d. Aufgeblähte Seite entfernen

Ein weiteres großes Problem, das zu aufgeblähten Seiten und CLS-Problemen führen kann, sind Seitenersteller, hauptsächlich wegen des überschüssigen Codes, den sie verwenden, um bestimmte Funktionen darzustellen.

Sie können einen viel niedrigeren DOM-Score sehen, indem Sie entweder Page Builder-Plugins entfernen oder den Seitencode vereinfachen, ihn mit dem Builder neu erstellen oder eine benutzerdefinierte HTML-Seite erstellen lassen.

Also, was war meine Punktzahl, nachdem ich das geändert hatte?

Ich habe meinen Seitenersteller noch nicht entfernt, aber die Punktzahl ist immer noch auf nur 130 Millisekunden Gesamtblockierzeit gesunken und die Seite wird in 1,9 Sekunden geladen.

Möchten Sie Ihre Seitengeschwindigkeit noch weiter verbessern?

Es gibt ein weiteres großartiges Plugin namens Asset Cleanup, das Sie verwenden können (es wird von unserem Team bei Convert verwendet).

Sie können angeben, welche Plugins oder Assets auf jeder Seite Ihrer Website geladen werden, und Ihnen dabei helfen, ungenutzte Plugins von bestimmten Seiten zu entfernen, damit sie die Ladezeit nicht unnötig verlängern.

Sie könnten beispielsweise ein Kontaktformular-Plugin auf Ihrer Website haben, aber sein Code wird auf einer Seite geladen, auf der er nicht benötigt wird.

Mit Asset Cleanup können Sie auf diese Seite gehen und dann nach unten scrollen und das Plugin anweisen, auf dieser bestimmten Seite nicht zu laden.

3. Kumulative Layoutverschiebung (CLS)

Haben Sie jemals versucht, auf etwas auf einer Website zu klicken, und dann bewegt es sich und stattdessen wird eine Anzeige oder ein Banner angezeigt?

Frustrierend, oder?

Dies ist besonders wichtig für uns als Optimierer, da eine schlechte Benutzererfahrung wie diese zu Problemen mit einer kaputten Benutzeroberfläche oder einfach dazu führen kann, dass das Publikum nicht versteht, was zu tun ist.

(Einige skrupellose Leute werden dies tatsächlich als dunkles Design einbauen, um bestimmte Klicks usw. zu erhalten. Besonders Websites, die Werbeflächen verkaufen …)

CLS misst, wie viele Elemente sich auf einer Seite bewegen (auch bekannt als seine visuelle Stabilität) und bewertet dann Ihre Website danach. Sein Ziel ist es, diese Websites daran zu hindern, diese schlechte Benutzererfahrung zu schaffen, und seine derzeitige Gewichtung beträgt 15 % Ihres CMV-Scores.

Ihr Ziel ist es, einen CLS-Wert von 0,1 oder niedriger zu erreichen.

Es sind jedoch nicht nur Anzeigen, die Ihre Layoutverschiebungen beeinflussen können. Tatsächlich sind die häufigsten Ursachen für einen schlechten CLS-Score:

• Bilder ohne Maße
• Anzeigen, Einbettungen und Iframes ohne Dimensionen
• Dynamisch eingefügte Inhalte wie Anzeigen in der Seitenleiste oder Kopfzeile, die Inhalte herumschieben
• Webfonts, die FOIT/FOUT verursachen, indem sie von einer generischen zu einer benutzerdefinierten Schriftart wechseln und den Layoutabstand beeinflussen
• Aktionen, die auf eine Netzwerkantwort warten, bevor DOM aktualisiert wird.

Die gute Nachricht ist, dass wir bereits vieles davon gelöst haben, indem wir Probleme mit LCP und FID behoben haben.

• Wir haben Bild-, Anzeigen- und iFrame-Videoabmessungen festgelegt.
• Wir haben alle benutzerdefinierten Schriftarten vorinstalliert, damit sie keine Layoutverschiebungen verursachen sollten.
• Und wenn Sie Ihre Seitenersteller entfernt haben, sollten Sie die gesamten DOM-Elemente Ihrer Seite verringern, was sie sowohl schneller macht als auch weniger Anfragen stellt!

Wenn Sie im PageSpeed ​​Insights-Tool nach unten scrollen und auf „Große Layoutverschiebungen vermeiden“ klicken, können Sie sehen, welche Elemente Ihrer Seite derzeit CLS-Probleme verursachen.

In meinem Beispiel ändert sich einfach der Header in ein responsives Layout für Mobilgeräte und wirkt sich nicht so sehr auf den CLS aus.

Ihre Website ist möglicherweise anders. Schauen Sie also nach, was die Probleme verursacht, und beheben Sie sie.

Nachdem wir nun jeden Bereich von Core Web Vitals behandelt haben und wie Sie ihn verbessern können, schauen wir uns an, wie sich Ihre Tests auf Ihre Ergebnisse auswirken können.

Wie sich Core Web Vitals auf UX- und A/B-Tests auswirkt (und wie Sie das Core Web Vitals-Assessment bestehen, während Sie das Convert-Skript verwenden)

Solange Sie sich an die bewährten Methoden halten, die wir bisher behandelt haben, sollten Sie nicht zu viele Probleme bekommen, aber lassen Sie uns sie aufschlüsseln.

Wie man den größten Contentful-Paint-Score beim A/B-Testen nicht negativ beeinflusst

Denken Sie daran, dass die LCP-Elemente das sind, was beim ersten Laden der Seite auf dem Sucher oder Bildschirm zu sehen ist, sodass Sie möglicherweise nicht einmal LCP-Elemente testen, aber nur für den Fall:

Was ist, wenn Sie ein LCP-Element wie einen neuen Hintergrund, ein Heldenbild oder eine Überschrift testen?

The issue you might have here is not with the Convert Experiences tool, but rather with bad practices for LCP improvements.

Like we mentioned earlier, most people make the mistake of lazy loading all images, including the LCP image, which affects the LCP score.

Convert Experiences uses both 'synchronous load' and 'body hide' methods to run tests. Simply put, the tool recognizes the element to be tested and then hides it as soon as it starts to load so the user never sees it, before changing it in under 50 milliseconds.

If you've lazy-loaded that LCP element though, the Convert Experiences app is going to have to wait for that element to load before it can do its job.

You can fix this by preloading the specific LCP elements on your control and test pages like we suggested above. This will get them to start loading immediately on page load, allow them to be recognized and hidden by the Convert app, and be replaced asap before the user notices.

Not only will this reduce flicker, but it will also give a good LCP score as the main LCP element (even when tested) will load fast.

And if the LCP element is not what you're testing? You should be pre-loading it anyway to improve that LCP score.

How to Improve First Input Delay when A/B Testing

The Convert code is incredibly fast, but your FID score still relies on all the other elements of your page.

Make sure to hit all the main requirements for speed that we talked about before so that there is no delay in the Convert code running. (Otherwise, the element you are testing will be hidden until it loads and then changes.)

• You can remove code bloat from other JS and defer them from running.
• You can also 'exclude' the Convert script from being deferred so that it loads up before any other JS so that it can make those test changes asap, while not hurting FID.

If you don't prioritize the Convert code and instead defer it by accident, it may not affect your FID score that much, but it might cause your test element to delay loading, while the script waits to run.

How To Decrease Cumulative Layout Shift Issues When A/B Testing

The potential issues with Cumulative Layout Shift and testing come down to how you run a layout test.

Ideally, you don't want to test massive layout changes with just the Convert Experiences editor. Instead, you want to test similar elements for variations ie swapping out a hero image for another image or swapping text for variations, etc. This means that the page layout stays the same, but a key element is swapped out for a variation.

But what if you want to test a minor layout shift, such as swapping the hero image and text location?

I recommend using Convert Experiences for small layout shifts to set up the test and then see how much it affects your CLS score before you push it live.

A real-world example:

Let's say that I set up that same flipped layout test as above. First, I would build the test inside the Convert Experiences app.

Then I can test this page variant in the page speed tool to get an idea of how it affects CLS.

Make sure you have the variant page open, and then click on the pen icon next to the variant in the Convert Experiences app, then select 'Open Force Variation URL':

This will load a pop up.

Make sure you have the variation page highlighted and then click to copy the URL.

You can input that URL into the PageSpeed Insights tool and measure the CLS and other CWV vitals for that variant.

Full disclosure:

In this particular example, I have not fixed any of the code bloat issues on this other page yet, but here you can see the original control page results based on just the LCP improvements.

Die Geschwindigkeit und die TBT sind großartig, aber der CLS liegt außerhalb unseres Ziels auf der Kontrollseite, da der Seitenersteller, den ich auf meiner Website verwende, immer noch Probleme verursacht.

Aber nur aus Interesse vergleichen wir diesen CLS-Score auf der Kontrollseite mit den Ergebnissen der Variante:

Wie Sie sehen können, ist der CLS auf der Variantenseite gut zu verwenden, da die Punktzahl immer noch innerhalb der Richtlinien liegt.

(Die Geschwindigkeitsprobleme würden behoben, sobald ich Code-Bloat-Probleme mit meinem Seitenersteller sortiere, aber die Convert Experiences-App und der Layouttest laufen unglaublich schnell.)

Kleine Layout-Änderungen können also funktionieren, stellen Sie sicher, dass Sie sie zuerst testen, bevor Sie sie live übertragen.

Aber was ist, wenn Sie große Layoutänderungen testen möchten, wie z. B. eine vollständige Neugestaltung oder das Entfernen oder Hinzufügen von Seitenelementen?

über GIPHY

In diesem Fall würde ich die gleiche bewährte Methode zum Testen dynamischer Redesigns oder großer Layoutänderungen befolgen, nämlich stattdessen geteilte URL-Tests durchzuführen.

Anstatt den Convert WYSIWYG-Editor zu verwenden, um alle überschüssigen Textelemente zu optimieren und zu entfernen, wäre es effizienter, einen Split-URL-Test mit der vollständig bearbeiteten und im Voraus erstellten Variationsseite durchzuführen. (Dies ist unabhängig von CLS eine bewährte Methode).

Auf diese Weise können Sie die Variationsseite im Vergleich zur Kontrollseite testen und für beide eine schnelle Ladezeit erzielen, ohne dass sich Ihre CLS-Punktzahl durch diese großen Layoutverschiebungen auswirkt.

Fazit + Key Takeaways

Da haben Sie es also. Unser vollständiger Leitfaden zur Google Page Experience, dem 3 Core Web Vitals-Update, wie sich Ihre Tests auf diese Vitals auswirken könnten und wie Sie Ihre Punktzahl verbessern können.

Willst du es noch weiter optimieren?

Abhängig von den Anforderungen Ihres speziellen Anwendungsfalls können Sie die Convert Experiences-App sogar so bearbeiten, dass sie asynchron ausgeführt wird, um die Funktion zum Ausblenden von Text zu stoppen oder sogar asynchron zu verwenden und gleichzeitig die Funktion zum Ausblenden von Text zu entfernen. (Möglicherweise möchten Sie dies tun, um das Laden noch schneller zu machen und zu verhindern, dass andere Assets darauf warten, dass das Tool den Ladevorgang abschließt).

Die meisten Benutzer werden dies nie tun müssen, insbesondere wenn Sie die bewährten Methoden befolgen, die wir bisher dargelegt haben. (Und wenn Sie immer noch Probleme haben, können Sie sich jederzeit an unser Support-Team wenden, wenn Sie ein Benutzer von Convert Experiences sind.)

Denken Sie daran:

• Die Convert Experiences-App ist unglaublich schnell, aber sie kann besser funktionieren, wenn Sie Best Practices für Core Web Vitals & A/B-Tests befolgen.
• Google gibt selten Auskunft über bestimmte Ranking-Signale, daher sind Page Experience und Core Web Vitals wichtig und werden in Zukunft möglicherweise noch wichtiger. (Sie haben die Website-Geschwindigkeitsschwellen bereits seit früheren Versionen erhöht.)
• Laut Google ist Core Web Vitals der Tie-Breaker, wenn alle anderen Dinge gleich sind, also lohnt es sich, wenn man an einem High-End-Wettbewerb teilnimmt. Wenn der Inhalt oder das Angebot von gleicher Qualität ist und der Page Rank der konkurrierenden Seiten ähnlich ist, bestimmt die Benutzererfahrung das Ranking der Suchseiten.
• Core Web Vitals befasst sich mit der tatsächlichen Benutzererfahrung auf der Seite, daher ist dies für CRO wichtig. Es lohnt sich, die Best Practices anzuwenden, da dies die Seitenladegeschwindigkeit, Absprungrate, CTR, Conversion-Rate und mehr beeinflussen kann, insbesondere auf Mobilgeräten.
• Core Web Vitals kann sich sogar auf die Landingpage-Erfahrung mit bezahltem Traffic und darauf auswirken, wie Sie in Anzeigenauktionen/Kosten für die Schaltung von Anzeigen erscheinen. Eine Verbesserung kann sich auf die Anzeigenkosten und die Auslieferung auswirken.
• Sie müssen über die grundlegenden Elemente verfügen, um die Anforderungen an die Seitenerfahrung zu erfüllen. Schnelles Laden, CDN, Caching, HTTPS, bevor Sie sich andere Elemente zur Verbesserung ansehen.
• Code-Bloat und Ladereihenfolge können sowohl First Input Delay als auch Largest Contentful Paint beeinflussen. Sie müssen wissen, wie Sie Elemente einrichten, einschränken, vorab laden oder JSS und CSS zurückstellen, um Ihre Seite effektiv zu laden.
• Achten Sie beim Testen von Inhalten, die sich „above the fold“ (im Anzeigebereich auf jedem Gerät) befinden, auf das LCP-Element und die Notwendigkeit, es vorab zu laden, um LCP-Probleme zu reduzieren – insbesondere, wenn dies Ihr Testschwerpunkt ist.
• Die Convert Experiences-App wird so schnell ausgeführt, dass sie sich nicht negativ auf Core Web Vitals auswirkt, vorausgesetzt, Sie führen A/B-Tests durch, bei denen sich große Layoutänderungen nicht verschieben. (Austausch von Elementen gegen ähnliche Elemente, Text für Text, Bilder für Bilder, Schaltflächenvariationen usw.). Andernfalls würde dies Auswirkungen auf CLS haben. (Sie können jederzeit Variationen von Layoutänderungen testen, bevor Sie sie live übertragen.)
• Bei der Durchführung größerer Layoutänderungen wird ein Split-URL-Test empfohlen (wie Sie es ohnehin bei einem dynamischen Test tun würden), da dies Auswirkungen auf CLS hat. Stellen Sie nur sicher, dass Sie die erfolgreiche Variante auf die Original-URL aktualisieren und alle Links, die Variationen möglicherweise haben, umleiten (seltene Situation).