Shopware PageSpeed optimieren – Part 2

Bilder Optimierung

👉Hochladen der Bilder in bestimmten Format

 

Bestenfalls immer in JPEG, zusätzlich die Bilder im WebP Format je nach Browser ausspielen. Bei Timmehosting ist das mit dem “Page Speed” Modul schon getan.

Bilder sind einer der größten Hebel bei der Page Speed Optimierung mit Shopware. Bilder per se haben eine höhere Datenmenge als bswp. eine .css Datei.

Daher solltet Ihr nur Bilder hochladen die auch tatsächlich relevant für den Besucher sind. Bspw. 2 Mal das gleiche Artikelbild mit anderem Hintergrund könnte man weglassen. Beachtet auch dass Ihr die Originalbilder bereits verlustfrei komprimiert hochladet.

👉Für Shopware Bilder komprimieren

 

Hierfür könnt Ihr online Tools verwenden oder Ihr rendert es bereits richtig aus Photoshop heraus. Alternativ gibt es auch Tools wie RIOT(Windows), wo Ihr Bilder im Bulk-Verfahren verlustfrei komprimieren könnt.

Für Mac gibt es ImageOptim oder XnConvert.

Wir haben hier ein Beispielbild, was im Originalen ein PNG ist und eine größe von 4,2MB hat, Auflösung 1356 × 1595px. Nach Komprimierung in ein JPEG hat es nur noch 255KB.

Direkter Vergleich:

Original Datei

Komprimierte Datei

PNG 4,2MB

JPEG 255KB

Warum solltet Ihr das Bild für Shopware vorher schon komprimieren? Hier mal die Daten wenn Ihr das Bild als 4,2MB große Datei hochladet.

Wie Ihr seht komprimiert Shopware standardmäßig das Bild, jedoch kommen wir hier nur auf 446KB und dadurch auf eine Ladezeit von knapp 6,4 Sekunden(Fast 3G).

Durch unsere Komprimierung erreichen wir hier 255KB und eine Ladezeit von 1,56s. Das ist eine Reduzierung um 75%.

Das Komprimierte Bild haben wir in eine frische Testinstallation bei einem Artikel eingefügt und die Standardmäßigen Thumbnails für den Artikel generiert. Wir konzentrieren uns mal auf das Thumbnail der größe 600×600 da dies auch als erstes Artikelbild hergenommen wird.

👉Thumbnail Qualität, was ist die optimale Einstellung

Hier gibt es kein richtig oder falsch. Standardmäßig ist 90 bei den Artikel Thumbnails und 60 bei Retina eingestellt. Wir haben festgestellt dass man auch bei einer Einstellung von 80, 50 ganz gut fährt.

Wir haben hierfür einen kleinen Test gemacht so das Ihr euch selber ein Bild machen könnt, welche Einstellung für euch die Beste ist. Am besten fokussiert Ihr euren Blick auf die Grashalme oder Kanten, dann merkt man den unterschied am deutlichsten.

Qualität 90 – 73KB

Ladezeit: 1.56 s

Qualität 80 – 51KB

Ladezeit: 1.32 s

Qualität 70 – 41KB

Ladezeit: 1.17 s

Qualität 60 -34KB

Ladezeit: 1.08 s

Qualität 40 – 26KB

Ladezeit: 966 ms

Qualität 10 – 10KB

Ladezeit: 750 ms

👉Lazy Loading für Bilder aktivieren

Dies bedarf etwas Coding Skills. Prinzipiell müsst Ihr die univeil.js erstmal herunterladen und in eurem Template _public>src>js verzeichnis abspeichern. Dies natürlich auch über eine funktion.js aufrufen lassen und bitte auch in der Theme.php mit anweisen.

Dann nur noch im Template an der richtigen Stelle die Bilder lazy loaden lassen. In unserem Beispiel /themes/Frontend/HundebrilleEU/frontend/detail/image.tpl

{extends file="parent:frontend/detail/image.tpl"}
{block name='frontend_detail_images_picture_element'}
{if $Controller == 'detail'}
{assign var="awords1" value=","|explode:$image.thumbnails[1].sourceSet}
{assign var="retina1" value=" "|explode:$awords1[1]}
<img data-src="{$awords1[0]}" data-src-retina="{$retina1[1]}" src="/media/image/e7/66/bd/loadindicator.gif" alt="{$alt}" itemprop="image" />
{else}{$smarty.block.parent}{/if}
{/block}

YouTube Videos optimieren

Ähnlich wie es sich um die Bilder verhält möchten wir natürlich auch YouTube Videos per LazyLoad nachladen. Da der Kunde viele Videos auf der Artikeldetailseite in mehreren Tabs untergebracht hat, möchten wir hier die Ladezeiten verkürzen.

Die Problematik ist das bei der Einbindung von YouTube Videos pro Video Einbindung die Javascript Dateien auch pro Einbindung geladen werden. Das geht ordentlich auf die Ladezeiten.

