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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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 eine der führenden Shopify-Experten-Agenturen in Deutschland mit Standorten in Berlin und Köln 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!
