Unsere heutige Zeit wird oft als "schnelllebig" bezeichnet. Geschwindigkeit ist in nahezu allen Lebensbereichen die oberste Maxime. Wir wollen schneller ans Ziel kommen, erwarten eine schnelle Abwicklung, wollen schnell beliefert werden. Und jede Verzögerung wird als Zumutung wahrgenommen. "Geschwindigkeit" ist heutzutage also etwas, was ständig optimiert wird.

Darum ist es auch kein Wunder, dass Internetnutzer*innen erwarten, dass eine Website schnell geladen wird und zur Konkurrenz abwandern, wenn dies nicht der Fall ist. Insofern ist die Optimierung des Page Speeds, also der Ladezeit Deiner Website, erfolgsentscheidend für Dein Business.

So hat die Mobile Page Speed Study von Google folgendes ergeben: Die Bounce Rate (zu deutsch auch Absprungrate genannt) einer Webpage, also die Rate jener Internetnutzer*innen, die die Webpage ohne jegliche Interaktion wieder verlassen, verschlechtert sich mit jeder Sekunde, je länger das Laden einer Seite dauert. 

Shopify Shop Pagespeed Optimierung

Zusätzlich zeigen die Daten von Google, dass mehr als die Hälfte des gesamten Web Traffics über mobile Geräte erfolgt, die Conversion Rates jedoch dennoch niedriger sind als Traffic über den Desktop.

Was genau ist mit Ladezeit konkret gemeint?

Das ist die Zeit, die für das Laden jenes Contents benötigt wird, den Internetnutzer*innen sehen und mit dem sie interagieren können.

 Wir bei Tante-E haben über die letzten Monate eine intensive Analyse von Shopify durchgeführt und haben einen genauen Weg definieren können, wie man das Maximale bei der Ladezeit auf Shopify herausholen kann. Basierend auf Projekten mit vielen führenden Direct-To-Consumer Brands haben wir diese weiter perfektionieren und dessen Wirkung bestätigen können. Bevor wir ins Detail gehen, wollen wir kurz aufzeigen, wie sich die Ladezeit in einzelne Komponenten runtergebrochen werden können.

Die Site Speed Reports (also der Ladezeiten-Report) messen dabei folgende Aspekte:

1. Geschwindigkeit/Speed Index

Der durchschnittliche Speed Index (Durchschnittsgeschwindigkeitsindex) zeigt an, wie lange eine Website auf einem mobilen Gerät braucht, um Content zu laden und anzuzeigen. Je niedriger der Index, desto besser.

Shopify Shop Pagespeed Optimierung

 Best Practice (sozusagen bestmögliche Methode): Unter 3 Sekunden

 

2. Geschwindigkeit/Zeit bis zum ersten Byte:

Die durchschnittliche Zeit, die für das erste Byte benötigt wird, zeigt an, wie reaktionsschnell ein mobiler Webserver in einer bestimmten Kategorie ist. Je weniger Zeit benötigt wird, desto besser.

Shopify Shop Pagespeed Optimierung

Best Practice:  Unter 1,3 Sekunden in der Kategorie "First Contentful Paint"

 

3. Optimierung:

Die durchschnittlichen Requests (Anfragen) zählen die Zahl der einzelnen Contentstücke (pro App, Bild und Datei), die benötigt werden, um die gesamte Page anzuzeigen. Je weniger, desto besser.

Shopify Shop Pagespeed Optimierung

Best Practice: Weniger als 50

 

4. Volumen:

Das Volumen, das für das Laden und Anzeigen einer mobilen Page benötigt wird, gemessen in Bytes. Je niedriger das Volumen, desto besser.

Besonders relevant ist das in Deutschland, wo mobile Datentarife vergleichsweise sehr teuer sind und Nutzer*innen besonders gegen Ende des Monats ihr Volumen rationieren und es vermeiden, Seiten aufzurufen, für die sie viel Datenvolumen benötigen.

Shopify Shop Pagespeed Optimierung 

Best Practice: Weniger als 500 KB.

 

Tante-E Lösungen

Durch die intensive Arbeit und die zahlreichen Projekte mit unseren Kunden wissen wir genau, wie wichtig Page Speed für den Erfolg einer Website ist. Wir möchten Dir nun Schritt für Schritt erklären, was Du tun musst, um den Page Speed zu optimieren und auf diese Weise die Performance Deines Onlineshops verbesserst, damit die Besucher*innen Deines Onlineshops nicht ungeduldig werden und aus Frust fluchtartig die Seite verlassen.

1. Komprimierung und Reduzierung von Bildern in Größe und Anzahl

