So erhalten Sie einen 90+ Core Web Vitals Score für einen E-Commerce-Shop (Fallstudie)

In diesem Beitrag erfahren Sie, wie Sie bei Ihren Google Core Web Vitals (Desktop und Mobil) für einen E-Commerce-Shop eine Punktzahl von 90+ erzielen, selbst wenn Sie viele Plugins verwenden.

Als Google zum ersten Mal seine zentrale Bewertung der Web Vitals veröffentlichte , gerieten viele E-Commerce-Shop-Besitzer in Panik.

Im Gegensatz zu einer Basis-Content-Site oder einem Blog ist ein E-Commerce-Shop bildlastig und erfordert viel mehr funktionale Elemente , um einen Verkauf abzuschließen. Und jede hinzugefügte Funktion verlangsamt Ihre Website.

Zum Beispiel kann es 6-10 Sekunden dauern , bis der Live-Chat von selbst geladen ist. Das Laden des grundlegenden E-Mail-Trackings mit Klaviyo kann 1-2 Sekunden dauern. Selbst das Hinzufügen des Facebook-Pixels kann hundert Millisekunden dauern, bis es geladen ist.

Es spielt keine Rolle, ob Ihr Code verzögertes oder asynchrones Laden verwendet. Jedes zusätzliche Element auf Ihrer Website wirkt sich negativ auf Ihre wichtigsten Web-Vitalwerte aus.

Laut Searchmetrics bestehen derzeit 96 % der in den USA getesteten Websites das Core Web Vitals Assessment von Google entweder für Desktops, Mobilgeräte oder beides.

Und die Fehlerrate ist für E-Commerce-Shops aufgrund der erforderlichen Funktionalität für die Online-Transaktion noch höher .

In diesem Beitrag zeige ich Ihnen die genauen Schritte, die ich unternommen habe, um eine Google Core Vitals-Bewertung von über 90 für meine 7-stellige E-Commerce-Shop-Website zu erreichen.

Holen Sie sich meinen kostenlosen Mini-Kurs zum Starten eines erfolgreichen E-Commerce-Shops

Wenn Sie daran interessiert sind, ein E-Commerce-Unternehmen zu gründen, habe ich ein umfassendes Ressourcenpaket zusammengestellt , das Ihnen hilft , Ihren eigenen Online-Shop von Grund auf neu zu starten . Achten Sie darauf, es zu schnappen, bevor Sie gehen!

Klicke hier zum herunterladen

Was sind Google Core Vitals?

Google Core Web Vitals sind eine Reihe von Faktoren, die Google in die Suchrankings einbezieht, um die Qualität der Benutzererfahrung zu messen.

Google Core Vitals besteht aus 3 Komponenten.

• Größtes Contentful Paint (Google benötigt 2,5 Sekunden oder weniger) – Dies ist ein Maß dafür, wie lange es dauert, den größten Inhalt auf Ihrem Bildschirm zu sehen. Im Grunde ist es, wie schnell Ihre Website geladen wird.
• Verzögerung der ersten Eingabe (Google benötigt 100 Millisekunden oder weniger) – Dies ist ein Maß für die Reaktionsfähigkeit und Benutzerfreundlichkeit Ihrer Seite. Insbesondere misst Google die Verzögerung zwischen dem Klicken eines Besuchers auf eine interaktive Funktion und der Reaktionsgeschwindigkeit der Seite auf diesen Klick.
• Kumulative Layoutverschiebung (Google erfordert eine Punktzahl von 0,1 oder weniger) – Dies ist ein Maß dafür, wie stabil Ihre Seite beim Laden ist. Bewegt sich Ihr Inhalt beim Rendern der Seite nach oben und unten? Dies ist die einzige Google Core Web Vital-Kennzahl, die nichts mit der Seitengeschwindigkeit zu tun hat. Es ist auch am schwierigsten zu debuggen, wenn Sie nicht wissen, was Sie tun.

In den verbleibenden Abschnitten dieses Beitrags wird GENAU beschrieben, wie ich diese 3 Metriken für meinen E-Commerce-Shop korrigiert habe , um sowohl auf dem Desktop als auch auf dem Handy einen Google Core Vitals-Score von über 90 zu erreichen.

