So optimieren Sie Core Web Vitals auf Shopify

Es gibt online viele Informationen darüber, wie man Core Web Vitals misst und ob Ihre Website gut oder schlecht abschneidet. Aber es gibt nur sehr wenige umsetzbare Ratschläge, was Sie tun müssen, um Verbesserungen vorzunehmen, insbesondere bei Shopify.

In diesem Artikel sehen wir uns an, wie genau Sie Ihren Core Web Vitals-Score in Ihrem Shopify-Shop verbessern können. Wir haben versucht, möglichst viele dieser Empfehlungen ohne einen Entwickler umsetzbar zu machen, aber einige erfordern eine fachmännische technische Umsetzung.

Wir werden jede wichtige Web-Kernmetrik der Reihe nach aufschlüsseln, erklären, welche Faktoren ihre Leistung beeinflussen, und Ihnen dann zeigen, wie Sie jede CWV-Metrik in jedem Shopify-Shop verbessern können.

Klicken Sie auf die folgenden Überschriften, um direkt zu diesem Abschnitt zu springen:

• Wie Core Web Vitals auf Shopify berechnet werden
• So verbessern Sie LCP auf Shopify
• So verbessern Sie CLS auf Shopify
• So verbessern Sie FID auf Shopify
• Shopify Core Web Vitals-Apps

Was sind zentrale Web-Vitals?

Lassen Sie uns kurz zusammenfassen, was Core Web Vitals sind.

Core Web Vitals sind eine Reihe von Metriken, die Google verwendet, um die Leistung und Erfahrung von Webseiten für Benutzer zu messen. Für jede Metrik werden URLs entweder als „Grün – Gut“, „Gelb – Verbesserungsbedürftig“ oder „Rot – Schlecht“ gekennzeichnet.

Core Web Vitals Scores haben einen direkten Einfluss auf das Ranking in Suchmaschinen.

LCP - Größte zufriedene Farbe

Wie lange dauert es, bis das größte Element auf Ihrer Seite auf dem Bildschirm dargestellt wird?

CLS - Kumulative Layoutverschiebung

Wie stark verschiebt sich das Seitenlayout, wenn die Seite geladen wird?

FID - Erste Eingangsverzögerung

Wie lange dauert es, bis die Seite auf Interaktionen reagiert?

Wie Core Web Vitals auf Shopify berechnet werden

Es ist wichtig zu verstehen, wie Google Core Web Vitals-Ergebnisse berechnet, da dies Auswirkungen darauf hat, wie sinnvolle Verbesserungen vorgenommen werden können. Die Daten für Core Web Vitals stammen aus CrUX-Daten, die die Leistung für echte Website-Besucher mit dem Chrome-Webbrowser messen. Dies wird als „Felddaten“ bezeichnet.

Für jede CWV-Metrik gibt es eine durchschnittliche Mindestpunktzahl, die Sie erreichen müssen, um nicht als „Schlecht“ gekennzeichnet zu werden. Dies basiert auf den durchschnittlichen Punktzahlen, die für Gruppen von Seiten aufgezeichnet wurden. Es ist wichtig zu verstehen, dass Ihre Shopify-Website nicht anhand einer zentralen Web-Vitals-Metrik bewertet wird. die URLs auf Ihrer Website sind.

Wenn Ihr Shopify-Shop bei einer Core Web Vitals-Metrik fehlschlägt, zeigt Ihnen die Search Console ein Beispiel von URLs, die von dem Problem betroffen waren. Dies hilft Ihnen, das Problem einzugrenzen und Zielverbesserungen vorzunehmen. Bevor Sie mit der Optimierung von Core Web Vitals an Ihrem Shopify-Shop beginnen, ermitteln Sie zunächst, welche Verbesserungsbereiche am wirkungsvollsten sind. Verschwende deine Zeit nicht mit Arbeiten, die kein positives Ergebnis bringen.

Tipps zur Optimierung von Shopify Core Web Vital Metrics

Bei Core Web Vitals dreht sich alles darum, Ihre wichtigsten Inhalte und Ressourcen so schnell wie möglich bereitzustellen.