Bilder machen zwischen 50 und 75 % des Gesamtvolumens Deiner Website aus. Je höher die Qualität der Bilder, desto größer ist das Volumen. Allerdings sind qualitativ hochwertige Bilder auch von großer Bedeutung für Deinen Onlineshop. Denn gerade im E-Commerce wird oft anhand der Bilder gekauft. Ein Dilemma, für das es aber eine Lösung gibt: Die Bildgröße kannst Du durch verlustfreie Komprimierung minimieren, ohne Abstriche bei der Qualität zu machen.

 a) Speichern von Bildern für das Web
 Uns ist aufgefallen, dass einige Shops zu große Bilder hochladen, die eigentlich gar nicht für das Web gedacht sind. Wenn Du also Bilder aus der Grafik-Software speicherst, stelle sicher, dass sie für das Web gespeichert, aber nicht hochgeladen werden. Oder falls Du ein*e Grafiker*in hast, kannst Du sie/ihn darum bitten, dies zu tun. 

Shopify Shop Pagespeed Optimierung

b.) Komprimierung von Bildern

Es gibt praktische Tools, mit deren Hilfe Du Deine Bilder ganz einfach komprimieren kannst, wie z.B. TinyJPG. Anders, als es der Name vermuten lassen würde, kannst Du damit auch Bilder im PNG-Format komprimieren. Die Qualität Deiner Bilder wird nahezu gar nicht beeinträchtigt, aber dafür wird die Größe enorm reduziert.

image resizer

c.) Reduzierung der Anzahl an insgesamt verwendeten Bildern
Verwende Bilder so viel wie nötig. Falls Du dann aber immer noch viele Bilder hast, kannst Du noch einen weiteren Schritt machen und die Image Placeholder (Platzhalterbilder) durch einheitliche Farbe ersetzen, um die Anzahl der Anfragen zu reduzieren. 

 

Wenn Dein Code diesbezüglich also so aussieht...

… sieht er danach so aus:

2. Lazy Load von Videos und iFrames

Lazy Load ist eine technische Methode, bei der die Bilder, Videos und Iframes erst dann dynamisch geladen werden, wenn Internetnutzer*innen beim Scrollen die Inhalte im Browserfenster sehen. Anders als beim Eager Load, dem Gegenstück, werden die Inhalte also nicht von vornherein komplett geladen.

Bereits ein Großteil der Themes im Shopify Themes Store verwenden diese Technik. Wir haben jedoch festgestellt, dass dennoch viele Shops kein Lazy Load von Videos oder Iframes (z.B. in Youtube eingebettete Video-Iframes) durchführen. Das könnte daran liegen, dass der entsprechende Abschnitt des Themes keinen Lazy Load unterstützt. Oder es handelt sich um einen benutzerdefinierten Abschnitt, der dem Theme hinzugefügt wurde.

<video class="lazyload" controls width="620"

    data-src="lazy.mp4" data-poster="lazy.jpg">

    <source type="video/mp4" data-src="lazy.mp4">

</video>

<iframe class="lazy" data-src="lazyFrame.html"></iframe>

Lazy geloadete Videos und eingebettete Video-Iframes verringern die Anzahl der Anfragen und MBs, die für das ursprünglich vollständige Laden Deines Onlineshops erforderlich wären. So ist sein Volumen geringer und kann schneller geladen werden. Das verbessert nicht nur das Ranking und den Traffic, sondern macht auch Deine Besucher*innen glücklich.

3. Optimierte Font-Dateien (Schriftarten-Dateien)

Falls Du benutzerdefinierte Fonts (Schriftarten) verwendest, die große Dateien laden, kannst Du dies eventuell mit diesem Guide optimieren.

a.) Konvertiere die Font-Datei in eine komprimierte und leichtere Erweiterung, die von modernen Browsern bereits gut unterstützt wird. Dafür kannst Du Font Squirrel oder Transfonter verwenden.
b.) Das Einfügen von Font-Dateien in eine CSS-Datei, z.B. "theme.scss.liquid"-Datei ohne "asset_url"-Filter, lässt den Browser die Font-Dateien zwischenspeichern. 

 

4. Minimieren und Kombinieren von CSS und JS-Dateien

Beim Minimieren werden unnötige oder redundante Daten entfernt, ohne die Art und Weise zu beeinflussen, wie die Ressource vom Browser verarbeitet wird; z.B. Code-Kommentare und -Formatierung, Entfernung von unbenutztem Code, Verwendung kürzerer Variablen und Funktionsnamen etc.

a.) CSS minimieren: Shopify tut dies automatisch
b.) JavaScript minimieren: Bei einigen Themes wird JS in mehreren Dateien gespeichert, so dass Du den gesamten Code verkleinern und in einer Datei kombinieren kannst. Diese Datei wiederum kannst Du einfach durch alle anderen Dateien ersetzen. Behalte jedoch die anderen Dateien für den Fall, dass Du sie später mal eventuell bearbeiten musst. Um JavaScript zu minimieren, kannst du den JavaScript Minifier verwenden. 

