This page is also available in English. Change to English page

Shopware 6: PageSpeed-Optimierung für „mobile only“

Shopware 6: PageSpeed-Optimierung für „mobile only“

To the English article

2021 ist das Jahr der großen Umstellung bei Google – „mobile-first“ wird durch „mobile-only“ abgelöst. Schon seit 2016 bereitet die Suchmaschine Webseitenbetreiber auf die mobile Indexierung vor und bereits im Juli 2019 wurde die Mobile-first-Indexierung eingeführt. Konkret heißt das: Der Crawler wird für Desktop abgestellt und die Nutzerfreundlichkeit („User Experience“, kurz: UX) von Webseiten Teil des Ranking-Systems. Ebenso wird die User Experience durch die Core Web Vitals messbar gemacht. Was bedeutet das jetzt für die SEO und welche Maßnahmen zur PageSpeed-Optimierung bietet Shopware 6? Das und vieles mehr kannst Du in diesem Blogbeitrag nachlesen. Er wurde von Martin Ritter, Geschäftsführer unseres Solution Partners WEBneo, geschrieben.

Was passierte bei „mobile-first“ und was erwartet Dich bei „mobile-only“?

Google zieht schon seit einigen Jahren immer mehr mobile Faktoren ins Ranking mit ein. Kein Wunder, denn die Zugriffszahlen auf Webshops von mobilen Endgeräten sind in den letzten Jahren deutlich gestiegen. Durchschnittlich stammen mit 56,2 % mehr als die Hälfte des Traffics zu Onlinehändlern von Smartphones, während die Desktop-Zugriffe auf ca. 34,5 % gesunken sind. Viele Webseitenbetreibende haben schon reagiert und präsentieren ihre Webseiten im responsiven Design auf mobilen Endgeräten. Von technischer Seite her bedeutet die mobile Indexierung, dass Google die Webseite mit einem mobilen Browser und einer simulierten Bildschirmgröße von 412 x 732 besucht. Daraufhin berechnet es deren initiale Länge und das Layout. Indexiert wird alles, was mit dem ersten Seitenaufruf übertragen wird. Da die mobile Darstellung inhaltlich zum Teil von der Version auf dem Desktop abweicht, besucht Google für einen Vergleich auch hin und wieder die Webseite mit einem Desktop-Browser.

Mit der Einführung von „mobile-only“ allerdings und dem damit verbundenen Google Page Experience Update, wird nur noch die mobile Ansicht als Grundlage für die Suchergebnisse bei Google verwendet. Werden also bestimmte Inhalte wie Videos oder Bilder aus Performance-Gründen auf dem mobilen Endgerät nicht mehr geladen, indexiert Google diese auch nicht mehr. Ebenso findet Google Inhalte wie Texte nicht mehr, die erst durch eine Nutzerinteraktion mit JavaScript nachgeladen werden. Hier heißt es ganz klar: In Zukunft sollten sich die Webseiteninhalte von Desktop und mobilem Endgerät nicht mehr allzu sehr unterscheiden. Das gilt auch für nicht-sichtbare Elemente, wie URLs, Title Tags und Meta Descriptions, Hreflang- und Canonical-Tags, strukturierte Daten usw. Zudem wird die User Experience zum Rankingfaktor. Diese steht ebenfalls seit einigen Jahren im Vordergrund, wobei Google nicht nur die relevantesten Ergebnisse ausspielt, sondern die auch eine zuverlässige Nutzerfreundlichkeit aufweisen. Was steht dabei im Zentrum? PageSpeed!

Grundlagen-First: Darauf solltest Du bei der PageSpeed-Optimierung achten

Bevor das Google Update erschien, wurde in mobilen Endgeräten darauf verzichtet, genau den gleichen Umfang an Inhalten wie auf der Desktop-Variante anzuzeigen. Das lag zum einen an der erforderlichen Nutzerfreundlichkeit, zum anderen an den Ladezeiten (= PageSpeed) im mobilen Netz. Aufgrund des „mobile-only“ Updates sind nun alle Websitebetreibende dazu angehalten, ihre Inhalte vollumfänglich auf mobilen Endgeräten abzubilden, andernfalls drohen Rankingverluste. Dementsprechend ist es notwendig, eine PageSpeed-Optimierung durchzuführen, da diese ein wichtiger Einflussfaktor bei der User Experience ist. Einige Handlungsfelder zur PageSpeed-Verbesserung sind bereits bekannt:

  • HTML, JavaScript und CSS reduzieren
  • Größe der Ressourcen durch Komprimierung mit gzip oder deflate reduzieren
  • Reduzierung der Antwortzeit des Servers
  • Browser Caching nutzen
  • Beseitigung der Render blocking JavaScript- und CSS-Ressourcen above the fold
  • Auf Weiterleitungen verzichten

