9 Tipps zur Optimierung der Shopify-Site-Geschwindigkeit

Veröffentlicht: 2020-06-29

Shopify ist eine unglaublich zugängliche Plattform, mit der große Unternehmen wie Lindt ihren E-Commerce-Shop in nur 5 Tagen erstellen und eröffnen können. Es ist einfach, einen Shop zu eröffnen und im Handumdrehen mit dem Handel zu beginnen, und verfügt über viele integrierte Funktionen, die diesen Prozess vereinfachen.

Es gibt jedoch einige Dinge, die Händler beachten müssen, um das Beste aus ihren Geschäften herauszuholen. Die Geschwindigkeit der Website bleibt einer dieser kritischen Faktoren. Eine langsam ladende Website hat viele negative Seiten: von geringem Engagement und hohen Absprungraten bis hin zu weniger Traffic, niedrigeren Verkäufen und sogar einem beschädigten Suchmaschinenranking (Google liebt Seiten mit einer schnellen Ladezeit), ist es sinnvoll, alles zu tun, um Ihre zu verbessern Website so schnell wie möglich.

In diesem Artikel untersuchen wir Möglichkeiten, wie Sie Ihre aktuelle Website-Geschwindigkeit einschätzen können, und geben Ihnen dann unsere Top-Tipps, um sicherzustellen, dass Sie alles tun, um die Geschwindigkeit zu erhöhen.

So überprüfen Sie die aktuelle Geschwindigkeit Ihrer Shopify-Website

Verwenden Sie PageSpeed ​​Insights, die Ihnen einen Geschwindigkeitswert und Empfehlungen für Verbesserungen geben. Es trennt Desktop- und mobile Ergebnisse und gibt Empfehlungen wie:

  • Optimieren Sie Ihre Bilder
  • Minimieren Sie JavaScript und CSS
  • Eliminieren Sie JavaScript und CSS, die das Rendering blockieren, "above the fold".
  • Nutzen Sie das Browser-Caching und reduzieren Sie die Antwortzeit des Servers
  • Vermeiden Sie Weiterleitungen
  • Gzip-Komprimierung

Es reicht nicht aus, den Test nur auf Ihrer Homepage durchzuführen – es lohnt sich, mindestens die 10 meistbesuchten Seiten Ihrer Website zu testen – dort haben Geschwindigkeitsverbesserungen die größte Wirkung. Sehen Sie sich unseren Leitfaden zur Durchführung und Interpretation eines Website-Geschwindigkeitsaudits an.

Es gibt jedoch einige Einschränkungen für das Insights-Tool. Obwohl es nützlich ist, lohnt es sich, ein paar Dinge zu beachten. Es markiert Websites, die stark auf Javascript angewiesen sind (wie die meisten Shopify-Websites), und beurteilt Websites anhand einer technischen Checkliste, die einige praktische Überlegungen nicht berücksichtigt. Sie kann auch variieren, je nachdem, wie viel Bandbreite zum Zeitpunkt der Testdurchführung verfügbar ist.

Ich erinnere mich an einen Kunden bei einer anderen Agentur, dessen Punktzahl nach einigen Website-Änderungen von 98 auf 96 gesunken ist und darauf bestand, die Punktzahl durch andere Änderungen wieder zu verbessern. Was sie nicht verstanden, dass dies andere Bereiche ihrer Website beschädigen oder unterminieren könnte, und es war nicht die Zahl in der Punktzahl, die der kritische Faktor war, sondern die reale Benutzerfreundlichkeit und Geschwindigkeit der Website selbst.

Zusammenfassend also: Es ist ein guter Leitfaden, um sich ein Bild davon zu machen, wo Sie mit Ihrer Website-Geschwindigkeit stehen, aber nicht das A und O.

Sie können auch Pingdom oder GTmetrix verwenden, um Ihre Seitengeschwindigkeit zu bewerten. Wenn Sie ein paar verschiedene Tools ausprobieren, erhalten Sie einen breiteren Überblick über die Geschwindigkeitsleistung, Probleme und Abhilfemaßnahmen.

So erhöhen Sie die Geschwindigkeit Ihrer Website

Sobald Sie eine Vorstellung davon haben, wie Ihre Website funktioniert, haben Sie möglicherweise einige empfohlene Aktionen, die sich aus dem Tool ergeben, mit dem Sie Ihre Seiten ausgeführt haben. Wenn dies der Fall ist, finden Sie hier unsere zehn wichtigsten Maßnahmen, die Sie ergreifen können, um die Geschwindigkeit Ihrer Website zu erhöhen.

