SEO & Pagespeed
Note: This article is work in progress.
Das Thema "SEO/Pagespeed" und alles was da dran hängt ist wirklich umfangreich und komplex. Deswegen erhältst du mit ThemeWare® unseren kostenfreien Online-Kurs "SEO und Pagespeed mit Shopware Themes" im Wert von 129,- € dazu.
In diesem Artikel möchten wir dir ein paar Basics erklären und Möglichkeiten zur Verbesserung aufzeigen.
Hinweis: Den kostenfreien Online-Kurs zum Thema SEO/Pagespeed ist ein Bestandteil der ThemeWare® Utilities.
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.
Sei dir in jedem Fall gewiss: ThemeWare® ist SEO-optimiert, ThemeWare® ist Pagespeed-optimiert.
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.
In unserem kostenfreien Kurs gehen wir auf den kompletten Prozess der Suchmaschinen-Optimierung ein. Wir zeigen dir einmal das große Ganze und gehen dann in den Themen die mit dem Theme am verwandtesten sind ins Detail.
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 hat ThemeWare® keinen Einfluss, du kannst hier aber selber viel optimieren.
Damit der Quellcode schnell geladen werden kann ist ein aufgeräumter Quellecode sinnvoll. Shopware ist diesbezüglich bereits sehr gut optimiert.
Im Bereich Themes ist ThemeWare® hier bereits seit einigen Jahren Vorreiter im Shopware Universum und liefert nur den Quellcode aus, der auch wirklich benötigt wird.
Das wichtigste Thema neben der Server-Performance ist der Bereich "Bilder" – zumindest ist es das am meisten unterschätzte Thema was extrem viel Potential 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.
Hierbei musst du nur den für dich perfekten Mittelweg zwischen einer guten Performance und einer guten Bildqualität finden.
Hinweis: Die Bilder welche wir dir mit unserem Bild-Downloadpaket zur Verfügung stellen, sind bewusst nicht komprimiert, weil du diese ja weiterverarbeiten sollst.
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 Grafiken von ThemeWare® die dauerhaft und unverändert verwendet werden sollen, wie beispielsweise die Zahlungs- und Versandlogs sind alle bereits perfekt optimiert!
Ein wichtiger Aspekt ist auch die Angabe der Bildgröße (
height, weight) 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, 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 Benutzer hinzufüget. Die tatsächliche Bildgröße ist in der Storefront daher gar nicht bekannt. Eine perfekten Workaround für diese "Problem" gibt es daher derzeit leider nicht.
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. Dies ist so aber derzeit technisch nicht vorgesehen.
Aus diesem Grund achten wir in ThemeWare® besonders darauf, unnötigen Code zu vermeiden. Es wird stets nur der Code verwendet der tatsächlich benötigt wird.
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.
Hinweis: Für Funktionen die nicht über die Theme-Konfiguration "deaktiviert" werden können (z.B. für CMS), gibt es im Tab "Weiteres" => "Erweiterte Einstellungen" Konfigurationsfelder um CSS-Code manuell zu reduzieren. 🚀
Tipp: Nutze möglich wenig individuellen JS- bzw. CSS-Code für individuelle Anpassungen.
ThemeWare® nutzt keine externen Skripte. Die einzige Option ist die Einbindung von Google Fonts. Dies kannst du vermeiden indem du Google Fonts lokal einbindest.
Tipp: Nutze möglichst wenig externe Skripte wie Google Fonts oder Font Awesome.
Manchmal stellen uns Kunden dennoch die Frage, warum ThemeWare® mehr CSS-, mehr JS- oder mehr HTML-Code hat, als das Shopware Standard-Theme oder einem anderen Theme anderer Hersteller und dadurch im Pagespeed in manchen Tests etwas schlechter bewertet wird.
Nun, das liegt ganz einfach daran, dass du mit ThemeWare® das umfangreichste Theme im Shopware Store erhältst.
Ein Vergleich mit dem Shopware Standard-Theme hinkt. Es ist wie Äpfel und Birnen zu vergleichen: ThemeWare® bietet dir über 400 Konfigurationsfelder, das Shopware Standard-Theme 30!
Alles an Code, was ThemeWare® für die Darstellung der Storefront nicht benötigt, wird nicht in die Storefront kompiliert.
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 durchaus bewusst, daher geben wir uns auch soviel mühe und hinterfragen jede 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. All diese Erfahrung haben wir bei der Neuentwicklung unser Shopware 6 Themes einfließen lassen und wenn du ThemeWare® nutzt, kannst du täglich davon profitieren.
Mehr geht natürlich immer! Wie oben bereits gesagt ist dies ein ständiger Prozess der sich auf jedes ThemeWare® Update auswirkt.
Möchtest du so wenig Code haben wie möglich, nutze am besten kein Custom-Theme sondern das Shopware Standard-Theme oder lass dir dein eigenes, maßgeschneidertes Theme entwickeln.
Wenn du dich für ThemeWare® entscheidest erhältst du das marktführende Theme für Shopware 5 und Shopware 6, DASS Komplettpaket für erfolgreiches Shop-Design.
Der Fokus von ThemeWare® liegt auf Verkaufsförderung und ist nahezu grenzenlos anpassbar. Darüber hinaus erhältst du detaillierte Anleitungen und Video-Tutorials, eine Profi-Erlebniswelt mit allen Grafiken sowie Online-Kurse mit Spezialwissen.
Zudem profitierst du von regelmäßigen Updates, einer kontinuierlichen Weiterentwicklung und unserem grandiosen Support.
Wir freuen uns auf die Zusammenarbeit und mit dir den Weg zu einem erfolgreichen Online-Shop zu gehen.
So oder so, wünschen wir dir immer "Gute Geschäfte".
Dein ThemeWare®-Team
Last modified 1mo ago