Letzte Änderung: 23. September 2021

Wie lange eine Seite läd, kann kritisch für Deine Besucher*innen sein. Braucht Deine Startseite z. B. viel zu lange, um für die Besucher*in dargestellt zu sein, so wird diese*r nicht lange bleiben. Welche Messdaten, Test-, und Optimierungsmöglichkeiten es gibt, findest Du zum Nachlesen hier in diesem Beitrag.

Kernwerte der Page Speed

Im Bild zu sehen sind verschiedene erste Eckdaten nach der Analyse einer Webseite. Zu sehen sind Kennwerte wie First Contentful Paint, der Speed Index, Largest Contentful Paint, Time to Interactive usw. Diese Kennwerte beschreiben nicht nur, wie schnell eine Seite und deren Inhalte läd, sondern auch wie lange die Besucher*in warten muss, bis Bilder geladen sind und bis mit der Seite interagiert werden kann. Zwei wichtige Kennwerte haben wir für Sie zusammengefasst: First Contentful Paint (FCP) und Largest Contentful Paint (LCP).

First Contentful Paint

„Der erste Plott“ beschreibt den Zeitpunkt, an dem das erste optische Element der Webseite für die Besucher*in sichtbar ist. Dies bezieht sich auf Text, Bilder, wie Hintergrundbilder, svg-Elemente und nicht-weiße canvas-Elemente. Eine niedrige FCP-Zeit ist ein guter Indikator für die generelle Page Speed. Google beschreibt eine FCP-Ladezeit von 1,8 Sekunden und weniger als gut.

Largest Contentful Paint

Largest Contentful Paint (LCP) hingegen beschreibt nach wieviel Zeit der Hauptteil einer Webseite geladen ist und für die Besucher*in als ‘benutzbar’ empfunden wird. Das bedeutet, dass die LCP-Ladezeit den Zeitraum misst, von Lade Anfang bis zu dem Zeitpunkt wenn das größte sichtbare Bild oder der größte sichtbare Textblock geladen ist. Ein guter Messwert wären hier etwa 2,5 Sekunden oder weniger. In den LCP-Zeitraum einbezogen werden img-, image-, video-, Block-level-Elemente und Hintergrundbilder, die mit der url-Funktion geladen werden.

Testmöglichkeiten

Lighthouse von Google Chrome

Zum Testen von Webseiten Performanzen und Benutzerfreundlichkeit gibt es verschiedene Möglichkeiten. So bietet Google zum Beispiel in den Entwicklertools das Tool Lighthouse (Google Chrome Browser) an. Des Weiteren kann lighthouse als Erweiterung im Browser verwendet oder von einem Node Modul gestartet werden. Lighthouse bietet auch die Möglichkeit Testbedingungen anzupassen und zu filtern, um so möglichst realitätsnahe Parameter zu erhalten.

Lighthouse in Chrome Developer Tools

webpagetest.org

Eine andere Möglichkeit bietet webpagetest.org: webpagetest.org ist ein online Tool, dass die Webseiten Performanz misst und analysiert. Ursprünglich wurde es für AOL für die ausschließlich eigene Nutzung entwickelt. 2008 wurde die Plattform open source mit einer BSD Lizenz. Die Software ist in steter Weiterentwicklung auf GitHub und wird zum Download zur Verfügung gestellt. webpagetest.org bietet die Möglichkeit Skripte im Detail auszuführen und entsprechend zu analysieren und bietet so einen umfassenden und detailreichen Eindruck der jeweiligen Webseite.

webpagetest.org nach Testdurchführung
webpagetest.org in der Wasserfallansicht nach Testdurchführung

Optimierungsoptionen

Nun wissen wir, was Pagespeed eigentlicht ist und wie diese gemessen und analysiert werden kann. Welche Möglichkeiten und Stellschrauben Du für Deine Webseite selbst in der Hand hast, stellen wir im folgenden vor.

Lazy Loading

Lazy Loading, übersetzt ‘faules Laden’, sorgt dafür, dass Kontent erst dann geladen wird, wenn er auch sichtbar ist.
Konkret werden so z. B. Teile bildlasitger Webseiten eben erst dann vollständig geladen, wenn diese durch Scrollen oder Größenänderungen des Browserfensters im Viewport der Benutzer*in auftaucht. Shopware 5 selbst hat Lazy Loading zwar nicht als Standard etabliert, doch verschiedene effektive Plugins schaffen hier Abhilfe. Eines derer, welches uns am meisten überzeugt hat, möchten wir hier vorstellen.