Der für diese Fallstudie verwendete E-Commerce-Shop

Die meisten E-Commerce-Shop-Besitzer sind entweder bei Shopify, WooCommerce, BigCommerce oder Shift4Shop und all diese Strategien gelten unabhängig von der Plattform, auf der Sie sich befinden.

Mein 7-Figuren-Shop befindet sich auf BumblebeeLinens.com. Fühlen Sie sich frei, den Google-Seitengeschwindigkeitstest in meinem Shop durchzuführen, während Sie diesen Beitrag lesen, um meine Ergebnisse aus erster Hand zu sehen.

Zunächst einmal verwendet mein Geschäft viele der neuesten E-Commerce-Schnickschnack, weil ich im Profitable Online Store einen E-Commerce-Kurs unterrichte.

Tatsächlich behandle ich meinen Shop wie ein Labor , um neue Funktionen zu testen und in diesem Blog darüber zu berichten.

Hier sind die Plugins und Dienste , die ich in meinem Shop für diese Fallstudie verwende.

• Klaviyo – Meine E-Mail-Marketing-Plattform
• Postscript – Meine SMS-Marketingplattform
• Vizury – Mein Anbieter von Push-Benachrichtigungen
• ManyChat – Mein Facebook Messenger-Marketinganbieter, der meinen Live-Chat implementiert
• Gorgias – Meine Kundenservice-Software, die die gesamte Kundenkorrespondenz bearbeitet.
• Spin To Win Popup – Mein primärer Lead-Magnet für meinen Shop
• Facebook Pixel – Verfolgt alle meine Verkäufe von Facebook
• Google Analytics – Verfolgt meine Website-Verkäufe
• Slide Up benachrichtigen – Bietet soziale Beweise, indem Verkäufe angezeigt werden, sobald sie eingehen

Nur zum Spaß lädt meine Website OHNE Optimierungen so schnell.

So schnell läuft es mit den Optimierungen, die ich Ihnen jetzt beibringen werde.

So beheben Sie Ihre Probleme mit Large Contentful Paint (LCP) und First Input Delay (FID)

Niedrige LCP- und FID-Werte werden durch langsame Seitengeschwindigkeiten verursacht . Wenn Sie Ihre Website schneller machen können, werden sich sowohl Ihre LCP- als auch Ihre FID-Werte von selbst beheben.

Für 99% der E-Commerce-Shops werden LCP- und FID-Probleme verursacht durch…

• Laden von JavaScript und CSS, das das Rendering blockiert – Ohne Optimierung werden Javascript- und CSS- Dateien nacheinander geladen, was das visuelle Rendering Ihrer Seite blockieren kann. Der beste Weg, Ihr Javascript zu beschleunigen, besteht darin, Ihren Code träge zu laden oder das Rendering zu verschieben, damit es nichts blockiert.
• Laden großer Fotos und/oder Videos – Je größer und höher die Auflösung Ihrer Bilder ist, desto länger dauert das Laden. Laden Sie niemals ein größeres Bild als das, was auf Ihrer Website angezeigt wird. Außerdem sollten Sie niemals Bilder laden, die nicht auf dem Bildschirm sichtbar sind.
• Ein langsamer Server – Ein langsamer Server sollte bei vollständig gehosteten Plattformen wie Shopify, BigCommerce oder Shift4Shop kein Problem darstellen, aber wenn Sie WooCommerce verwenden, kann die Verwendung eines schnelleren Hosts wie WPEngine Ihre Website dramatisch beschleunigen.

Auf einem hohen Niveau, wenn Sie die 3 oben genannten Probleme angehen, haben Sie eine blitzschnelle Website.

So erreichen Sie Seitenladegeschwindigkeiten von 1 Sekunde

Unten finden Sie eine vollständige Liste meiner Geschwindigkeitsoptimierungen zusammen mit einer Bewertung von 1-5, wobei 5 die größte Auswirkung auf die Geschwindigkeitsverbesserung anzeigt.

