Shopware Performance Optimierung Google Page Speed

Dies ist der erste Teil der Serie zum Google Page Speed und wie sich dieser für Shopware Shops optimieren lässt. In den nachfolgenden Blogbeiträgen zeigen wir auf welche Faktoren, den Google Page Speed beeinflussen und welche Tipps und Tricks es gibt, um diesen zu optimieren.

Was ist der Google Page Speed?

Der Google Page Speed ist ein von Google zur Verfügung gestelltes Tool, um die Performance einer Website zu definieren und zu ranken.

Google hat sechs Kriterien festgelegt, die mit einem unterschiedlichen prozentualen Anteil den Page-Speed einer Seite definieren:

• First Contentful Paint 10%
• Speed Index 10%
• Largest Contentful Paint 25%
• Time to Interactive 10%
• Total Blocking Time 30%
• Cumulative Layout Shift 15%

Stand: 06.2021

TTI & TBT

TTI (Time To Interactive) ist die Zeit, die vergeht, bis der Nutzer mit der Website interagieren kann und eine Reaktion auf seine Aktion erfolgt. Die TBT (Total Blocking Time) ist die Zeit, die zwischen dem Laden des FCP und dem TTI vergeht, in welcher Blockierungen stattgefunden haben und setzt sich zusammen aus allen Tasks, die länger als 50ms benötigen. Diese Indikatoren sind ausschlaggebend für einen guten Google Page Speed Score und somit auch für die User Experience.

FCP & LCP

Das FCP (First Contentful Paint) beschreibt die Zeit, die vergeht, bis das erste Element auf der 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. Das 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 das LCP der Banner zu Beginn Shop Seite.

SI & CLS

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. 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.

Das optimale Ziel sollte es seine alle Metriken in den grünen Bereich zu bekommen. Der grüne Bereich beginnt ab 90% des Metric Scores und der gelbe Bereich ab 50% des Metric Scores.

Stand: 06.2021

Wo liegt mein Problem und wie kann ich dies lösen?

Der Google Page Speed bietet nicht nur die Möglichkeit, einen Score zu definieren, um die Verbesserungen und Veränderungen für den Shopbetreiber sichtbar zu machen, sondern auch eine Übersicht mit den Punkten, welche das konkrete Problem darstellen und wie diese optimiert werden können.

Wenn für eine Metrik nur ein bestimmtes Element verantwortlich ist (LCP), dann wird dieses dargestellt und es kann direkt geschaut werden, ob dieses Element das LCP sein sollte. Sollte dies nicht der Fall sein, dann kann direkt geschaut werden, warum dieses Element das LCP darstellt und wie ein anderes Element als LCP definiert werden sollte.

Zusätzlich wird zum Beispiel auch aufgeschlüsselt, welche Bildelemente keine vorgeschriebene Größe habe oder welcher Fremdanbietercode durch Long Tasks zur Blockierung des Haupt-Threads führt.

Diese Information kann somit direkt genutzt werden, um den Shopware Shop zu optimieren und es muss nicht erst noch die Ursache herausgefunden werden, warum der Google Page Speed Score nur im orangen Bereich ist.

Bis zum nächsten Mal:

Das war es auch schon! Im nächsten Beitrag schauen wir uns die Time To Interactive und die Total Blocking Time an. Dabei geht es darum, wie der Hauptthread durch Long Tasks blockiert wird und wie man diese Long Tasks im Shopware Kontext minimieren kann.