Performance Lazy Loading nicht aktiv
offscreen images bei Lazy Loading nicht aktiv
Performance LazyLoading aktiv

Plugin: Lazy-load offscreen images

Mit Hilfe des Plugins Lazy-load offscreen images von Maxi Arnicke werden Bilder erst geladen, sobald diese auch benötigt werden. Diese werden nämlich erst dann geladen, wenn Besucher*innen in die Nähe scrollen. Bilder, die Besucher*innen also vielleicht nie zu sehen bekommen, werden so auch erst einmal nicht mit geladen. Dadurch werden Ladegeschwindigkeit der Webseite und auch das Ranking verbessert.

Ein großer Vorteil dieses Plugins ist, dass die Bilder der Einkaufswelten auf der Startseite nachgeladen werden, was viele andere Plugins so nicht handhaben. 

Dabei ist darauf zu achten, dass Bilder die über Templates integriert wurden, z.B. Logos im Footer, noch händisch angepasst werden müssen, indem eine zusätzliche CSS-Klasse eingefügt wird und das src-Attribut durch data-src ersetzt wird:

<img src=“{link file=’frontend/_public/src/img/visa.png‘}“  alt=“Visa Logo“ />
<img  class=“maxia-lazy-image“ data-src=“{link file=’frontend/_public/src/img/visa.png‘}“ alt=“Visa Logo“ />

Bildformate und Komprimierung: WebP

Die Wahl des richtigen Bildformats kann sehr entscheidend sein. Ganz allgemein kann gesagt werden, dass für Fotos .jpg und für Grafiken .png (.png + .jpg = Rastergrafiken) oder .svg (= Vektorgrafik) verwendet werden sollten. 

Ziel sollte es sein, die Dateigröße insgesamt so gering wie möglich zu halten. Dabei können zum Beispiel Programme wie Gimp oder Photoshop vorab bereits helfen. Wichtig ist, den Mittelweg zwischen Kompression und Qualität zu finden. 

Heutzutage gibt es allerdings auch Bildformate, die .jpg als Bildformat ablösen können. Das von Google entwickelte Format nennt sich WebP und ist kompatibel mit allen modernen Browsern. Die älteren Formate können weiterhin genutzt werden, wenn  zum Beispiel ein Großteil der Besucher*innen noch mit älteren Browsern oder Browserversionen zu Besuch ist. WebP ist 26% kleiner als .png und zwischen 25% und 35% kleiner als .jpg, obwohl es schärfer dargestellt wird und hat damit auf Grafik- und oder Bild Intensiven Seiten einen nennenswerten Einfluss auf die Ladegeschwindigkeit.

WebP kann automatisch vom Hoster erstellt werden, denn moderne Browser erkennen das Dateiformat automatisch. Unter Umständen können auch externe Anbieter, wie imagekit.io notwendig sein. Diese externen Provider, ‚CDN‘ – Content Delivery Network, komprimieren und lagern Bilder gegen eine monatliche Gebühr. Da dies gegebenenfalls zu Ladezeitverzögerungen der eigenen Seite führen kann, sollte die Anfrage über den eigenen Hoster sichergestellt werden. 

 

Schriften und Skripte

Egal ob Share Buttons oder Bezahl Buttons – externe Skripte und Schriften können zu ganz unterschiedlichen Zwecken auf deiner Webseite eingebunden sein. Fakt ist, dass man sich dadurch abhängig macht von der Verfügbarkeit dieser Skripte von einer anderen Quelle. Ist zum Beispiel der Server, von dem dieses Skript abgerufen wird, sehr langsam oder überlastet, so bremst dies auch die Ladezeit der eigenen Webseite aus.

Schriftarten vorladen oder vermeiden

In manchen Fällen ist der Unterschied externer und interner Schriften so gering, dass sich die erhöhte Ladezeit nicht rentiert. Die beliebte Bibliothek von font-awesome kann so in vielen Fällen einfach durch die Shopware Standard Schriftbibliothek ersetzt werden. Beispiel: Instagram Icon

...

.icon–instagram2:before {
       content: „\e902“;
}

.icon--instagram2 {
font-family: 'shopware' !important;
}

Sollten doch zusätzliche Schriftarten eingebunden werden, kann durch die CSS Eigenschaft font-display: swap die erste Ausgabe in einer Standard-Schriftart erzwungen werden – solange die eigentliche Schrift geladen wird. Weiße Flecken ohne Text werden somit vermieden.

 

Skripte asynchron laden