Die Optimierung der Seitengeschwindigkeit ist keine einmalige Sache. Ihr Unternehmen muss eine Kultur annehmen, in der die Auswirkungen auf die Seitengeschwindigkeit bei allen Entscheidungen berücksichtigt werden. Berücksichtigen Sie bei jeder Verbesserung, die Sie an Ihrem Shop vornehmen möchten, den Kompromiss in Bezug auf die Seitengeschwindigkeit.

So verbessern Sie LCP auf Shopify

LCP bezieht sich auf das größte Element auf Ihrer Seite und wie lange es dauert, bis der Browser dieses Element geladen und auf dem Bildschirm dargestellt hat. Dies ist normalerweise ein Bild, aber es könnte auch ein Textelement sein.

Um LCP in einem Shopify-Shop zu verbessern, ist es hilfreich, die Faktoren zu verstehen, die sich auf LCP auswirken. Es gibt vier Stufen, die stattfinden, um Ihr LCP-Element zu laden.

Bei LCP dreht sich alles darum, wie lange der Webbrowser braucht, um Ihr größtes Element auf die Seite zu malen/zu rendern. Laden und Malen sind nicht dasselbe. Selbst wenn Ihr LCP-Element auf eine kleine Dateigröße optimiert ist, kann LCP aus folgenden Gründen lange dauern:

• Ressourcenladeverzögerung. Es dauert zu lange, bis der Browser mit dem Herunterladen des Elements beginnt
• Element-Rendering-Verzögerung. Nachdem das LCP-Element vom Browser heruntergeladen wurde, dauert es zu lange, das Element auf der Seite darzustellen.

Die Erkenntnis zum Mitnehmen ist, dass LCP mehr ist als nur die Dateigröße Ihres größten Elements. Es ist die Zeit, die benötigt wird, um den 4-stufigen Prozess oben abzuschließen. Um Ihre LCP-Ergebnisse zu verbessern, konzentrieren Sie sich auf den gesamten Prozess des Ladens und Renderns Ihres LCP-Elements.

So finden Sie das LCP-Element auf jeder Shopify-Seite

Um LCP zu verbessern, müssen Sie wissen, welches Element auf einer Seite das LCP ist. Dies ist einfach auf Shopify. Gehen Sie einfach zu PageSpeed ​​Insights und analysieren Sie die URL, für die Sie das LCP finden müssen. Wenn der Bericht fertig ist, scrollen Sie nach unten und sehen Sie im Abschnitt „Diagnose“ nach. Es wird eine Zeile namens „Largest Contentful Paint element“ geben. Erweitern Sie dies, um Details darüber zu sehen, welches Element das LCP auf dieser Seite ist.

Lazyload das LCP-Element nicht

Lazy Loading ist eine Methode, mit der ein Element erst geladen wird, wenn es im Ansichtsfenster sichtbar wird. Dadurch wird der Inhalt "above the fold" schneller geladen. Sie sollten Ihr LCP-Element nicht faul laden, da es verzögert, wie schnell der Browser mit dem Herunterladen des Elements beginnt.

In Shopify-Shops ist das LCP-Element auf einer Produktseite normalerweise das Hauptproduktbild. Oder in einem Blogbeitrag wird das LCP-Element wahrscheinlich ein Blog-Header-Bild sein. Einige Shopify-Designs fügen automatisch Lazy Loading zu jedem Bild hinzu, sogar zu denen, die „above the fold“ erscheinen. Überprüfen Sie jede Ihrer Shopify-Vorlagen und finden Sie heraus, was das LCP-Element ist. Wenn es "above the fold" angezeigt wird, vergewissern Sie sich, dass das folgende Attribut nicht im HTML-Tag enthalten ist:

loading="faul"

Laden Sie das LCP-Element vor

Sie können rel="preload" verwenden, um Webbrowser anzuweisen, eine bestimmte Ressource so schnell wie möglich herunterzuladen. Durch Anwenden von rel="preload" auf Ihr LCP-Element priorisiert der Browser das Laden dieser Ressource auf der Seite.

Sie können dies selbst tun, indem Sie Ihren Themencode bearbeiten. Für Entwickler von Shopify-Designs gibt es einen Filter, der Shopify-Liquid-Vorlagen hinzugefügt werden kann, der ein Preload-Tag ausgibt.