1 Verwenden Sie AMP, um Seiten schneller zu machen

AMP (Accelerated Mobile Pages) trägt dazu bei, die Seitenladegeschwindigkeit auf Mobilgeräten zu verbessern. Die Prämisse ist, die Webseiten in einem Standardformat (von Google definiert) bereitzustellen, um die Seitengröße und Ladezeit zu reduzieren. Beispielsweise werden alle Inhalte der Seite auf einmal geladen, und Browser kennen das Layout von AMP-Seiten im Voraus.

Obwohl Shopify standardmäßig keine AMP-Versionen seiner Stores anbietet, sind im App Store Apps wie RocketAmp verfügbar, die in Ihrem Namen AMP-Versionen der Seiten Ihres Stores erstellen. Denken Sie daran, dass es zu Problemen mit Seitenfehlern kommen kann, wenn Sie dieser Route folgen und die App später nicht mehr verwenden.

2 Bildoptimierung

Das Komprimieren Ihrer Bilder ist wichtig, um Webseiten schneller zu laden, insbesondere auf E-Commerce-Websites.

Bildkomprimierung bedeutet, das Bild in seiner Originalgröße aufzunehmen und dann seine Dateigröße zu reduzieren, ohne die Qualität zu beeinträchtigen.

Mit Shopify können Sie die folgenden Bildformate verwenden:

  • JPEG oder JPG
  • Progressives JPEG
  • PNG
  • GIF

PNG-Bilder sind nützlich, wenn Sie transparente Pixel in Ihrem Bild benötigen (Sie werden sie oft mit einem Gittermuster im Hintergrund sehen, das den transparenten Teil anzeigt), aber sie nehmen normalerweise mehr Platz ein als JPEGs. Ziehen Sie daher die Verwendung von JPEGs als Standard in Betracht, wenn Sie dies tun kann.

Es gibt zwei Komprimierungsstufen:

  • „verlustfreie Komprimierung“, die Ihnen eine kleine Datei ohne Beeinträchtigung der Bildqualität liefert
  • „verlustbehaftete Komprimierung“, die zu einer noch kleineren Datei führt, ABER zu Einbußen bei der Bildqualität

Beide Optionen stehen Ihnen zur Verfügung, aber als E-Commerce-Website, die Produkte verkauft, ist es wahrscheinlich, dass Bilder ein wichtiger Teil sind, um Kunden zum Kauf zu bewegen. In einer kürzlich von Eastside Co durchgeführten Umfrage unter 1.500 Online-Käufern gaben 37,8 % der Befragten an, dass Produktbilder ihrer Meinung nach „sehr oder äußerst einflussreich“ bei ihren Kaufentscheidungen seien. In Anbetracht dessen sollten Sie für kleinere Dateien die verlustfreie Komprimierung in Betracht ziehen, ohne jedoch die Qualität zu beeinträchtigen.

Stellen Sie beim Hochladen von Bildern auf Ihre Website sicher, dass sie die für die Seite erforderliche Größe in Bezug auf Pixelbreite und -höhe haben. Sie können das kostenlose Tool tinypng.com verwenden, um die Größe Ihrer Bilder zu reduzieren.

3 Verwenden Sie ein schnelles und ansprechendes Design

Wenn Sie ein sofort einsatzbereites Design verwenden, anstatt die Dienste eines Shopify-Experten wie Eastside Co in Anspruch zu nehmen, stellen Sie sicher, dass Sie eines auswählen, das schnell und reaktionsschnell ist. Das bedeutet, dass sie die Elemente auf Ihrer Website basierend auf den Abmessungen des Geräts ändern, mit dem sie angezeigt wird, was für eine bessere und schnellere Benutzererfahrung sorgt.

4 Überprüfen Sie die in Ihrem Store installierten Apps

Gehen Sie in den Admin Ihres Shopify-Shops und überprüfen Sie alle Apps, die Sie installiert haben, und entfernen Sie alle, die Sie nicht benötigen oder nicht verwenden. Das Problem hinter der langsameren Geschwindigkeit von Shopify-Websites ist häufig die Anzahl der Apps, die darauf ausgeführt werden: Jede App, die Sie installieren, ist mehr Code auf Ihrer Website und mehr Elemente, die geladen werden müssen.