Hier der Code lzyYtb.js

function lzyYtb() {
 var youtube = document.querySelectorAll( ".youtube" );

 for (var i = 0; i < youtube.length; i++) {

var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";

 var image = new Image();

 image.src = source;

 image.addEventListener( "load", function() {

 youtube[ i ].appendChild( image );

 }( i ) );

 youtube[i].addEventListener( "click", function() {

 var iframe = document.createElement( "iframe" );

 iframe.setAttribute( "frameborder", "0" );

 iframe.setAttribute( "allowfullscreen", "" );

 iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

 this.innerHTML = "";

 this.appendChild( iframe );

 } );

 };

}

An der Stelle wo das YouTube Video eingebunden werden soll müsst Ihr dann nur noch diesen HTML Code im HTML Editor einfügen. Anstelle der “videoid” tragt Ihr dann die ID des jeweiligen YouTube Videos ein welches Ihr zeigen möchtet:

<div class="wrapper">

  <div class="youtube" data-embed="videoid">

      <div class="play-button">.</div>

  </div>

</div>

 

Wichtig ist hierbei das der Punkt “.” im play-button div enthalten ist, da sonst Shopware das div nicht ausspielt.

Wir haben im Kundenfall das YouTube Thumbnail was automatisch aus dem Video von YouTube geladen wird durch ein eigenes ersetzt. Hierfür haben wir die “var source” auf ein fixes Bild gesetzt.

Hoster/Server Einstellungen

Abhängig von deinem Hoster hast du unterschiedliche Möglichkeiten mehr Geschwindigkeit herauszuholen. Für dieses Beispiel nehmen wir unseren Partner Timmehosting(nginx).

Aber Aufgepasst: Nginx unterstützt keine .htaccess-Dateien. Das Problem wäre nämlich, daß nginx bei jedem Seitenaufruf in allen Verzeichnissen, die im Pfad zur aufgerufenen Datei liegen, jeweils nach einer .htaccess-Datei schauen und sie dann auswerten müsste, was den Webserver langsamer machen und auch mehr Festplattenlast erzeugen würde.

👉HTTP2 beim Hoster aktivieren

Bei Timmehosting ist http/2 bereits Standardmäßig aktiviert, somit besteht hier kein Anpassungsbedarf. Bei anderen Hostern kann es sein das man evtl. vom aktuellen Webpaket wechseln muss. Hier solltet Ihr auf der Website von eurem Hoster recherchieren oder diesen direkt anrufen und fragen.

👉PHP7.x nutzen

Anpassung der PHP Version von 7.0.x auf 7.2.x brachte einen Boost von 46 Gesamt Scoring auf 52.

PHP 7.0.x:

PHP 7.2.x:

Wenn Ihr einen 500er Fehler bekommt, kann das daran liegen…https://forum.shopware.com/discussion/55879/php-umstieg-7-0-auf-7-2

Oder in Kürze: Alle Plugins Checken welche als “Quelloffen” gekennzeichnet sind. Alle Plugins löschen die nicht Quelloffen sind. Lizenz Manager deaktivieren, deinstallieren und löschen.

👉Cache warmer per Cronjob starten👉Htaccess Einstellungen

Bei Timmehosting auch unter Cronjobs einzustellen. Diesmal geben wir keine URL an sondern einen CLI Befehl:

[web_root] && php bin/console sw:theme:cache:generate

👉Htaccess Einstellungen

Die .htaccess Datei findest du in deinem Shopware Hauptverzeichnis auf deinem Server. Die aktuellste .htaccess kannst du bei GitHub ansehen. Shopware gzip aktivieren In Zeile 63 findest du den Eintrag:
# Enable gzip compression

AddOutputFilterByType DEFLATE text/html text/xml text/plain text/css text/javascript application/javascript application/json application/font-woff application/font-woff2 image/svg+xml
Hier erkennst du das Shopware bereits daran gedacht hat dies Standardmäßig einzustellen. Sofern dein Server mod_deflate unterstützt, ist die gzip-Komprimierung von Haus aus aktiviert. Bei Timmehosting(nginx) ist dies auch Standardmäßig aktiviert. Solltest du diesen Eintrag nicht bei dir vorfinden so empfehle ich erstmal zu Prüfen ob dein Server das mod_deflate Modul installiert hat, falls ja kannst du den .htaccess Eintrag übernehmen.

👉Google Page Speed aktivieren:

Serverseitig gibt es ein Page Speed Modul von Google welches viele Optimierungen automatisch durchführt. Ebenso die Bildoptimierung im WebP Format wie unter Punkt Bilder Optimierung beschrieben. Bei Timmehosting ist dieses Modul Serverseitig bereits installiert. Man braucht das Modul nur zu aktivieren.

Plugin Optimierung