Generell solltest du dich auf die 5er konzentrieren und die 1er und 2er nur umsetzen, wenn du Zeit hast oder super anal bist :)

Wenn Sie wissen möchten, wie ich eine Seitenladegeschwindigkeit von 1 Sekunde erreicht habe , können Sie mit einer Bewertung von 5 direkt zu den großen Kanonen springen :)!

Browser-Caching aktivieren (Bewertung 1 von 5)

Browser-Caching weist den Client-Browser an, Bilder und andere Elemente Ihrer Website auf dem lokalen Computer des Benutzers zwischenzuspeichern, um das Durchsuchen Ihrer Website NACH dem ersten Laden der Seite viel schneller zu machen .

Browser-Caching sollte IMMER aktiviert sein. Beachten Sie jedoch, dass das Browser-Caching KEINE Auswirkungen auf Ihre Google Core Web Vitals hat . Google kümmert sich nur darum, wie Ihre Website aus einem völlig kalten Zustand geladen wird.

CSS/JS-Dateien minimieren (Bewertung 1 von 5)

Durch das Minimieren Ihres CSS/JS wird der gesamte Leerraum aus Ihren CSS- und Javascript-Dateien entfernt, um hier und da ein paar Bytes zu sparen.

Im Allgemeinen wird die Verkleinerung Ihrer CSS/JS-Dateien Ihre Seitengeschwindigkeit nicht dramatisch verbessern.

Führen Sie diese Optimierung durch, wenn Sie versuchen, die letzte Millisekunde an Geschwindigkeit von Ihrer Website abzurufen .

Kombinieren Sie HTML-, CSS- und JS-Dateien (Bewertung 2 von 5)

Die Kombination Ihrer HTML-, CSS- und JS-Dateien in weniger Dateien kann sich auf Ihre Seitengeschwindigkeit auswirken, da Ihr Server weniger Dateien abrufen muss.

Aber mit der neuesten Webserver-Technologie können mehrere Dateien gleichzeitig parallel abgerufen werden, was diese Optimierung drastisch abschwächt . Ich würde nicht zu viel Zeit damit verbringen.

Bereinigen Sie Ihre Weiterleitungen (Bewertung 2 von 5)

Ihre Website ändert sich ständig und manchmal werden Sie von bestimmten Bildern und/oder Seiten zu anderen weitergeleitet.

Als ich beispielsweise vor vielen Jahren alle meine Seiten von http:// auf https:// migrierte, habe ich als schnelle Lösung 301-Weiterleitungen von bestimmten Seiten und Bildern zu ihren sicheren Gegenstücken ausgegeben.

Jede Weiterleitung auf Ihrer Seite verlangsamt Ihre Site. Stellen Sie daher sicher, dass Sie ein Tool wie GTMetrix verwenden, um Weiterleitungen auf Ihren Seitenelementen zu erkennen und zu entfernen.

Verwenden Sie einen schnelleren Webhost (Bewertung 3 von 5)

Wenn Sie sich auf einer Open-Source-Plattform wie WooCommerce oder Magento befinden, könnte Ihr erster Instinkt sein, Geld auf einen brandneuen Server zu werfen, um Ihre Probleme mit der Seitengeschwindigkeit zu beheben.

Aber meistens wird ein schnellerer Server Ihre Geschwindigkeitsprobleme nicht lösen . Wenn Sie jedoch derzeit günstiges Shared Hosting verwenden , kann ein VPS oder ein dedizierter Server einen erheblichen Unterschied machen.

Verwenden Sie ein CDN (Bewertung 2-3 von 5)

Content Delivery Networks oder CDNs speichern mehrere Kopien Ihrer Website und Bilder auf mehreren Servern auf der ganzen Welt, sodass Ihre Inhalte vom nächstgelegenen, geografisch gelegenen Server bereitgestellt werden.

Wenn Sie weltweit Kunden haben und Ihre Website sehr bildlastig ist , kann die Verwendung eines CDN erhebliche Auswirkungen auf Ihre Seitengeschwindigkeit haben.

Bei kleineren Sites wie meiner, die hauptsächlich in den USA dienen, hat die Verwendung eines CDN jedoch nur einen geringen Einfluss auf die Seitengeschwindigkeit .

