SEO & Pagespeed

Wir werden sehr häufig gefragt, ob ThemeWare® bezüglich SEO/Pagespeed etwas noch besser machen kann oder wie man seinen Shop mit dem Theme noch besser machen kann.

Das ist interessant, weil offensichtlich der Glaube herrscht, dass Themes nahezu alleine für SEO/Pagespeed verantwortlich sind, also dass wenn du das Theme optimierst bzw. wenn das Theme SEO/Pagespeed-optimiert ist, das Thema quasi komplett abgeschlossen ist.

Dies ist tatsächlich nicht so.

Es ist vielmehr komplett umgekehrt. Das Theme selber hat nur einen kleinen Anteil daran. Der Rest sind konzeptionelle und inhaltliche Dinge worauf das Theme fast keinen Einfluss hat.

In diesem Artikel findest du viele nützliche Tipps, welche dir bei der Optimierung deines Shops helfen werden.

ThemeWare®

Natürlich ist ein CMS-System wie Shopware und ein extrem konfigurierbares Theme immer etwas im "Nachteil" gegenüber einem von Grund auf auf das nötigste reduzierten hoch individuell programmierten und spezialisierten System. Dabei entfällt dann allerdings der Komfort der dir umgekehrt geboten wird. Und wahrscheinlich kannst du so einen Shop nicht mal eben selber aufsetzen.

Mit ThemeWare® profitierst du von über 7 Jahren Entwicklungszeit und Erfahrung bei der Programmierung von Shopware-Themes. Die Optimierung ist von Grund auf fester Bestandteil von ThemeWare® und ist ein ständiger Prozess der mit jeder Änderung, mit jedem Update berücksichtigt wird.

Sei dir in jedem Fall gewiss: ThemeWare® ist SEO-optimiert, ThemeWare® ist Pagespeed-optimiert.

Überzeuge dich selbst in unserem PageSpeed-Demoshop:

Die oben genannten Tipps haben wir (fast*) alle in unserem PageSpeed-Demoshop angewendet. Überzeuge dich selbst vom Ergebnis:

SEO und Pagespeed Online-Kurs

In unserem kostenfreien Online-Kurs "SEO und Pagespeed mit Shopware Themes" im Wert von 129,- € gehen wir auf das komplette Thema "SEO/Pagespeed" ein. Wir zeigen dir einmal das große Ganze und gehen dann in den Themen die mit dem Theme am verwandtesten sind ins Detail.

Hinweis: Der kostenfreie Online-Kurs zum Thema "SEO/Pagespeed" ist ein Bestandteil der ThemeWare® Utilities.

Pagespeed 🚀

Server-Performance

Ein wichtigster Faktor für den Pagespeed ist die Server-Performance selber. Wie schnell sind Dateizugriff, wie schnell werden Aufrufe verarbeitet, wie groß ist die Auslastung (z.B. Shared-hosting), ist die Server-Konfiguration optimal usw.

Im Bereich Server-Performance liegen viele Unterschiede aber auch sehr viele Möglichkeiten zur Optimierung.

Ein möglicher Messwert im Pagespeed-Test wäre hier der TTFB-Wert (Time to First Byte). Wenn der Messwert nach oben geht, ist in dieser Richtung vermutlich noch eine Optimierung möglich. Eine GZip-Komprimierung beispielsweise kann hier einen erheblichen Boost geben.

Auf diesen Bereich haben weder Shopware noch ThemeWare® einen Einfluss. Du kannst hier aber selber viel optimieren.

Tipp
Nutze das kostenlose Plugin "Tools" von Friends of Shopware, um die Performance des Servers und von Shopware zu prüfen. Wende die empfohlenen Optimierungen an, um die Serverreaktionszeiten zu verbessern. Dies ist ein kritischer Faktor, da die Serverantwortzeit direkt die Ladegeschwindigkeit beeinflusst.

HTML-Optimierung