Neben Apps lohnt es sich auch, sich den von Ihnen verwendeten Code von Drittanbietern anzusehen und allgemein aufzuräumen, wenn etwas nicht mehr benötigt wird.

5 Reduzieren Sie die Anzahl der HTTP-Anforderungen

Jedes Mal, wenn ein Besucher eine Ihrer Webseiten in seinem Browser lädt, werden auch zusätzliche Webdateien geladen, wie z. B. CSS-Dateien, Javascripts, Designbilder usw. Jedes Mal, wenn eine solche Datei angefordert wird, wird eine zusätzliche Anfrage für den Browser erstellt herstellen. Diese werden als HTTP-Anfragen bezeichnet und je mehr es gibt, desto länger dauert es.

Es gibt eine Reihe von technischen Maßnahmen, die Sie ergreifen können, um die Anzahl der HTTP-Anfragen zu reduzieren. Dieser Artikel enthält 9 Maßnahmen, die Ihnen dabei helfen und die Geschwindigkeit Ihrer Website erhöhen.

6 Minimieren Sie defekte Links und Weiterleitungen

Kaputte Links können Ihre HTTP-Anfragen erhöhen (siehe Punkt 5), und Sie möchten nicht, dass Ihre Besucher auf ihnen landen, da dies die Wahrscheinlichkeit erhöht, dass sie Ihr Geschäft verlassen und woanders einkaufen.

Unnötige Weiterleitungen (z. B. Seite A verweist auf Seite B, die auf Seite C verweist, auf der der Besucher schließlich landet) bedeuten, dass es länger dauert, bis Ihr Besucher ankommt, und verringern die Gesamtgeschwindigkeit der Website.

Im Shopify App Store sind Apps verfügbar, mit denen Sie defekte Links und Weiterleitungen identifizieren und Ihnen dabei helfen können, diese fortlaufend zu beheben.

7 Befreien Sie sich von Schiebereglern und Karussellbildern

Slider bleiben auf einigen Websites bestehen, aber wir würden ein einzelnes Heldenbild einem Bilderkarussell vorziehen. Wieso den?

  • Kaum jemand klickt auf die erste Folie, geschweige denn darauf, die zweite oder dritte zu sehen
  • Jede Folie bedeutet zusätzliches Gewicht für die Seite und da niemand sie wirklich sieht oder verwendet, sind sie weitgehend überflüssig
  • Auf Mobilgeräten sind sie noch weniger effektiv

Verwenden Sie stattdessen ein „Hero“-Bild (optimiert wie beschrieben). Es ist alles, was Sie brauchen.

8. Geben Sie den gesamten Tracking-Code über den Google Tag Manager (GTM) ein.

Verschieben Sie den von Ihnen verwendeten Drittanbietercode in den Google Tag Manager. Im Laufe der Zeit wird Ihrer Website Marketingsoftware oder Analysecode hinzugefügt, was unhandlich werden kann. Die Verwendung von GTM bedeutet, dass der gesamte Code von Drittanbietern einfacher zu verwalten ist und nur auf den relevanten Seiten geladen wird. Es bedeutet auch, dass Sie alles im Auge behalten und alle Elemente entfernen können, die später überflüssig werden.

9 Faules Laden

Dies ist eine weitere einfache Möglichkeit, die Geschwindigkeit Ihres Shopify-Shops zu erhöhen. Lazy Loading ist eine Methode, bei der alles, was nicht „above the fold“ auf einer Seite ist, nicht geladen wird, bis der Benutzer weiter nach unten scrollt.

Dies ist ein großartiger „Cheat“, um die Geschwindigkeit auf Seiten zu optimieren, die viele Bilder enthalten oder weiter unten Videos enthalten. Im Wesentlichen rufen Sie Elemente nur nach Bedarf ab, anstatt alles gleichzeitig zu laden. In dieser ausführlichen Anleitung erfahren Sie, wie Sie Lazy Loading von CSS-Tricks implementieren.

Da haben Sie es also: 9 praktische Punkte, die Sie beachten sollten, um sicherzustellen, dass Sie alles tun, um die Geschwindigkeit Ihrer Website zu erhöhen. Wenn Sie Hilfe bei Ihrem Shopify-Shop benötigen, von der Website-Geschwindigkeit bis zur Umsatzsteigerung, schreiben Sie uns!