9 Tipps zur Optimierung der Shopify-Seiten-Geschwindigkeit

9 Tipps zur Optimierung der Shopify-Seiten-Geschwindigkeit

Eine langsam ladende Webseite hat viele Nachteile: Von geringem Engagement und hohen Absprungraten bis hin zu weniger Verkehr, geringeren Verkäufen und sogar einem beschädigten Suchmaschinenranking ist es sinnvoll, alles zu tun, um deine Webseite so schnell wie möglich zu gestalten. Finde heraus wie.

Written by Matt Allen

5 min read

Shopify ist eine unglaublich zugängliche Plattform, auf der große Unternehmen wie Lindt ihren E-Commerce-Shop in nur 5 Tagen erstellen und eröffnen können . Es ist einfach, in kürzester Zeit ein Geschäft zu eröffnen und mit dem Handel zu beginnen. Es verfügt über zahlreiche integrierte Funktionen, um diesen Prozess zu vereinfachen.

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

In diesem Artikel untersuchen wir Möglichkeiten zur Bewertung deiner aktuellen Webseiten-Geschwindigkeit und geben dir dann unsere wichtigsten Tipps, um sicherzustellen, dass du alles tust, um die Geschwindigkeit zu erhöhen.

So überprüfst du die aktuelle Geschwindigkeit deiner Shopify-Webseite

Verwende PageSpeed Insights , um eine Geschwindigkeitsbewertung und Verbesserungsvorschläge zu erhalten. Es trennt Desktop- und Mobilergebnisse und gibt Empfehlungen wie:

  • Optimiere deine Bilder
  • Minimiere JavaScript und CSS
  • Nutze das Browser-Caching und reduziere die Antwortzeit des Servers
  • Vermeide Weiterleitungen
  • Gzip-Komprimierung Es reicht nicht aus, den Test nur auf deiner Homepage durchzuführen. Es lohnt sich, mindestens die zehn meistbesuchten Seiten deiner Webseiten zu testen. Hier haben Geschwindigkeitsverbesserungen den größten Einfluss.

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

Ich erinnere mich an einen Kunden einer anderen Agentur, dessen Punktzahl nach einigen Änderungen an der Webseite von 98 auf 96 gesunken ist und der darauf bestand, die Punktzahl durch andere Änderungen wieder zu verbessern. Was sie nicht verstanden haben, könnte andere Bereiche der Webseite beschädigen oder untergraben, und es war nicht die Zahl in der Punktzahl, die den entscheidenden Faktor darstellte, sondern die tatsächliche Verwendbarkeit und Geschwindigkeit der Webseite selbst.

Zusammenfassend lässt sich sagen, dass dies ein guter Leitfaden ist, um eine Vorstellung davon zu bekommen, wo du dich mit der Geschwindigkeit deiner Webseite befindest, aber nicht das A und O.

Du kannst auch Pingdom oder GTmetrix verwenden, um die Seitengeschwindigkeit zu bewerten. Wenn du verschiedene Tools ausprobierst, bekommst du einen breiteren Überblick über die Geschwindigkeitsleistung, Probleme und Abhilfemaßnahmen.

So erhöhst du die Geschwindigkeit deiner Webseite

Sobald du eine Vorstellung davon hast, wie deine Webseite funktioniert, hast du möglicherweise einige empfohlene Aktionen, die sich aus dem Tool ergeben, mit dem du deine Seiten durchlaufen hast. Wenn ja, um diese zu ergänzen, sind hier unsere 9 wichtigsten Maßnahmen, die du ergreifen kannst, um die Geschwindigkeit deiner Webseite zu erhöhen.

1 Verwende AMP, um Seiten schneller zu machen

AMP (Accelerated Mobile Pages) verbessert die Geschwindigkeit beim Laden von Seiten auf Mobilgeräten. Die Voraussetzung ist, dass die Webseiten in einem Standardformat (von Google definiert) bereitgestellt werden, um die Seitengröße und die Ladezeit zu reduzieren. Beispielsweise wird der gesamte Inhalt der Seite auf einmal geladen, und die Browser kennen das Layout der AMP-Seiten im Voraus.

Obwohl Shopify standardmäßig keine AMP-Versionen seiner Stores anbietet, sind im App Store Apps wie RocketAmp verfügbar, mit denen du in deinem Namen AMP-Versionen der Seiten deines Stores erstellen kannst. Beachte, dass es zu Problemen mit Seitenfehlern kommen kann, wenn du dieser Route folgst und die App später nicht mehr verwendest.

2 Bildoptimierung

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

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

Mit Shopify kannst du die folgenden Bildformate verwenden:

  • JPEG oder JPG
  • Progressives JPEG
  • PNG
  • GIF PNG-Bilder sind nützlich, wenn du transparente Pixel in deinem Bild benötigst (häufig werden sie mit einem Raster im Hintergrund angezeigt, das den transparenten Teil kennzeichnet). Sie beanspruchen jedoch normalerweise mehr Platz als JPEGs. Verwende daher standardmäßig JPEGs.

Es gibt zwei Komprimierungsstufen:

"Verlustfreie Komprimierung", mit der du eine kleine Datei erhälst, ohne die Bildqualität zu beeinträchtigen "Verlustbehaftete Komprimierung", was zu einer noch kleineren Datei führt, ABER zu einem Einbußen bei der Bildqualität. Beide Optionen stehen dir zur Verfügung. Als E-Commerce-Webseite, auf der Produkte verkauft werden, ist es jedoch wahrscheinlich, dass Bilder ein wichtiger Bestandteil 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 bei ihren Kaufentscheidungen „sehr oder äußerst einflussreich“ seien. Vor diesem Hintergrund solltest du die verlustfreie Komprimierung für kleinere Dateien verwenden, jedoch keine Qualitätsminderung.