Größere Bilder und Skripte vorladen (Bewertung 3 von 5)

Metriken wie „größter Contentful Paint“ messen die Geschwindigkeit des größten Elements auf Ihrer Seite. Daher ist es sinnvoll, die größten Elemente auf Ihrer Seite „vorzuladen“, indem Sie Hinweise in Ihrem HTML-Code bereitstellen.

Preload-Hinweise sind Anweisungen in Ihrem HTML-Code, die einem Browser mitteilen, welche Ressourcen für die Seite am wichtigsten sind.

Wenn Sie beispielsweise ein großes Splash-Image haben , ist es sinnvoll, dieses Image zuerst zu laden, um Ihr LCP zu verbessern.

Das Vorabladen wichtiger Elemente auf Ihrer Website kann zwar Ihren LCP-Score verbessern , hat jedoch keinen Einfluss auf die Gesamtgeschwindigkeit der Seite.

Verkleinern Sie Ihre Bilder (Bewertung 4 von 5)

Die meisten neuen E-Commerce-Shop-Besitzer verwenden Bildgrößen, die viel größer als erforderlich sind . Wenn Ihr Onlineshop-Theme 1000 × 1000 Bilder verwendet, sollten Sie niemals ein Bild hochladen, das größer als 1000 x 1000 ist.

Wenn auf Ihrer Website dasselbe Bild auf mehreren Seiten in unterschiedlichen Größen verwendet wird , sollten Sie für jede Version ein separates (und kleineres) Bild erstellen.

Beispielsweise wird ein Produktbild in meinem Shop je nach Seite in voller Größe, 50 % Größe, 33 % Größe und 25 % Größe angezeigt.

Dadurch habe ich 4 verschiedene Bilddateien (1 für jede Größe) auf meiner Seite und zeige nur das kleinste benötigte Bild ohne Qualitätsverlust an.

Darüber hinaus sollten Sie alle Ihre JPG-Dateien in Photoshop (oder einem anderen Bildprogramm, das Sie verwenden) auf eine Qualität von maximal 50 komprimieren.

Komprimieren und cachen Sie Ihre Seiten (Bewertung 4 von 5)

Wenn Sie sich auf einer vollständig gehosteten Plattform wie Shopify, BigCommerce oder Shift4Shop befinden, sind Ihre Seiten wahrscheinlich bereits komprimiert und vollständig zwischengespeichert, bevor sie bereitgestellt werden.

Wenn Sie sich jedoch auf einer Open-Source-Plattform wie WooCommerce befinden , stellen Sie sicher, dass Sie ein Plugin wie WP Rocket verwenden.

WP Rocket rendert alle Ihre Webseiten vor, sodass Ihr Shop statische Seiten bereitstellt, die wenig oder keine CPU-Auslastung erfordern.

WP Rocket komprimiert Ihre Webseite auch auf 90% ihrer Größe.

Verwenden Sie weniger Plugins, die externen Code laden (Bewertung 4 von 5)

Jedes Plugin, das Sie zu Ihrer Website hinzufügen, wird sie verlangsamen . Daher sollten Sie bei der Installation eines neuen Softwaretools äußerst vorsichtig sein.

Scheinbar harmlose Funktionen können Ihre Website manchmal dramatisch verlangsamen!

Beispielsweise kann das Hinzufügen eines Facebook-Share-Buttons oder eines Pinterest-Pin-It-Buttons möglicherweise dazu führen, dass ein neuer Javascript-Code von einer externen Quelle heruntergeladen wird.

Für Buttons wie Twitter, Facebook oder Pinterest verwende ich immer „non-javascript“-Versionen , die keinen extern geladenen Code benötigen.

Wenn Sie Ihrer Site einen Facebook-Share-Button hinzufügen möchten, sollten Sie die Hyperlink-Version wie unten gezeigt verwenden.

https://www.facebook.com/sharer/sharer.php?m2w&u=https://mywifequitherjob.com/the-best-way-to-find-vendors-for-your-online-store/

Lazy Laden Sie Ihre Bilder und Javascript-Code (Bewertung 5 von 5) – Das Wichtigste!

