Shopware Shop Performance Optimierung - Layout Shifts

Dies ist der vierte Teil der Serie zum Google Page Speed und wie sich dieser für Shopware Shops optimieren lässt. Nachfolgend befassen wir uns mit Cumulative Layout Shifts, wie sich diese verhindern lassen und dem Speed Index.

Was sind Cumulative Layout Shifts?

CLS (Cumulative Layout Shift) beschreibt die Länge des größten verketteten Umbruchs im Layout, der während des Shopaufbaus stattfindet. Ein verketteter Layout-Shift muss innerhalb von fünf Sekunden stattfinden und zwischen den einzelnen Umbrüchen darf maximal eine Sekunde vergehen. Ein Layout Shift findet immer dann statt, wenn ein Element die Position außerhalb des eigenen Render Frames tauscht.

Beispielsweise, wenn ein Banner oberhalb aller anderen Content Elemente nachträglich eingefügt wird und dadurch die Elemente nach unter verschiebt. Häufig dadurch erkennbar, dass der Nutzer auf einen Button klicken möchte, dieser sich jedoch nachträglich noch verschiebt und der Benutzer ungewollt etwas anderes anklickt.

Der Google Page Speed ranked das CLS nach folgenden Zeiten ein: >0,1 grün; >0,25 orange.

Was ist der Speed Index?

SI (Speed Index) ist eine Kombination aus dem Page-Speed und den Speed Indizes anderer Websites und beschreibt, wie schnell Inhalte während des Seitenaufbaus dargestellt werden.

Um so mehr Ressourcen dem Onlineshop am Anfang zur Verfügung stehen, um so besser ist der Speed Index. Um so stärker die anderen Metriken optimiert werden, um so besser wird auch der Speed Index, da alle zuvor genannten Metriken dazu beitragen die generelle Seitenladegeschwindigkeit zu optimieren.

Der Google Page Speed ranked den SI nach folgenden Zeiten ein: >3,39s grün; >5,78s orange.

Auswirkungen auf den Google Page Speed:

Diese beiden Metriken befinden sich auf dem letzten Platz der Metriken mit der größten Auswirkung auf den Google Page Speed. Kumuliert bilden CLS und Speed Index 25% des Google Page Speed ab.

Wie können Cumulative Layout Shifts optimiert werden?

Es dürfen keine nachträglichen Verschiebungen im Layout stattfinden.

Wenn ein Element erst zu einem späteren Zeitpunkt eingepflegt und für den User nicht sichtbar sein soll, muss dieser Platz vorher mit einem vordefinierten Platzhalter freigehalten werden. Das Element selbst sowie dessen Platzhalter müssen in Höhe und Breite eindeutig definiert werden. Außerdem sollte für eben diese Elemente ein Größenbereich festgelegt werden, aus denen sich der Browser die passenden Elemente in der passenden Größe auswählen kann.

Sollte dynamischer Content eingefügt werden müssen, muss auch der hier genutzte Platz vorher von Platzhalter freigehalten werden.

Außerdem sollte darauf geachtet werden, dass keine Web-Fonts eingesetzt werden, die FOIT oder FOUT erzeugen. FOIT (Flash of invisible text) entsteht dann, wenn der Text angezeigt werden soll, der Font aber nicht gerendert ist und FOUT (Flash of unstyled text) wird durch den Austausch von Fonts bedingt, da nicht direkt die korrekte Schrift geladen werden konnte.

Zusätzlich sollte darauf geachtet werden, dass auf eine Rückmeldung seitens des Onlineshops gewartet wird, bevor ein DOM-Update (Document Object Model) durchgeführt wird.

Wie kann der Speed Index optimiert werden?

Der Speed Index kann optimiert werden, indem die anderen Metriken aus unseren vorherigen Blogbeiträgen optimiert werden. Hauptsächlich wird der Speed Index jedoch durch lange Hauptthreadaufgaben, lange und komplexe JavaScripts sowie nicht dargestellter WebFonts beeinflusst.

Das war’s auch schon:

Kommen wir nun zum Ende dieser kurzen Blog-Reihe zum Thema Google Page Speed. Ich hoffe, wir konnten einen kurzen und guten Überblick zum Thema Google Page Speed im Shopware-Kontext liefern. Wenn weitere Fragen auftauchen oder ihr Hilfe bei eurem Shopware Shop braucht, kommt gerne auf uns zu - wir freuen uns auf eure Anfragen!