Hinweis: Falls Du eine js.liquid-Datei hast, kannst Du sie nicht direkt verkleinern. Du erhältst dann eine bearbeitete Version der Datei und kannst sie anschließend verkleinern und in Deine Datei einfügen.

 

 5. Apps-Datei optimieren

Die meisten Skript/CSS-Dateien für Apps, die mit dem Shopify Plus Admin heruntergeladen werden, werden in den <head> Deiner theme.liquid-Datei innerhalb von {{{ content_for_header }} integriert.

Damit eine App korrekt funktioniert, muss sie, bevor irgendein anderer Code geladen wird zunächst gerendert werden.

"Diese Spannungen zwischen schnellerem Laden und dem Erfahrungs- und Verkaufswert von Apps sind der Grund, warum wir der Script-Tag-API asynchron geladene Scripts hinzugefügt haben - damit das Laden der Seite nicht unterbrochen wird. Allerdings haben <scripts>, die direkt in den <head> eingefügt werden, oft eine unmittelbare Auswirkung auf die Leistung", sagt Jason Bowman, ein Leiter des Solutions Engineering Teams bei Shopify Plus.

Wann immer Du eine App installieren willst, solltest Du Dir folgende Frage stellen: "Wird der Mehrwert dieser App die mögliche Verlangsamung der Ladegeschwindigkeit überwiegen?”

Mit diesen Schritten kannst Du die Auswirkungen von Apps auf die Performance Deines Shops reduzieren:

a.) Entferne alle Apps, die Du nicht nutzt.
b.) Führe einen manuellen Test mit den Developer-Tools von Chrome aus. Klicke auf den Tab "Netzwerk" und lade die Seite neu. Prüfe, welche Dateien geladen werden und wie das Laden der einzelnen Apps optimiert werden kann, wo immer es auch nötig ist; je nachdem, wann und wie sie auf der Seite angefordert werden (wenn einige Anwendungen in {{{ content_for_header }} geladen werden)
c.) Optimierung der Bereitstellung von Apps-Skripten, um Platz für das Laden wichtiger Ressourcen zu schaffen, indem Apps-Skripte nach dem Laden des Fensters angehängt werden. 
window.addEventListener('load', function(){
appendAppScript(x,y); 
})
d.) Wenn die App erst beim Scrollen der Seite durch die/den Nutzer*in benötigt wird, kannst Du Folgendes tun:
window.addEventListener('load', function() {
  window.addEventListener('scroll', function(){
    appendAppScript(x,y);
 }, { once: true, })
}) 
e. Optimiere die Bereitstellung von CSS-Dateien von Apps: Einige Apps werden mit CSS-Dateien bereitgestellt. Du kannst das Laden und Rendern dieser Dateien optimieren, je nachdem, wie und wann die App geladen wird:
<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">

Mit diesem Trick lädt der Browser zwar immer noch das Stylesheet herunter, aber er wartet nicht darauf, dass der Content verfügbar ist, bevor er die Seite rendert.

Oder auch:

    <noscript id="deferred-styles">

      <link rel="stylesheet" type="text/css" href="app.css"/>

    </noscript>

    <script>

      var loadDeferredStyles = function() {

        var addStylesNode = document.getElementById("deferred-styles");

        var replacement = document.createElement("div");

        replacement.innerHTML = addStylesNode.textContent;

        document.body.appendChild(replacement)

        addStylesNode.parentElement.removeChild(addStylesNode);

      };

      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });

      else window.addEventListener('load', loadDeferredStyles);

    </script>

Mit diesem Trick wird die vollständige app.css nach dem anfänglichen Painting der Seite geladen. Seine Stile werden auf die Seite angewendet, sobald sie fertig geladen ist, ohne das anfängliche Rendern des kritischen Inhalts zu blockieren

Fazit:
Dies sind einige Schritte, die Du machen kannst, um die Ladezeiten Deines Shopify Shops zu optimieren. Je nach Theme und Shop gibt es noch weitere kleinere Stellschrauben, die aber fallabhängig zu betrachten sind. Wir hoffen, dass diese Auflistung Dir dabei hilft, Deine Ladezeiten weiter zu verbessern.

Sollte es dennoch Fragen geben oder du Dich nicht wohlfühlen solltest, dies selbst durchzuführen, lass es uns gerne wissen. Als Shopify Experten haben wir in den letzten Monaten intensiv geschaut, wie man das Bestmögliche aus Shopify herausholen kann und hieraus eine strukturierte Pagespeed Optimierung geformt, die wir unseren Kund*innen anbieten.

Wenn das interessant für Dich sein sollte, dass wir diese auch für Deinen Shop machen, dann schreib uns gerne! 

Wir arbeiten bereits mit vielen der führenden Shopify Shops zusammen, lass uns auch dich unterstützen