Shopware Performance Optimierung Content Displayed

Daniel Wolf 07. September 2021 0

Dies ist der dritte Teil unserer Blogbeiträge zu Google Page Speed und dessen Optimierung. Der nachfolgende Beitrag befasst sich mit der Darstellung und Optimierung des ersten angezeigten Inhaltselements und des größten Inhaltselements.

Was ist First Contentful Paint?

FCP (First Contentful Paint) beschreibt die Zeit, die vergeht bis das erste Element auf einer Shopseite geladen ist. Hierbei muss es sich nicht zwangsläufig um ein Bild handeln, sondern in den meisten Fällen sind es Überschriften oder kleinere Icons. Es fallen jedoch nur nachfolgende Elemente in die Bewertung des FCP:

- Text

- IMG (auch Hintergrundbilder)

- SVG Elemente

- nicht weiße canvas Elemente

Der Google Page Speed ranked den FCP Wert nach folgenden Zeiten ein: >1,8s grün; >3,0s orange.

Was ist der Largest Contentful Paint?

LCP (Largest Contentful Paint) ist die Zeit die vergeht bis das größte Element auf der Website geladen ist. In den meisten Fällen ist LCP der Banner zu Beginn einer Shopseite. Es können deutlich mehr Elemente als LCP klassifiziert werden als FCP.

- IMG Elemente

- IMG Elemente innerhalb von SVG Elementen

- Video Elemente (Vorschaubild)

- Element mit Hintergrundbild geladen durch die url () Funktion

- Block-level Elemente die Texte oder child inline-level Textelemente

Der Google Page Speed ranked die LCP Metrik nach folgenden Zeiten ein: >2,5s grün; >4,0s orange.

Auswirkungen auf den Google Page Speed:

Diese beiden Metriken befinden sich auf Platz zwei der Metriken mit der größten Auswirkung auf den Google Page Speed. Kumuliert bilden FCP und LCP 35% des Google Page Speed ab. Aufgrund der Tatsache, dass FCP und LCP sehr stark voneinander abhängen und die Optimierung einer der Metriken auch die Verbesserung der anderen Metrik bedingt, ist die Optimierung sehr effizient und es kann ein schnelles und positives Ergebnis erzielt werden.

Wie finde ich heraus welches Element den Largest Contentful Paint beeinflusst?

Das entsprechende LCP Element kann mithilfe des Google Page Speed analysiert und ausfindig gemacht werden.

Nachdem die Analyse der Seite abgeschlossen ist, erscheinen unterhalb des Google Page Speeds weitere DropDown Menüs. Hier sollte im letzten Drittel der Punkt “Largest Contentful Paint-Element” auftauchen. Dieser Menüpunkt muss aufgeklappt werden und es erscheint eine Abbildung wie nachfolgend - hier lässt sich nun eindeutig erkennen, was das LCP ist.

Wie kann die Largest Contentful Paint Metrik optimiert werden?

Hardware Ressourcen effizienter einsetzen:

Oft beruht ein großer LCP (Largest Contentful Paint) Wert auf langsamen Server Antwortzeiten. Diese sollten im Optimalfall sowohl auf der Startseite als auch der Detailseite unter 200ms liegen.

Serverseitig lassen sich oft Anpassungen vornehmen, die dazu führen, dass diese optimal für den Shopware Shop zugeschnitten sind und optimal performen. Es sollten die passenden Pakete mit den optimalen Ressourcen ausgewählt und die optimalen Server Einstellungen vorgenommen werden. Bedeutet: die verwendete Software immer auf den aktuellsten Stand zu bringen und wenn notwendig den Anbieter wechseln, wenn die ausgewählte Software nicht mehr zu dem gewünschten Anwendungsfall passt. Außerdem sollte der Anbieter der Serverinfrastruktur durch Shopware zertifiziert sein.

Weitere zusätzliche Optimierungen um die Hardware optimal auszulasten sind wie folgt:

- Texte komprimieren

- PHP 7 installieren

- Bytecode-Cache

- Http2

- open_basedir sollte deaktiviert sein

- wenn möglich Redis einsetzen

- Allgemein Servereinstellungen nach Auffälligkeiten überprüfen

Optimierung der dargestellten Elemente:

Der wohl wichtigste Punkt ist es, die dargestellten Bilder in ihrer Größe und den Abmaßen zu optimieren. Dies kann sehr einfach mit Squoosh realisiert werden. Außerdem sollte darauf geachtet werden, dass das richtige Dateiformat gewählt wird. Im Optimalfall sollten webP Bilder genutzt werden, da diese trotz einer Einsparung von bis zu 35% keine Darstellungsverluste mit sich bringen. Ansonsten sollte JPEG genutzt werden und wenn es nicht anders umsetzbar ist PNG - dies jedoch nur im Notfall, da PNG nicht förderlich für eine gute Performance eines Shopware Onlineshops sind.

Zusätzlich sollte darauf geachtet werden, dass sinnvolle Thumbnail-Größen gewählt werden. Für die mobile Darstellung können kleinere Bilder genutzt werden, um die mobile Performance zu optimieren.

Außerdem sollte ein CDN (Content Delivery Network) genutzt werden, welches für den zukünftigen Kunden am nächstgelegenen ist. Wird der Onlineshop hauptsächlich von, zum Beispiel, deutschen Kunden genutzt, dann ist ein deutsches CDN vollkommen ausreichend. Ist der Onlineshop jedoch auf internationale Kunden ausgelegt, bietet es sich an auf den jeweiligen Kontinenten oder einzelnen Ländern CDNs zu nutzen, um so die Ladezeiten erheblich zu reduzieren.

Um sich die ganze Komprimierung und den “Ärger” zu sparen gibt es auch automatisierte Lösungen, die immer das perfekte Dateiformat und die korrekte Größe bereitstellen. Eine solche Lösung kann jedoch nur umgesetzt werden, wenn der Browser dies zulässt. Beispiele für derartige Anwendungen sind Cloudflare und imigx.

Eine weitere sehr effektive Methode um die Ladezeiten deutlich zu verkürzen ist es die wichtigen Ressourcen mithilfe eines preload link tag vorzuladen sowie dem sinnvollen downloaden und bereitstellen von JavaScript.

Durch eben diese Selektion von JavaScript kann die Blockierzeit im Haupt Thread deutlich verkürzt werden. Dies sollte bereits durch die Optimierung der TTI und TBT aus dem zweiten Blogbeitrag erfolgen.

Diese Optimierung wurde von uns bereits bei Kunden angewandt und es konnten merkliche Vorteile erzielt werden.

Wie kann das First Contentful Paint optimiert werden?

First Contentful Paint (FCP) lässt sich zusätzlich durch die Optimierung des TTFB (Time To First Byte) optimieren. Diese Metrik sollte sich ebenfalls unter 200s befinden.

Das verwendete Logo im Onlineshop sollte als SVG Datei vorliegen, da diese eine sehr große Kompatibilität und gleichzeitig eine geringe Datengröße aufweisen.

Eine weitere Optimierungsmöglichkeit findet sich in den Schriftarten. Hier kann entweder auf das, im FCP Beitrag beschriebene, PreLoaden zurückgegriffen werden (um zunächst eine Standardschrift einzusetzen und diese später durch die CI-Schriftart zu ersetzen), oder auf das Nutzen von display swap: @font-face font-display: swap.

Die Optimierungen bezüglich der Servereinstellungen und Bildoptimierung gelten auch für das First Contentful Paint

Optimierungsansatz:

Ein möglicher, von uns erarbeiteter, Lösungsansatz besteht daraus, die Bilddateien außerhalb und unabhängig der Einkaufswelten zu laden. Die Einkaufswelten sorgen dafür, dass die LCP und FCP Metrik in ihrer Performance deutlich eingeschränkt ist.

Wie sieht ein Shopware Shop mit diesen Optimierungen aus?

Die Optimierung der Bilder haben wir in unserem Beispielshop vorgenommen. Alleine durch das Anpassen der Bilder konnten wir eine Verbesserung von 15 Punkten erzielen. Die Bilder haben sich in der dargestellten Qualität etwas reduziert. Dies ist jedoch für das menschliche Auge nicht erkennbar und auch gerade auf mobilen Endgeräten sorgt diese Optimierung für keinerlei optische Einschränkungen.

In diesem konkreten Fall haben wir 5 Bilder optimiert. Diese hatten eine Größe von jeweils 1MB und wurde auf eine deutlich kleinere Größe von 100KB reduziert. Es ist deutlich zu erkennen, wie große Bilder weitere Metriken wie TBT negativ beeinflussen.

Bis zum nächsten Mal:

Im nächsten Beitrag schauen wir uns die Metrik Cumulative Layout Shift und den Speed Index an. Wie verändert sich das Layout auf der Seite, wenn neue Elemente später hinzukommen und was ist der Speed-Index eigentlich genau? Das beantworten wir im nächsten Blogbeitrag.