Bei eigens geschriebenen Plugins achtet man nicht direkt auf eine Optimierung des geschriebenen Codes. Es mag zwar kleinlich klingen doch jeder gesparte KB zählt, besonders wenn man eine große Seite am laufen hat. Grundsätzlich sollte man mit Plugins aufpassen das es nicht zu viele werden. Jedes Plugin kann zusätzlich Javascript-Dateien laden oder auf andere Webseiten verweisen was die Ladenzeiten wieder erhöhen. Wichtig hierbei ist das Ihr den HTML Code minified bereitstellt, ebenso die Javascript- und CSS Dateien.

CDN nutzen

Ein Content-Delivery-Network ist eine gute Möglichkeit nicht nur die Ladezeiten zu verbessern. DDos Attacken können damit gut abgefangen werden. Auch hilft ein CDN eine gute Erreichbarkeit bei Lastspitzen sicherzustellen, sowie international schnelle Ladezeiten zu ermöglichen.

Sonstiges

PayPal Plugin

Das Javascript von Paypal braucht besonders auf dem mobilen Netz sehr lange bis es geladen ist. Daher stellt sich hier die frage an welchen Stellen man den PayPal-Button (Checkout über Paypal) integrieren möchte. Die effizienteste Lösung ist natürlich erst im Checkout. Auf Artikeldetailseite und OffCanvas-Menü sorgt es für längere Ladezeiten.

YouTube Iframes

Die Einbindung von YouTube Videos per Iframe sollte möglichst gering gehalten werden. Zudem sollte man ebenfalls ein Lazy-Load für YouTube Videos mit implementieren. So wird das Video von YouTube erst angefordert/geladen wenn der User auf das Video klickt.

CSS Source Map deaktivieren

Etwas kontrovers (da das Source Mapping nur in den DevTools geladen werden, also nicht für den User sichtbar) jedoch kann es ein wenig compiler Ressourcen sparen.

Debug Plug-In deaktivieren
Das Debug Plugin von Shopware sollte im Produktivmodus nicht mehr installiert sein da es den Shop verlangsamen kann.

Nach allen Einstellungen und Optimierungen lassen wir einen letzten Audit durchführen und ziehen den Vergelich.

Recap – Was hat es gebracht?

Vor der Optimierung:

Nach der Optimierung(Audit #4):

In Gegenüberstellung:

 

Vorher

Nachher

%-Änderung

Gesamtscoring

29

61

+110%

First Contentfull Paint

3.4s

2.0s

-41%

Speed Index

7.3s

4.0s

-45%

Time to Interactive

22.0s

9.1s

-58%

First Meaningful Paint

3.4s

2.0s

-41%

First CPU Idle

9.5s

9.1s

-4%

Estimated Input Latency

450ms

300ms

-33%

Die Ausgangshypothese war “…verbessern wir die Ladezeiten im mobilen Bereich, so verbessert sich die mobile Konversionsrate”.

Die ersten Ergebnisse lassen darauf schließen das sich die Konversionsrate um +14% verbessert hat.

Wir müssen hier jedoch beachten dass die Datenbasis aktuell noch gering ist und es noch nicht absehbar, in wie fern die Hypothese validiert werden kann. Es steht jedoch fest, je schneller die Website, desto geringer die Hürde einer Konversion.

Die logische Schlussfolgerung ist somit, dass es unabdingbar ist, in Shopware Bilder zu optimieren um euer Shopware schneller machen zu können.

Wieso erreiche ich nicht über 90 Scoringpunkte?

Funktion geht vor Geschwindigkeit – Leider ist es nicht möglich alle Optimierungen so durchzuführen so das der Scoring-Wert auf über 90 Punkte kommt. Eine frisch installierter Shopware Shop kommt auf ca. 77 Scoringpunkten. Der größte Hebel sind hier die Bilddaten. Je mehr Bilder Ihr bspw. am Artikel verwendet, desto höher sind die Ladezeiten. Theoretisch ist es möglich diese Werte zu erreichen, jedoch ist es wichtiger das die tatsächlichen Ladezeiten gering sind und nicht das Gesamtscoring vom Audit.

Vielen Dank!

Vielen Dank für deine Aufmerksamkeit!

Dominik Klosa
Dominik Klosa
Mit über 9 Jahren Online Marketing Erfahrung gehört Dominik Klosa zu den top Leuten in seinem Feld. Durch Gastvorträge an der FHWS, wo er auch seinen Abschluss in Wirtschaftsinformatik/E-Commerce, gibt er gerne sein Wissen und Erfahrungsschatz zurück. Als Gründer und Geschäftsführer sorgt er dafür, dass der Laden rund läuft und seine Leute immer schön happy sind.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

🍪

Wir nutzen Cookies. Wir gehen von deinem Einverständnis aus, wenn du diese Seite weiterhin nutzt. Unter Datenschutz kannst du diese deaktivieren.