Damit der Quellcode schnell geladen werden kann ist ein aufgeräumter Quellecode sinnvoll. Natürlich sind dir bei einem CMS-System in gewisser Weise die Hände gebunden, aber Shopware ist diesbezüglich bereits sehr gut optimiert.

Im Bereich Shopware-Themes ist ThemeWare® hier bereits seit einigen Jahren Vorreiter und liefert nur den Quellcode aus, der auch wirklich benötigt wird.

Tipp
Installiere und aktiviere das kostenlose "HTML Minify plugin" von Friends of Shopware. Dieses Plugin reduziert die Dateigröße deiner HTML-Dateien, indem es unnötige Leerzeichen und Kommentare entfernt, was die Ladezeit verkürzt.

Bild-Optimierung

Das wichtigste Thema neben der Server-Performance ist der Bereich "Bilder", zumindest ist es das am meisten unterschätzte Thema, was extrem viel Potenzial hat.

Das Thema "Bilder" ist ziemlich umfangreich aber gerade wenn viele große Bilder geladen werden müssen, beispielsweise im Produktlisting oder in Erlebniswelten ist hier viel Raum für Optimierungen.

Shopware generiert von allen Bildern die du hochlädst Thumbnails für verschiedene Viewports. Es ist daher kein großes Problem wenn du große Bilder hochlädst, weil Shopware automatisch kleiner Varianten erstellt.

Worauf du aber Einfluss nehmen kannst, ist die Komprimierung. Mit kostenfreien Tools wie TinyPNG kannst du die Dateigröße deiner Bilder oft deutlich reduzieren. Was der Ladezeit zu Gute kommt.

Hinweis: Die Bilder welche wir dir mit unserem Bild-Downloadpaket zur Verfügung stellen, sind bewusst nicht komprimiert, weil du diese ja weiterverarbeiten sollst.

Hierbei musst du nur den für dich perfekten Mittelweg zwischen einer guten Performance und einer guten Bildqualität finden.

Du siehst also, der Bereich "Bild-Optimierung" ist ein ganz wichtiger Aspekt in deinem Einflussbereich. Zum Thema "Bild-Optimierung" findest du daher in unserem Online-Kurs ein eigenes Video.

Die meisten Bilder im Shop sind benutzerdefinierte Inhalte. Es obliegt damit dir diese zu optimieren.

Hinweis: Die Grafiken von ThemeWare® die dauerhaft und unverändert verwendet werden sollen, wie beispielsweise die Zahlungs- und Versandlogs sind alle bereits perfekt optimiert!

Tipps
Setze das "LazySizes und LazyLoading für passende Bilder-Sizes" Plugin ein, ebenfalls von Friends of Shopware, um Bilder erst dann zu laden, wenn sie im Sichtfeld des Nutzers sind. Dies reduziert die initiale Ladezeit, da nicht alle Bilder sofort geladen werden müssen.
.webp Bilder: Das Format .webp bietet eine höhere Kompression bei gleichbleibender Qualität im Vergleich zu herkömmlichen Formaten wie .jpeg oder .png. Dadurch werden die Ladezeiten weiter verkürzt.
Füge allen Bildern über den Media-Manger Alt-Texte hinzu, um die Barrierefreiheit und SEO zu verbessern.

Meta-Daten

Ein weiterer wichtiger Aspekt deines Shops sind die Meta-Daten deiner Shopseiten. Ein präziser "Titel" und eine treffende "Beschreibung" sind nicht nur für SEO, sondern auch für die Nutzererfahrung wichtig.

Tipp
Achte darauf, dass alle Seiten einen präzisen Titel und eine Beschreibung haben, was nicht nur für SEO, sondern auch für die Nutzererfahrung wichtig ist.

Zugänglichkeit und SEO

Kontrastverhältnis

Achte bei deiner Farbkonfiguration auch auf ein ausreichendes Kontrastverhältnis für Text und Hintergrundfarben.

Explizite Breite und Höhe von Bildelementen

Ein wichtiger Aspekt ist auch die Angabe der Bildgröße (width/height) im Quellcode.

