Konkrete Maßnahmen um Deinen Shop zu beschleunigen

Reading Time: 3 minutes

Eigentlich ist es ja ganz einfach: Je kleiner die Webseite ist, desto schneller kann sie aufgerufen werden. Doch moderne Seiten werden im Durchschnitt immer größer. Das liegt bei Onlineshops zumeist an Produktbildern.

Problem: Zu große Produktbilder

  • Produktbilder liegen meist in hohen Auflösungen vor, damit sie ansprechend wirken und den Blick aufs Detail ermöglichen.
  • Sie sind oftmals über 1 MB groß. Kommen die Dateien unbearbeitet aus der Digitalkamera können es sogar 4 MB und mehr sein.
  • Auf Vergleichsseiten und Produktübersichten werden mehrere Bilder nebeneinander in Listen angezeigt.
  • Dadurch ergeben sich lange Ladezeiten, insbesondere auf mobilen Endgeräten.

Lösung: Bilder komprimieren

  • Produktbilder sind meist Fotos und sollten daher im JPEG-Format vorliegen. Die Größe einer JPEG-Datei ergibt sich u.a. aus ihrer Qualitätsstufe.
  • Die Qualitätsstufe wird zwischen 0 und 100 angegeben und lässt sich über Grafikprogramme wie Photoshop und Gimp einstellen.
  • Auf Webseiten wie Optimizilla lassen sich mehrere Bilder in Stapelverarbeitung komprimieren.
  • Vorsicht! Es gibt keine pauschale Qualitätsstufe, auf die alle JPEG-Bilder komprimiert werden können, da jedes Bild verschiedene Inhalte hat.
  • Für das menschliche Auge müssen die Bilder weiter hochwertig erscheinen. Bei zu niedrig gewählter Qualitätsstufe können sich Schlieren und Artefakte bilden.
  • Daher immer vergleichen und Bilder individuell optimieren.
  • Eine ausführliche Anleitung und die verschiedenen Wege, um Bilder zu komprimieren, haben wir im Ryte Magazine veröffentlicht.

Doch nicht nur Bilder sorgen dafür, dass die Größe der Webseite zunimmt. An zweiter Stelle folgen meist JavaScript- und CSS-Bibliotheken.

Problem: Zu viele Skripte und Code

  • Jedes Shopsystem verfügt über eigene Bibliotheken, die für die Ausgabe der Webseiten und ihre Funktionalität verantwortlich sind.
  • Durch Plugins und andere Änderungen am Code kann es passieren, dass weitere Bibliotheken hinzukommen.
  • Oftmals werden die gesamten Dateien geladen, auch wenn nur wenige Funktionen wirklich benötigt werden.
  • Das verlangsamt das Laden der Seite und den Aufbau der Seite im Browser

Lösung: Code komprimieren

  • Jeder hat schon einmal mit ZIP-Dateien gearbeitet. Das Prinzip lässt sich auch auf die Übertragung des Codes anwenden.
  • Dabei wird der Code vom Webserver komprimiert an den Browser verschickt und dort entpackt.
  • Da in JavaScript- und CSS-Dateien viele wiederkehrende Zeichen und Wörter vorkommen, lassen sie sich besonders gut komprimieren.
  • Der Standard bei der Komprimierung war lange Zeit “GZIP”. Das von Google entwickelte “brotli” ist noch effektiver.
  • Um die Komprimierung für Code im Webserver zu aktivieren, muss dessen Konfiguration bearbeitet werden.
  • Hier ist eine Anleitung in englischer Sprache, um “brotli” für die meistgenutzte Webserver-Software “Apache” zu aktivieren.

Nicht nur die Größe der Webseite ist für den Page Speed entscheidend, auch die Geschwindigkeit, mit der die Dateien übertragen werden können, spielt dabei eine wichtige Rolle. Die meisten Webseiten nutzen heute immer noch den alten Standard HTTP/1.1.

Problem: Veraltete Datenübertragung mit HTTP/1.1

  • Als das Protokoll HTTP/1.1 konzipiert wurde, ging man davon aus, dass nur wenige Dateien beim Aufruf einer Webseite übertragen werden würden.
  • Daher setzte man auf eine Einzelübertragung von Dateien. So wird für jeden Download einer Datei immer eine neue Verbindung zum Webserver aufgebaut.
  • Moderne Webseiten verfügen aber über viele angehängte Dateien, wie Bilder und Funktionsbibliotheken.
  • Das bremst die Datenübertragung aus und sorgt für längere Ladezeiten.

Lösung: Umstellung auf HTTP/2

  • Der neue Standard HTTP/2 behebt dieses Problem, indem alle Dateien über eine einzige Verbindung geladen werden.
  • Dazu ist ein SSL-Zertifikat notwendig. Du verwendest noch keins? Kostenlose SSL-Zertifikate werden von https://letsencrypt.org/ ausgestellt.
  • Um die Datenübertragung auf HTTP/2 umzustellen, ist wiederum ein Eingriff in die Konfiguration des Webservers vonnöten.
  • Für die Webserver-Software “Apache” gibt es hier eine deutsche Anleitung.

Die drei wichtigsten Page-Speed-Stellschrauben:

  1. Bilder komprimieren: Hochaufgelöste Produktbilder sorgen für lange Ladezeiten. Durch Komprimierung können sie in ihrer Dateigröße erheblich verkleinert werden.
  2. Code komprimieren: Jedes Shopsystem und Plugins benötigen JavaScript- und CSS-Bibliotheken. Diese können durch “brotli” komprimiert werden.
  3. HTTP/2 aktivieren: Die Einzelübertragung von Dateien mit HTTP/1.1 ist nicht effizient. Durch den Umstieg auf HTTP/2 lädt die Webseite viel schneller.

Natürlich gibt es aber noch viele weitere Möglichkeiten, den Page Speed zu verbessern. In einem umfangreichen Artikel im Ryte Magazine fassen wir das bis hierhin gelernte zusammen und geben weitere Tipps, um Deinen Shop zu beschleunigen.