Verwenden Sie Nextgen-Images

Neue Bildformate wie WebP haben eine kleinere Dateigröße als herkömmliche Formate wie JPG und PNG. Wenn Ihr LCP-Element ein Bild ist, beschleunigt die Verwendung eines Nextgen-Bildformats die Downloadzeit. Verwenden Sie nach Möglichkeit WebP-Bilder, aber denken Sie daran, einen Fallback für ältere Browser einzufügen, die keine Bilder der nächsten Generation unterstützen.

Neue Shopify-Designs konvertieren Ihre Bilder automatisch in WebP und stellen sie den entsprechenden Browsern bereit.

Stellen Sie sicher, dass das LCP-Element in der anfänglichen HTML-Antwort enthalten ist

Reduzieren Sie die Verzögerung beim Laden von Ressourcen, indem Sie sicherstellen, dass Ihr LCP-Element innerhalb der ursprünglichen HTML-Antwort geliefert wird. Wenn das LCP-Element von einer externen Ressource (z. B. einem JS-Skript) in die Seite geladen wird, dauert es länger, bis der Browser mit dem Herunterladen des LCP-Elements beginnt.

Ob dies Auswirkungen auf Ihren Shopify-Shop hat, hängt von dem von Ihnen verwendeten Shop-Design ab. Eine schnelle Möglichkeit, dies zu testen, besteht darin, herauszufinden, was Ihr LCP-Element ist, und dann die Seite mit deaktiviertem JS anzuzeigen. Wenn das LCP-Element nicht im Seiten-HTML ausgegeben wird, bedeutet dies, dass es nicht innerhalb der anfänglichen HTML-Antwort geliefert wird.

Eliminieren Sie Render-Blocking-Ressourcen

Der Rat „Ressourcen, die das Rendern blockieren, beseitigen“ gibt es schon seit Ewigkeiten. Aber was bedeutet es eigentlich? Einige Ressourcen wie Skripte und Stylesheets blockieren das Rendern einer Webseite. Wenn ein Browser eine Ressource entdeckt, stoppt er das Herunterladen der Seite und lädt stattdessen diese Ressource herunter und führt sie aus. Dies verzögert das Rendern der Seite für Benutzer.

Ein Lighthouse-Bericht zeigt Ihnen die Render-Blocking-Ressourcen für jede Seite. Sie müssen also herausfinden, welche Ihrer Skripte und Stylesheets Renderblocker sind, und dann optimieren, wie sie geliefert werden.

Beseitigen Sie Render-Blocking JS

Zuerst müssen Sie zwei Attribute namens defer und async verstehen. Diese HTML-Attribute können an externe Skripte angehängt werden und dem Browser mitteilen, wann er die Ressource herunterladen/ausführen soll.

Indem Sie also async oder defer auf Ihre JS-Skripts anwenden, können Sie deren Auswirkungen auf die Seitendarstellung minimieren. Shopify wird Ihre Skripte nicht automatisch asynchronisieren oder zurückstellen, daher müssen Sie in die Theme-Liquid-Vorlagen gehen und das Attribut selbst hinzufügen. Seien Sie bei diesem Vorgang jedoch sehr vorsichtig, da Sie berücksichtigen müssen, welche Auswirkungen das Zurückstellen eines Skripts auf Ihre Shop-Funktionalität haben könnte.

Sie werden auch feststellen, dass Apps und Plug-ins, die Sie in Ihrem Shopify-Shop installieren, JS-Skripts ausgeben, die das Rendern blockieren. Sie können diese anhand eines Lighthouse-Berichts identifizieren. Berücksichtigen Sie jede App, die Sie in Ihrem Shop installieren, sorgfältig und denken Sie über die möglichen Auswirkungen auf die Seitengeschwindigkeit nach. Einige Händler werden nicht einmal bemerken, dass ungenutzte Apps immer noch in einem Geschäft installiert sind und die Seitengeschwindigkeit beeinträchtigen. Stellen Sie beim Deinstallieren einer App sicher, dass kein Legacy-Code in Ihrem Design zurückbleibt.

Beseitigen Sie CSS-Stylesheets, die das Rendern blockieren