Wenn es darum geht, die Ladegeschwindigkeit Ihrer Seite zu verbessern, sollten Sie nur Elemente Ihrer Website laden, die erforderlich oder sichtbar sind.

Wenn beispielsweise ein Bild 5 Scrolls nach unten auf Ihrer Seite verborgen ist, sollten Sie dieses Bild nicht anzeigen, bis Ihr Kunde es weit genug nach unten geschafft hat, um es zu sehen.

Ebenso sollten Sie für Javascript-Code keine Funktionen für Ihre Website laden, bis sie tatsächlich geladen werden müssen.

So laden Sie Ihren Javascript- und CSS-Code träge

Das Lazy Loading Ihrer Bilder ist ziemlich einfach und die meisten Themes haben bereits das Lazy Loading von Bildern integriert.

Aber wie können Sie den Javascript-Code sicher auf Ihrer Website laden ?

Hier ist das Geheimnis, wie ich es mache.

Für jede Seite meiner Website lade ich zuerst die visuellen Elemente meiner Website . Dann lade ich den funktionalen Javascript-Code erst auf meiner Website, wenn der Benutzer eine Aktion auf der Seite ausführt .

Wenn Sie zum Beispiel jetzt zu Bumblebee Linens gehen, werden Sie feststellen, dass meine Website super schnell geladen wird (manchmal in weniger als einer Sekunde).

Wenn Sie jedoch auf die Seite klicken oder die Maus bewegen oder scrollen , wird der Live-Chat zusammen mit den anderen „Shopping“-Funktionen in meinem Shop geladen.

Mit anderen Worten, ich lade die Warenkorbfunktion meiner Website nur dann träge, wenn der Benutzer eine Aktion durchführt oder in meinem Geschäft einkauft.

Dadurch wird meine Seite superschnell geladen, da ich nur die grafischen HTML/CSS-Elemente meiner Seite lade.

Aus Nutzersicht ist das Einkaufserlebnis perfekt, da jede Seite blitzschnell geladen wird. Inzwischen sieht auch Google eine schnell ladende Seite.

So implementieren Sie Javascript Lazy Loading

Der erste Schritt, der erforderlich ist, um Ihr Javascript faul zu laden, besteht darin, herauszufinden, was faul geladen werden kann, OHNE Ihre Site zu beschädigen.

Denken Sie daran, dass Sie den gesamten „wesentlichen“ Code auf Ihre Website laden müssen, damit das „visuelle“ Einkaufserlebnis Ihrer Kunden nicht beeinträchtigt wird.

Daher müssen Sie jeden Codeabschnitt laden, der die Darstellung der grafischen Elemente Ihrer Site beeinflusst.

So finden Sie heraus, was wichtig ist.

Gehen Sie zu GTMetrix und analysieren Sie Ihr Wasserfalldiagramm . Ihr Wasserfalldiagramm zeigt Ihnen alles, was auf Ihrer Seite geladen wird und wie lange es dauert, es zu laden.

Laut obigem Diagramm benötigt klaviyo_subscribe.js 450 ms zum Laden. Außerdem benötigt die klaviyo_subscribe.css weitere 420ms.

Klaviyo ist mein E-Mail-Marketing-Tool und ich weiß mit Sicherheit , dass Klaviyo die Darstellung meiner Website NICHT beeinflusst.

Infolgedessen kann ich Klaviyo leicht faul laden, ohne die visuellen Elemente der Seite zu beeinträchtigen.

Tatsächlich reduziert das Entfernen des Klaviyo-Codes fast eine volle Sekunde von meiner Seitengeschwindigkeit!

Erstellen Sie mit GTMetrix eine Liste des langsam ladenden Codes , der nicht zum Rendern der visuellen Elemente Ihrer Site erforderlich ist, und laden Sie den Code dann träge, wenn EINES der folgenden Ereignisse eintritt.

• Mausbewegung
• Seite scrollen
• Bildschirmberührung

Hier ist ein kleiner Codeausschnitt, der meine Javascript-Implementierung veranschaulicht.