Stelle beim Hochladen von Bildern auf deiner Webseite sicher, dass diese die für die Seite erforderliche Größe in Bezug auf Pixelbreite und -höhe haben. Du kannst das kostenlose Tool tinypng.com verwenden, um die Größe deiner Bilder zu reduzieren.

3 Verwende ein schnelles und ansprechendes Theme

Wenn du ein sofort einsatzbereites Theme verwendest, anstatt die Dienste eines Shopify-Experten wie Eastside Co zu nutzen, wähle eines, das schnell und reaktionsschnell ist. Dies bedeutet, dass du die Elemente auf deiner Webseite basierend auf den Abmessungen des Geräts änderst, mit dem sie angezeigt werden, um eine bessere und schnellere Benutzererfahrung zu erzielen.

4 Überprüfe die in deinem Store installierten Apps

Rufe den Administrator deines Shopify-Stores auf, überprüfe alle installierten Apps und entferne alle Apps, die du nicht benötigst oder nicht verwendest. Das Problem hinter der langsameren Geschwindigkeit von Shopify-Webseiten ist häufig die Anzahl der darauf ausgeführten Apps: Jede von deinen installierten Apps enthält mehr Code auf deiner Webseite und mehr zu ladende Elemente.

Neben Apps lohnt es sich auch, sich den von deinem verwendeten Code von Drittanbietern anzusehen und eine allgemeine Aufräumaktion durchzuführen, wenn etwas nicht mehr benötigt wird.

5 Reduziere die Anzahl der HTTP-Anforderungen

Jedes Mal, wenn ein Besucher deine Webseite in seinen Browser lädt, werden auch zusätzliche Webdateien geladen, z. B. CSS-Dateien, Javascripts, Designbilder usw. Jedes Mal, wenn eine solche Datei angefordert wird, wird eine zusätzliche Anforderung für den Browser erstellt. Diese werden als HTTP-Anforderungen bezeichnet. Je mehr Anfragen vorhanden sind, desto länger dauert es.

Es gibt eine Reihe technischer Schritte, mit denen du die Anzahl der HTTP-Anforderungen reduzieren kannst. Dieser Artikel enthält 9 Aktionen, die dir dabei helfen und die Geschwindigkeit deiner Webseite erhöhen.

6 Minimiere defekte Links und Weiterleitungen

Unterbrochene Links können deine HTTP-Anfragen erhöhen (siehe Punkt 5), und du möchtest nicht, dass deine Besucher auf ihnen landen, da dies die Wahrscheinlichkeit erhöht, dass sie dein Geschäft verlassen und woanders einkaufen.

Unnötige Weiterleitungen (Seite A zeigt auf Seite B, die beispielsweise auf Seite C zeigt, auf der der Besucher schließlich landet) bedeuten, dass das Eintreffen deines Besuchers länger dauert und die Gesamtgeschwindigkeit der Webseite verringert.

Im Shopify App Store sind Apps verfügbar, mit denen du fehlerhafte Links und Weiterleitungen identifizierst und diese fortlaufend beheben kannst.

7 Entferne Schieberegler und Karussellbilder

Schieberegler bleiben auf einigen Webseiten bestehen, aber wir würden ein einzelnes Heldenbild über einem Karussell von Bildern empfehlen. Warum?

Kaum jemand klickt jemals 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 redundant, sie sind auf Mobilgeräten noch weniger effektiv. Verwende stattdessen ein "Helden" -Bild (optimiert wie beschrieben). Es ist alles was du brauchst.

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

Verschiebe den von deinem verwendeten Code eines Drittanbieters in den Google Tag-Manager. Im Laufe der Zeit wird deiner Webseite Marketing-Software oder Analyse-Code hinzugefügt, der 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. Dies bedeutet auch, dass du den Überblick behalten und alle Elemente entfernen kannst, die später überflüssig werden.

9 Faules Laden

Dies ist eine weitere einfache Möglichkeit, die Geschwindigkeit deines Shopify-Shops zu erhöhen. Das verzögerte Laden ist eine Methode, bei der alles, erst geladen wird, wenn der Benutzer weiter nach unten scrollt.

Dies ist ein großartiger "Cheat" zur Optimierung der Geschwindigkeit auf Seiten, die bildlastig sind oder Videos weiter unten enthalten. Im Wesentlichen rufe Elemente nur nach Bedarf ab, anstatt alles gleichzeitig zu laden. In dieser ausführlichen Anleitung erfährst du, wie du das verzögerte Laden von CSS-Tricks implementierst .

Da hast du es also: 9 praktische Punkte, die du beachten musst, um sicherzustellen, dass du alles tust, um die Geschwindigkeit deiner Webseite zu erhöhen. Wenn du Hilfe bei deinem Shopify-Shop benötigst, von der Geschwindigkeit der Webseite bis zur Steigerung des Umsatzes, schreibe uns !

Wer wir sind

Wir sind einer der weltweit zuverlässigsten und erfahrensten Shopify Plus Partner. Als Full-Service-Agentur mit über 50 talentierten Mitarbeitern haben wir hunderten von ehrgeizigen Marken geholfen, ihre Ziele zu übertreffen.

Über Eastside Co

Was wir machen

Eastside Co ist führend bei UX-fokussiertem Shopify-Webdesign, ergebnisorientierten Marketingstrategien und erstklassigen Shopify-Anwendungen und -Software. Wir helfen Online-Unternehmen, sich vom Alltäglichen zu lösen und E-Commerce-Erfolg zu erzielen.

Lerne über unsere Dienstleistungen/ Services
Über 500 Shopify E-Commerce Webseiten.

Lass uns zusammenarbeiten, um dein E-commerce Shop aufzubauen.

Kontaktiere uns