Wenn beispielsweise die Bildgröße im Quellcode nicht angegeben wird, hat der Browser keine Information wie viel Platz dieses wohl einnehmen soll. Er berechnet also keinen Platz für das Bild ein. Wenn das Bild dann geladen ist, wird das Bild in der entsprechenden Größe gerendert. Dadurch verschiebt sich unter Umständen der umliegende Content (Layout Shift), was nicht ideal ist für die SEO-Optimierung.

Leider lässt sich das Ganze gar nicht so einfach zu lösen wie es klingt. Die mit Abstand meisten Bilder in Shopware werden vom Shopbetreiber hinzufüget. Die tatsächliche Bildgröße ist in der Storefront daher gar nicht bekannt. Du kannst hier nur manuell per CSS optimieren:

Beispiel: .header-logo-main-link img { aspect-ratio: auto 220 / 40; }

Tipps
Ein ausreichendes Kontrastverhältnis ist wesentlich für die Zugänglichkeit deines Shops. Die Empfehlungen von PageSpeed Insights sind hierbei eine wertvolle Richtlinie. Das Tool von Deque University (https://dequeuniversity.com/rules/axe/4.8/color-contrast) kann dabei helfen, diese Aspekte genau zu prüfen und zu verbessern.
Das Definieren von width und height bei Bildern hilft Browsern beim Reservieren des notwendigen Platzes im Layout der Seite, bevor das Bild geladen ist. Dies verhindert Layoutverschiebungen (Layout Shift) und verbessert die Nutzererfahrung. Nutze CSS aspect-ratio für Bilder ohne festgelegte width und height.

Browser-Caching

Die Kontrolle über das Browser-Caching durch die .htaccess-Datei ist echt praktisch, um die Ladezeiten für Besucher, die öfter vorbeikommen, zu verkürzen. Wenn du bestimmte Dateitypen für das Caching festlegst, können Besucher die Inhalte schneller abrufen, weil sie diese aus ihrem lokalen Speicher laden, anstatt sie jedes Mal neu herunterladen zu müssen, wenn sie deinen Shop besuchen. Das bedeutet weniger Wartezeit und insgesamt ein angenehmeres Shopping-Erlebnis.

Tipp
Die Steuerung des Browser-Cachings über die .htaccess-Datei ist eine effektive Methode, um wiederkehrende Besucher schneller bedienen zu können. Durch das Definieren von Caching-Regeln für bestimmte Dateitypen kannst du sicherstellen, dass Nutzer Inhalte aus ihrem lokalen Speicher laden, anstatt sie bei jedem Besuch neu herunterzuladen.

Beispiel

htaccess

<IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpg|jpeg|webp|gif|png|pdf|mp3|mp4|webm|mov|svg)$">
        Header set Cache-Control "public, max-age=31536000, no-transform"
    </FilesMatch>
    <FilesMatch "\.(html|htm|xml|txt|xsl|css|js|woff2|ttf)$">
        Header set Cache-Control "public, max-age=7200, must-revalidate"
    </FilesMatch>
</IfModule> 

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 week"
    ExpiresByType image/jpeg "access 1 week"
    ExpiresByType image/webp "access 1 week"
    ExpiresByType image/gif "access 1 week"
    ExpiresByType image/png "access 1 week"
    ExpiresByType text/css "access 1 day"
    ExpiresByType text/html "access 1 day"
    ExpiresByType application/pdf "access 1 week"
    ExpiresByType text/x-javascript "access 1 day"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 week"
    ExpiresDefault "access 1 week"
</IfModule>

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE application/atom+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/webp
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/x-component
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/javascript
</IfModule>

Überzeuge dich selbst in unserem PageSpeed-Demoshop:

Die oben genannten Tipps haben wir (fast) alle* in unserem PageSpeed-Demoshop angewendet. Überzeuge dich selbst vom Ergebnis:

Unnötigen Quellcode reduzieren