function activity(){
defer(//Add all of your slow javascript stuff here);
activityEvents.forEach(function(eventName) {
document.removeEventListener(eventName, activity, true);
});
}

//Ein Array von DOM-Ereignissen, die interpretiert werden sollen als
//Benutzeraktivität.
var AktivitätEreignisse = [
'mousedown', 'mousemove', 'keydown', 'scrollen',
'Berührungsstart'
];

window.onload = function(){
//Diese Ereignisse zum Dokument hinzufügen.
//registrieren Sie die Aktivitätsfunktion als Listener-Parameter.
AktivitätEvents.forEach(Funktion(EreignisName) {
document.addEventListener(Ereignisname, Aktivität, wahr);
});
}

Sobald Sie diesen einen Schritt implementiert haben, sollten Sie in der Lage sein, Seitenladegeschwindigkeiten von unter 1 Sekunde auf Mobilgeräten und Desktops zu erreichen!

So beheben Sie Ihre kumulativen Layout-Shift-Probleme

90% Ihrer kumulativen Layout-Shift-Probleme werden durch die folgenden 2 Gründe verursacht.

Laden von Elementen ohne Abmessungen

Die Parameter für die Bildgröße ermöglichen es einem Webbrowser , die Größe des Inhalts beim Laden zu erkennen.

Wenn Sie beispielsweise die Bildabmessungen in Ihrem HTML-Code definieren, reserviert der Browser beim Laden Platz für Ihr Bild, damit die Seite nicht springt.

Fehlen jedoch die Größenparameter, erfolgt keine Reservierung und die Seite muss sich beim endgültigen Laden des Bildes neu anordnen.

Die einfache Lösung für dieses Problem besteht darin , die Abmessungen jedes Elements auf Ihrer Website wie unten gezeigt anzugeben .

<img width="400" height="300" class="" src="images/Hankie_HLW-009.jpg" border="0" alt="Wedding Handkerchiefs" title=" Wedding Handkerchiefs ">

Dynamisches Hinzufügen von Inhalten mit Javascript

Viele Shopify-Plugins verwenden Javascript, um Funktionen auf Ihrer Website dynamisch anzuzeigen . Und manchmal lädt dieser Code spät, was Ihre Seite nach oben und unten verschieben kann.

Wenn Sie beispielsweise Anzeigen auf Ihrer Website schalten, springt Ihre Website möglicherweise beim Laden der Anzeige auf und ab.

Der beste Weg, dies zu verhindern, besteht darin , Speicherplatz auf Ihrer Seite für die Anzeige der hinzugefügten Inhalte vorab zuzuweisen .

Das Hinzufügen von vorgerenderten Leerzeichen kann für bestimmte Plugins problematisch sein. Wenden Sie sich daher an den Plugin-Ersteller, wenn dies ein Problem mit Ihrem Shop ist.

So lösen Sie kompliziertere CLS-Probleme

Wie bereits erwähnt, können 90% Ihrer CLS-Probleme durch Hinzufügen von Dimensionen zu Ihren Elementen gelöst werden. Aber die verbleibenden 10 % können EXTREM schwer zu lösen sein, ohne ein bestimmtes Werkzeugset zu verwenden.

Für meine Websites habe ich buchstäblich 3 Wochen gebraucht, um meine CLS-Probleme zu beheben, da der Google Page Speed-Test NICHT die in der Praxis gemessenen CLS-Werte widerspiegelt.

Zum Beispiel hatte mein Blog bei MyWifeQuitHerJob.com perfekte CLS-Ergebnisse im Pagespeed-Labortest, aber den CLS-Test vor Ort nicht bestanden.

Wenn Sie nicht wissen, wovon ich rede, hier ist eine kurze Aufschlüsselung des Google Page Speed ​​Test.

Die höchste Punktzahl sind Daten, die von echten Nutzern mit dem Chrome-Browser gesammelt wurden . Die unterste Punktzahl ist der Testlauf unter idealen Bedingungen .

Wenn die beiden Werte nicht übereinstimmen, ist es mühsam, dies zu beheben, da Google Ihnen nicht sagt, was nicht stimmt . Tatsächlich können Sie im Labor ein perfektes CLS-Ergebnis haben, aber im Feld vollständig durchfallen.

Folgendes sagt Ihnen Google NICHT über CLS.

Der Pagespeed-Test misst nur Ihren CLS über dem Falz unter idealen Bedingungen. Im wirklichen Leben scrollt ein Benutzer auf einer möglicherweise viel langsameren Internetverbindung auf und ab .

Um Ihre CLS-Probleme zu lösen, MÜSSEN Sie eine langsame Verbindung emulieren und sich wie ein echter menschlicher Benutzer verhalten!

So emulieren Sie einen echten Benutzer, um CLS zu beheben

Der beste Weg, dies zu tun, ist die Verwendung des integrierten Chrome-Debuggers.

So beheben Sie Ihre CLS-Probleme Schritt für Schritt.

Schritt 1: Rufen Sie den Chrome-Debugger auf

Schritt 2: Verlangsamen Sie Ihre Netzwerkgeschwindigkeit

Drosseln Sie auf der Registerkarte „Netzwerk“ die Seitengeschwindigkeit auf „Slow 3G“. Dadurch wird die Ladegeschwindigkeit der Seite drastisch verlangsamt, sodass Sie Layoutverschiebungen leicht erkennen können.

Schritt 3: Bereiche mit Layoutverschiebung rendern

Klicken Sie auf die Registerkarte "Leistung" und stellen Sie dann sicher, dass das Kontrollkästchen "Layout Shift Regions" unter "Rendering" aktiviert ist.

Schritt 4: Aktualisieren Sie die Seite

Sobald Sie Ihren Chrome-Debugger eingerichtet haben, aktualisieren Sie die Seite und scrollen Sie wie ein echter Benutzer auf Ihrer Seite nach oben und unten .

Achten Sie darauf, nach blau hervorgehobenen Bereichen zu suchen , die auf eine Layoutverschiebung hinweisen.

Schritt 5: Analysieren Sie die Performance-Timeline

Wenn Sie beim Laden Layoutverschiebungen auf Ihrer Website feststellen, sehen Sie sich dies genauer an, indem Sie die Zeitachse des Seitenladevorgangs vergrößern .

Im folgenden Beispiel verschiebt sich das Layout, weil ich eine andere Schriftart lade, die die Seite leicht nach unten verschiebt, da die neue Schriftart größer ist.

Indem Sie diese Tests in verschiedenen Bereichen Ihrer Seite mehrmals ausführen, können Sie Ihre Probleme mit der kumulativen Layoutverschiebung leicht erkennen und beheben .

Der schwierigste Teil besteht darin, zu diagnostizieren, wo Ihre CLS-Probleme liegen, da der Google Page Speed-Test nur den oberen Teil Ihrer Seite berücksichtigt.

Sie können 90+ Core Web Vital Scores für einen E-Commerce-Shop erreichen

Wenn Sie alle oben genannten Anweisungen befolgen, können Sie Seitenladegeschwindigkeiten von unter 1 Sekunde erreichen und eine Bewertung von 90+ für Ihre Core Web Vitals sowohl für Mobilgeräte als auch für Desktop-Computer erzielen.

Generell solltest du deine Website immer so einfach wie möglich halten und auf jeden Fall auf Plugins verzichten!

Fragen Sie sich, ob Sie ein bestimmtes Feature unbedingt benötigen, BEVOR Sie es implementieren . Suchen Sie dann nach Lösungen, die das Hinzufügen von zusätzlichem Javascript-Code zu Ihrer Site nicht erfordern .

Da ich super anal bin, untersuche ich den Quellcode jedes Plugins, das ich installiere, zusätzlich zu den stattfindenden Netzwerkaufrufen .

Einmal habe ich blind ein Plugin verwendet, das meine Website-Informationen buchstäblich an mehrere Werbenetzwerke sendet und meine Kundeninformationen ohne mein Wissen verkauft!

Die meisten Probleme mit der Seitengeschwindigkeit werden nicht durch Ihr Theme verursacht, sondern durch die Plugins, die Sie installieren . Seien Sie vorsichtig und viel Spaß beim Verkaufen!