Sollten Skripte nicht wirklich benötigt werden, so sollte man diese schlichtweg nicht einbinden. Bezahl Buttons, wie z. B. Paypal, müssen nicht direkt auf der Startseite auftauchen, wodurch man ebenso die Ladezeiten für Erstbesucher*innen beschleunigen kann. Des Weiteren kann ein Verringern von Whitespaces (Leerzeilen, Zeilenumbrüche) das Laden eben so verschnellern. Bei Shopware werden Skripte schon von Hause aus gebündelt und minifiziert. Wer noch mehr Bytes sparen möchte, kann im Backend die HTML Komprimierung aktivieren.

Backend Optimierung

In erster Linie sollten externe Skripte so gut es geht vermieden werden. Hinterlege diese am besten auf Deinem Webserver.  Das asynchrone Laden kann durch das Attribut async umgesetzt werden.

Oder man nutzt die Shopware eigene Möglichkeit, JavaScript asynchron zu laden. Dies kann in der Shopware Dokumentation nachgelesen werden.

document.asyncReady(function() { 
// do your magic here
});

Plugin: Shopware Performance Analysis

Die Erweiterung vom Hersteller „Die Shopwehr“ analysiert die Shopware- & Serverkonfiguration, um auf dieser Grundlage Empfehlungen und Informationen für die Optimierung der Shop-Performance bereitzustellen. Das Plugin ist kostenfrei im Shopware Store verfügbar.

Pluginansicht mit Auflistung der Cronjobs

Cronjobs

Cronjobs sind Befehle, die auf eine Benachrichtigung hin ausgeführt werden (command run on notice). Das Cron-System läuft dabei im Hintergrund eines Betriebssystems. Zu festgelegten Zeiten können dann automatisierte Aufgaben (Jobs) ausgeführt werden. ‘CronJob’ setzt sich also aus ‘Cron-System’ und der festgelegten Aufgabe, also dem Job, zusammen.

Jede dieser Aufgaben wird als Cronjob bezeichnet und besteht aus drei Komponenten: Dem Skript, welches ausgeführt werden soll, dem Befehl, welcher das Skript regelmäßig ausführt und der entsprechenden Aktion zur Ausführung des Skripts. Cronjobs werden z. B. für den Newsletter-Versand, Statistikerhebungen und Datenbereinigungen verwendet. Verwendbar sind diese Cronjobs für alle Betriebssysteme, die über ein ‘Cron-System’ verfügen.

Gewünschte Routineaufgaben können vollständig eigenständig ablaufen. Doch es ist auch Vorsicht geboten: Die vielfältigen Einsatzbereiche von Cronjobs können zwar Arbeit abnehmen, benötigen allerdings große Mengen von Ressourcen. Es ist also wichtig zu überlegen, welche Cronjobs wirklich wichtig und nützlich sind, und auch wann diese ausgeführt werden sollen. Am besten arbeiten diese zum Beispiel in der Nacht, da dort in der Regel am wenigsten Traffic auf einer Webseite herrscht. Entsprechende PHP-Skripte sorgen dafür, dass Cronjobs nur dann ihre Aufgaben erledigen, wenn andere Abläufe dadurch nicht gestört werden.
Übrigens: Bei Shopware gibt es einen ‚Haupt‘-Cronjob, der alle anderen anstößt, da Shopware selbst noch nicht für die Cron-Funktion eingerichtet ist. Dies sind die Beispiele aus dem obigen Bild:

SEO-Index refresh strategy: leert den SEO Cache
Search-Index refresh strategy: leert den Suche-Cache
Similar articles refresh strategy: berechnet ‘Diese Artikel könnten Ihnen gefallen’ neu
Topseller refresh strategy: die Topseller werden neu berechnet

Weiteres zu Cronjobs in Shopware5 kann in der Shopware5 Dokumentation nachgelesen werden.

Inhalte gezielt ausliefern

Weiter Möglichkeiten, um die Webseiten Performanz zu verbessern, stellen Customer Streams dar. Die Startseite für Erstbesucher*innen kann gekürzt angezeigt werden. Für wiederkehrende Besucher*innen kann dann eine erweiterte bzw. die komplette Startseite angezeigt werden. Erreichbar ist dies z. B. via user-streams (oder auch customer-streams). Bei diesen erstellt man verschiedene Kanäle, so zum Beispiel für Erstbesucher*innen, Shop-Kund*innen, Geschäftskund*innen o. ä. und teilt diesen konkrete Kriterien zu, wann welche Inhalte für wen ausgeliefert werden.

Bei weiteren Fragen zu Webseiten Optimierungen können Sie uns gerne kontaktieren!