Nun kommen aber drei neue Signale für das Ranking hinzu, welche unter dem Begriff „Core Web Vitals“ zusammengefasst werden. Google löst mit diesen die allgemeine Ladegeschwindigkeit einer Seite als Rankingfaktor ab und ersetzt sie durch die drei Usability Kennzahlen LCP, FID und CLS, welche mit einem Ampelsystem dargestellt werden. Was diese genau bedeuten und wie diese bei Shopware 6 optimiert werden können, erfährst Du im nächsten Schritt.

Die Core Web Vitals: LCP, FID und CLS

LCP (Largest Contentful Paint)

Dieses Core Web Vital misst die Ladezeit Deiner Website – vom Aufrufen der Seite durch den Nutzer bis zum kompletten Rendern des größten sichtbaren Inhaltselements im Darstellungsbereich. Je nachdem, wie lange es dauert, bis der Hauptcontent Deiner Seite erscheint, bewertet sie Google. Folgende Metriken hat die Suchmaschine zur Bewertung angegeben:

  • Gut: weniger als 2,5 Sekunden
  • Verbesserungswürdig: bis zu 4 Sekunden
  • Schlecht: mehr als 4 Sekunden

FID (First Input Delay)

Das zweite Core Web Vital misst, wie schnell der Nutzer mit Deiner Website interagieren kann, nachdem die Seite geladen wurde, um beispielsweise auf einen weiteren Link oder ein Bild zu klicken. Je nachdem, wie viel Zeit zwischen der Interaktion und dem Zeitpunkt liegt, an dem der Browser auf diese reagiert, erfolgt eine Bewertung. Auch hier veröffentlichte Google entsprechende Metriken:

  • Gut: weniger als 0,1 Sekunden
  • Verbesserungswürdig: bis zu 0,3 Sekunden
  • Schlecht: mehr als 0,3 Sekunden

CLS (Cumulative Layout Shift)

Das dritte Core Web Vital soll die visuelle Stabilität der Webseite sicherstellen. Es misst, wie stark sich das Layout der Seite während des Ladevorgangs verschiebt. Verschiebungen treten auf, wenn Websitebetreibende bei komplexen Webseiten Teile des Contents asynchron laden, also im Hintergrund. Dadurch wollen sie die Ladezeiten geringer halten. Sind die Ladezeiten aber nicht aufeinander abgestimmt, kommt es zu den Verschiebungen und Nutzer können die springenden Inhalte nicht lesen. Die von Google veröffentlichte Metrik basiert darauf, wie oft ein schon sichtbares Element nachträglich verschoben wird. Die Bewertungen können zwischen 0 und 1 liegen, wobei 0 für keine und 1 für stärkste Verschiebungen stehen.

  • Gut: weniger als 0,1
  • Verbesserungswürdig: bis zu 0,25
  • Schlecht: mehr als 0,25

Wie erhältst Du die entsprechenden Zahlen?

Core Web Vitals können mit folgenden Tools gemessen werden:

Dir stehen einige Tools zur Verfügung, mit welchen die Web Vitals gemessen werden können. Die drei wichtigsten bilden dabei Google PageSpeed Insights, Lighthouse und Webpagetest.org.

Google PageSpeed Insights

Google selbst erlaubt es, über das hauseigene Tool PageSpeed Insights zu prüfen, ob die wichtigsten Performance-Schrauben bereits genutzt wurden. Ebenso bietet es nützliche Tipps zur Verbesserung der Webseite.

Lighthouse

Lighthouse bildet ein weiteres nützliches Tool von Google, das in der Chrome Entwicklerkonsole bereitsteht. Es ist ein quelloffenes und automatisiertes Werkzeug zur Verbesserung der Webseitenqualität. Es kann sowohl alle Webseiten testen als auch nicht-öffentliche oder lokale Entwicklungsumgebungen.