Um Renderblocking-CSS zu eliminieren, sollten Sie die kritischen Stile, die zum Rendern des Inhalts "above the fold" erforderlich sind, inline einfügen. Es ist nicht effizient, Ihr gesamtes Stylesheet sofort für jeden Besucher herunterzuladen, da der größte Teil des CSS nicht verwendet wird.

Die Lösung besteht darin, das kritische CSS, das zum Rendern des Abschnitts "above the fold" Ihrer Seite benötigt wird, einzubetten, indem Sie es in ein style -Tag in Ihrem head einfügen . Fügen Sie dann den folgenden Code hinzu Ihrer theme.liquid.js, um Ihr Haupt-Stylesheet asynchron zu laden.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

Bevor Sie dies in Ihrem Live-Shop freigeben, experimentieren Sie mit einem Testthema, um zu überprüfen, ob Ihre Seite visuell immer noch korrekt angezeigt wird.

So verbessern Sie CLS auf Shopify

Bei CLS dreht sich alles darum, wie stark sich das Seitenlayout beim Laden einer Seite verschiebt. Die Ursache sind normalerweise Bilder, die Inhalte verschieben, während sie geladen und gerendert werden.

Fügen Sie Ihren Bildern Breiten- und Höhenattribute hinzu

Die einfachste CLS-Lösung besteht darin, sicherzustellen, dass Ihre img-Tags explizite Breiten- und Höhenattribute ausgeben. Diese Attribute werden auf das Bild-HTML angewendet und teilen dem Browser die Bildbreite und -höhe mit. Mit diesen Informationen kann der Browser das Bildseitenverhältnis und die Abmessungen berechnen und den für dieses Bild erforderlichen Platz reservieren. Dadurch wird verhindert, dass sich das Layout verschiebt, wenn das Bild auf der Seite hinzugefügt wird.

Um dies für ein Bild in Ihrem eigenen Shopify-Shop zu tun, melden Sie sich an und gehen Sie zum Themenbereich. Und gehen Sie für Ihr Thema auf „Code bearbeiten“. Suchen Sie dann das Code-Snippet in Ihrer Liquid-Vorlage, das das Bild ausgibt, und fügen Sie das folgende Snippet zum img-Tag hinzu.

 height="{{img.height}}" width="{{img.width}}

Sehen Sie sich die flüssigen Vorlagen an, die Sie für Ihre Shopify-Homepage, -Sammlungen, -Produkte und -Blogs verwenden, und stellen Sie sicher, dass img-Tags Breiten- und Höhenattribute referenzieren.

Optimieren Sie Ihre Schriftarten

Diese ausgefallenen Webfonts, die Sie von Orten wie Google Fonts laden, können aufgrund eines Problems namens FOUS (Flash of Unstyled Text) CLS-Probleme verursachen. Hier lädt der Webbrowser zunächst eine Fallback-Schriftart, und wenn dann die Haupt-Webschriftart geladen wird, wird der Text neu gerendert, was zu einer Layoutverschiebung führt.

Reduzieren Sie die Abhängigkeit von Webfonts von Drittanbietern Versuchen Sie zunächst, Ihre Abhängigkeit von Webfonts von Drittanbietern zu verringern. Importieren Sie beim Importieren von Webschriftarten nur die Schriftfamilien, die Sie benötigen. Importieren Sie die verschiedenen Schriftstärken und -stile nicht, wenn sie nie verwendet werden, da dies die Schriftdateigröße aufbläht.

Fonts vorab laden Webfonts werden manchmal aus einem Stylesheet geladen. Dies verzögert, wie schnell der Browser mit dem Herunterladen der Schriftart beginnen kann. Laden Sie stattdessen Ihre Schriftdateien vorab in die Ihres Shops. Dadurch wird der Browser angewiesen, die Schriftdatei mit hoher Priorität zu laden.

Use font-display:optional Font-display ist eine CSS-Eigenschaft, die dem Browser mitteilt, was zu tun ist, wenn eine Schriftart nicht innerhalb von 100 ms heruntergeladen wurde. Der Browser lädt zunächst die Fallback-Schriftart, und wenn der Download der benutzerdefinierten Schriftart nicht innerhalb von 100 ms abgeschlossen ist, behält der Browser die auf der Seite gerenderte Fallback-Schriftart bei. Dadurch wird das Risiko verringert, dass die benutzerdefinierte Schriftart zu spät geladen wird und eine Layoutverschiebung verursacht.