Manchmal stellen uns Kunden die Frage, warum ThemeWare® mehr CSS-, mehr JS- oder mehr HTML-Code hat, als das Shopware Standard-Theme oder einem anderen Theme anderer Hersteller.

Nun, das liegt ganz einfach daran, dass du mit ThemeWare® das umfangreichste Theme im Shopware Store erhältst. Der Vergleich mit dem Shopware Standard-Theme hinkt daher etwas. Es ist wie Äpfel und Birnen zu vergleichen: ThemeWare® bietet dir über 400 Konfigurationsfelder, das Shopware Standard-Theme 30.

Selbstverständlich sind für die vielen verkaufsfördernden Konfiguration, Erweiterungen und Zusatzfunktionen mehr Code nötig. Das gilt so schlicht und einfach für alle Custom-Themes.

Wir sind uns dessen durchaus bewusst, daher geben wir uns daher sehr viel Mühe bei der Code-Optimierung und hinterfragen jede Code-Zeile mind. zweimal und knüpfen soviel Code wie möglich an Bedingungen. In diesem Punkt sind wir Vorreiter und haben in den letzten Jahren mit tausenden Kunden extrem viel Erfahrung gesammelt. Sicherlich gibt es Nachahmer, wie überall, aber wir haben ThemeWare® für Shopware 6 von Grund auf auf Kompatibilität (HC-Architecture®) und die Reduzierung von Code konzipiert und entwickelt. Mit ThemeWare® kannst du täglich davon profitieren.

JavaScript und CSS reduzieren

Shopware kompiliert den gesamten JS-Code sowie den gesamten CSS-Code aller Erweiterungen (Plugins, Apps und Themes) in jeweils eine JS-Datei und in eine CSS-Datei. Dies ist bezüglich Dateizugriff nicht verkehrt aber so gibt es keine Möglichkeit Code für nicht sichtbare Elemente ans Ende des HTML-Dokumentes zu verlagern.

Mit Shopware 6.6 hat Shopware hier vor allem im Bereich "JavaScript" erheblich nachgebessert und die Storefront damit deutlich beschleunigt.

Tipp
Nutze möglichst wenig individuellen JS- bzw. CSS-Code für individuelle Anpassungen.

Hinweis: Alles was ThemeWare® für die Darstellung der Storefront nicht benötigt, weil eine Funktion beispielsweise nicht genutzt wird, wird nicht in die Storefront kompiliert. Es gibt zudem diverse Konfigurationsfelder CSS-Code nicht benötigter Features manuell zu reduzieren.

Externe Daten reduzieren

ThemeWare® nutzt keine externen Skripte und lädt keine externen Dateien. Du kannst natürlich dennoch externe Skripte oder Dateien laden, mache dies aber mit bedacht.

In diesem Zuge möchten wir uns kurz dem Thema "Fonts" widmen: Mit ThemeWare® kannst du zwei Fonts in die Storefront einbinden die lokal auf deinem Server liegen. Du kannst natürlich auch noch zusätzliche "Fonts" laden, wir empfehlen aber bei zwei Fonts zu bleiben, damit nicht zu viel Font-Dateien geladen werden müssen.

Tipp:
Nutze möglichst wenig externe Skripte und Dateien (z.B. Google Fonts oder Font Awesome).

Fazit

Diese Optimierungen sollten eine merkliche Verbesserung des PageSpeeds für deine Shopware-Installation und ThemeWare®-Themes mit sich bringen. Beachte, dass regelmäßige Überprüfungen und Anpassungen notwendig sind, um die Performance kontinuierlich zu halten.

Tipp
Aktualisiere deinen Shopware-Shop regelmäßig auf die neuste Version (z.B. Shopware 6.6).
Aktualisiere dein ThemeWare®-Theme regelmäßig auf die neuste Version.

*) Sicherlich könnte unser Server bezüglich "Antwortzeit (Response time)" noch etwas schneller sein, aber für einen reinen Demoshop ist das dann doch etwas übertrieben.

PreviousLexikon NextPageSpeed Insights

Last updated 2 days ago