Webpagetest.org

Webpagetest.org stammt nicht von Google, ist aber eines der umfangreichsten kostenlosen Tools zur Messung der Ladezeiten. Es liefert in großem Umfang komplexe Daten und neben den Optimierungspotenzialen auch die Auswirkungen der entsprechenden Maßnahmen auf Ihre Webseiten-Ladezeit.

Das bietet Dir Shopware 6 im Bereich Performance

Shopware bietet eine solide Basis für ein performantes System. Es ist nicht nur für kleine und kleinste Händler, sondern auch für Enterprise-Kunden ausgelegt.

Eine der auffälligsten Veränderungen im Vergleich zu Shopware 5 ist der Wechsel zu Symfony. Symfony ist wahrscheinlich eines der beliebtesten und performantesten PHP-Frameworks. Durch die weite Verbreitung von Symfony bleibt es stetig am Zahn der Zeit und wird immer weiterentwickelt. Ebenso bietet der Umstieg auf Symfony durch dessen Beliebtheit bei Entwicklern einen Motivationsgrund für Eigenentwicklungen, wodurch auch die enge Zusammenarbeit mit der Community gefördert wird. So können in Shopware 6 unter anderem der OPCache sowie APCu Polyfill Components verwendet werden.

Im Bereich Frontend entfernt sich Shopware 6 vom langjährigen Wegbegleiter Smarty hin zu einer der beliebtesten und performantesten Template Engines Twig. Twig ist ein Projekt der Symfony Schöpfer und komplettiert daher mit dessen logischer und nahtlosen Einbindung Shopware 6. Es kompiliert die Templates zu einfachen, optimierten PHP-Codes herunter, wobei der Overhead im Vergleich zu regulärem PHP-Code auf ein Minimum reduziert wurde.

Die durch den CSS-Präprozessor SASS erzeugten und mit dem beliebten Frontend-CSS-Framework Bootstrap 4 erweiterten SCSS Dateien fasst Shopware 6 automatisch zu einer „all.css“-Datei zusammen. Zeilenumbrüche, Kommentare etc. werden dabei entfernt, wodurch das komplette Styling auf eine Zeile reduziert wird. Dadurch wird die Dateigröße deutlich verringert und die Performance gesteigert.

Zum Schluss wollen wir noch kurz etwas ansprechen, das den Einsatz der vorher genannten, modernen Technologien überhaupt erst ermöglicht. Dank der „state of the art“-Technologie des Webpack module bundlers wird nicht nur das verwendete JavaScript konvertiert und kompiliert, sondern dieser übernimmt auch die Minifizierung und Komprimierung von JavaScript und CSS. Darüber hinaus ist es mit Webpack möglich, dem Client nur den Code zu liefern, welchen er zur Darstellung der aktuellen Seite auch benötigt. Im Umkehrschluss beeinflusst das die Performance enorm positiv. So muss der Browser nur noch mit dem Code arbeiten, den er auch wirklich benötigt.

Fazit zur PageSpeed-Optimierung mit Shopware 6

Shopware 6 bietet mit seinen modernen Technologien und Ansätzen eine sehr performante und zukunftssichere Basis für die Zukunft. Mit Shopware 6 bist Du bestens aufgestellt, um die Ansprüche an Web Vitals und User Experience zu erfüllen.

Jedoch muss gesagt sein, dass jeder seines eigen Glückes Schmied ist. Wird eine gute Basis mit Halbwissen bezüglich der Anforderungen an Web Vitals, mobiles Design, optimierte Bilder, Zusatzfunktionen und Third Party Software befüllt, gibt auch eine sehr gute Basis früher oder später nach. Deshalb solltest Du auch schon bei der Konzeptionierung Deines Onlineshops den Punkt der Performance im Hinterkopf behalten. Jede neue Funktionalität und jedes neue Bild werden die Performance des Systems in irgendeiner Art und Weise beeinflussen.

Mehr zum Thema SEO für Shopware kannst Du auch auf dem Webneo Blog nachlesen.

Newsletter

Nichts mehr verpassen. Wir halten Dich per E-Mail auf dem Laufenden.