So verbessern Sie FID auf Shopify

Unserer Erfahrung nach ist FID die am wenigsten verbreitete Core Web Vital-Metrik, von der wir sehen, dass sie sich auf Shopify-Shops auswirkt. Stellen Sie sich FID als eine Methode vor, um zu messen, wie reaktionsschnell eine Seite während des Ladevorgangs ist. Nichts frustriert Benutzer mehr als Klicken/Tippen und nichts passiert.

FID ähnelt einer anderen Metrik namens Total Blocking Time (TBT). TBT misst die Zeit zwischen dem Beginn des Renderns der Seite (First Contentful Paint oder FCP) und dem Zeitpunkt, an dem die Seite reagiert (Time to Interactive oder TTI).

TBT wird durch "lange Aufgaben" verursacht, die den Haupt-Thread an der Verarbeitung hindern. Im Hauptthread verarbeitet der Browser alles, was zum Laden einer Seite erforderlich ist. Wenn lange Aufgaben die Verarbeitung des Hauptthreads blockieren, verzögert dies, wie schnell eine Seite für Benutzer interaktiv wird.

Was ist der Unterschied zwischen FID und TBT?

Der Hauptunterschied zwischen FID und TBT besteht darin, dass FID auf Felddaten basiert (Daten von echten Benutzern, die Ihren Shopify-Shop besucht haben). Während TBT im Labor messbar ist und durch Ausführen von Tests in einer künstlichen Umgebung mit definierten Netzwerkbedingungen berechnet wird.

Da Sie FID beim Testen Ihrer eigenen Seiten nicht messen können, sollten Sie stattdessen TBT messen.

Um FID zu verbessern, müssen Sie beschleunigen, wie schnell Ihr Shopify-Shop auf die erste Interaktion eines Benutzers reagiert. Dies geschieht, indem Ihre Shopify-Seiten so effizient wie möglich geladen werden. Konzentrieren Sie sich auf diese drei Bereiche:

Reduzieren Sie die Auswirkungen von Code von Drittanbietern

Wie bei allen wichtigen Web-Vitals-Metriken ist JavaScript von Drittanbietern oft die Ursache von Problemen. Jeder Drittanbieter, der den Hauptthread länger als 250 ms blockiert, wird in einem Lighthouse-Bericht gekennzeichnet. Führen Sie Ihre Seiten durch Lighthouse, um festzustellen, welche Skripts von Drittanbietern Probleme verursachen. Entscheiden Sie dann, welche auf asynchron oder verzögert eingestellt werden können.

Reduzieren Sie die JavaScript-Ausführungszeit

Die Ausführungszeit Ihres JavaScripts ist ebenfalls wichtig. Führen Sie zunächst Ihre Seiten durch Lighthouse und ermitteln Sie, welche Skripte am längsten für die Ausführung benötigen. Lighthouse kennzeichnet alle Skripts, die länger als 2 Sekunden dauern.

Verwenden Sie Code-Splitting Anstatt Ihren gesamten JavaScript-Code in einer einzigen Datei bereitzustellen, teilen Sie Ihren Code in kleinere Teile auf und liefern Sie nur den Code, der für diese Seite benötigt wird. Dies ist nicht einfach und erfordert die Unterstützung der Entwickler, die Ihren Code verwalten. Sie finden dies viel einfacher, wenn es zu Beginn des Projekts in die Entwicklung Ihres Shopify-Themes integriert wird.

Verkleinern und komprimieren Sie Ihren Code Wenn Sie Ihren Code verkleinern, entfernen Sie unnötige Leerzeichen und Kommentare. Dies reduziert die Größe der Datei, beschleunigt aber die Geschwindigkeit, mit der ein Browser den Code ausführen kann. Eines der großartigen Dinge an Shopify ist, dass die meisten Theme-Js automatisch minimiert werden.

Wie bei der Minimierung reduziert das Komprimieren Ihres js die Dateigröße und beschleunigt, wie schnell der Webbrowser den Code ausführen kann.

Minimieren Sie die Thread-Arbeit

Der Haupt-Thread übernimmt die gesamte Arbeitsverarbeitung und Berechnung, wie eine Seite erstellt wird. Wenn der Hauptstrang durch intensive Aufgaben belegt ist, wird Ihr TBT schlechter. Dies hängt hauptsächlich davon ab, wie robust Ihr Shopify-Thema ist. Billige Themes, die von schlechten Entwicklern erstellt wurden, werden nicht so effizient geladen wie die von Shopify-Experten entwickelten.

Wie können Sie die Thread-Arbeit in Ihrem Shopify-Shop minimieren? Wie oben erwähnt, ist es viel einfacher, wenn dies von Anfang an in Ihr Thema integriert wird. Wir empfehlen den Kauf eines Premium-Shopify-Themes mit großartigen Bewertungen. Oder wenn Sie Ihren eigenen Shopify-Shop aufbauen, stellen Sie sicher, dass Sie mit erfahrenen Shopify-Entwicklern zusammenarbeiten, die sicherstellen können, dass Ihr Design optimiert ist, um Thread-Arbeit zu minimieren.

So messen Sie die Leistung von Core Web Vitals

Nachdem Sie nun verstanden haben, wie Sie Core Web Vitals in Ihrem Shopify-Shop verbessern können, müssen Sie als Nächstes wissen, wie Sie den Fortschritt Ihrer Core Web Vitals messen können.

Suchkonsole

Der schnellste Weg, um zu sehen, wie Ihr Shopify-Shop derzeit für Core Web Vitals abschneidet, ist die Search Console. Rufen Sie im linken Menü den Core Web Vitals-Bericht auf, um Daten zur aktuellen Leistung Ihrer Website zu erhalten. Es enthält eine Aufschlüsselung der Stellen, an denen Sie Probleme mit Core Web Vitals haben, und zeigt Ihnen ein Beispiel betroffener URLs.

Pagespeed Insights/Leuchtturm

Pagespeed Insights ist ein kostenloses Google-Tool, mit dem Sie die Seitengeschwindigkeit jeder Seite messen können. Führen Sie Ihre Shopify-URLs durch das Tool, um eine detaillierte Aufschlüsselung Ihrer Leistung zusammen mit empfohlenen Maßnahmen zum Erzielen einer höheren Punktzahl zu erhalten.

CrUX-Bericht

CrUX ist Googles eigener Geschwindigkeits-/Leistungsdatensatz für Millionen echter Seiten. Sie können auf die CrUX-Daten für Ihren eigenen Shopify-Shop zugreifen, indem Sie das Google CrUX Data Studio-Dashboard verwenden. Das Dashboard bietet eine detaillierte Aufschlüsselung der Leistung Ihrer Website in Bezug auf die Core Web Vitals-Metriken in den letzten 16 Monaten.

Was bedeuten all diese CWV-Begriffe?

Wenn Sie anfangen, sich Core Web Vitals anzusehen, werden Sie auf viele komplizierte Terminologien stoßen. Hier ist, was das alles bedeutet:

Core Web Vitals Shopify-Apps

Es gibt viele Shopify-Apps, die behaupten, die Core Web Vitals-Ergebnisse verbessern zu können. Einige dieser Apps sind effektiv und liefern eine Leistungsverbesserung. Obwohl dies Ihre Core Web Vitals-Punktzahlen verbessern kann, gibt es keine Garantie dafür, dass Sie einen Effekt sehen werden. Dies liegt daran, dass die Core Web Vitals-Ergebnisse für jeden Shopify-Shop einzigartig sind. Wenn die Core Web Vitals-Ergebnisse Ihres Shops aufgrund eines bestimmten Themenproblems schlecht sind, wird eine App wahrscheinlich keinen Unterschied machen.

Wenn Sie den App-Weg einschlagen möchten, empfehlen wir, eine App zu testen und die Auswirkungen zu beobachten, die sie auf die Leistung hat. Hier sind einige empfohlene Apps zum Testen:

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

Wenn Sie Beratung oder Unterstützung bei Ihrem E-Commerce-Geschäft benötigen, wenden Sie sich an unser Team und wir helfen Ihnen gerne weiter.