LogoLogo
SucheService PortalHandbuchSonstigesEnglishSupport anfordern
  • Willkommen
  • Wissensdatenbank
    • Einführung
      • ThemeWare® testen
      • ThemeWare® installieren
      • ThemeWare® aktivieren
      • ThemeWare® zuweisen
      • ThemeWare® Utilities herunterladen
      • Überblick Theme-Konfiguration
      • ThemeWare® bearbeiten
      • Themes kombinieren
      • Farben konfigurieren
      • Schriften konfigurieren
      • Logo einbinden
      • Logo konfigurieren
      • Text-Logo konfigurieren
      • Texte im Theme bearbeiten
      • USP-Bar konfigurieren
      • Erlebniswelten verstehen
      • Startseite (ThemeWare® Erlebniswelt) einrichten
      • Shopseiten bearbeiten und anlegen
      • Landingpages bearbeiten und anlegen
      • Kategorieseiten bearbeiten und anlegen
      • Produktseiten bearbeiten und anlegen
      • Shopseiten bearbeiten und anlegen
      • Shop-Navigation konfigurieren
      • Service-Navigation konfigurieren
      • Footer-Navigation konfigurieren
      • Footer konfigurieren
      • Zahlungs- und Versandanbieter konfigurieren
      • Zahlungs- und Versandanbieter Logos
      • Mehrsprachigkeit mit ThemeWare®
      • Mehr als ein ThemeWare® Theme nutzen
      • ThemeWare® erwerben
      • Support erhalten
      • Updates und Neuigkeiten
    • Anleitungen
      • Administration
        • ThemeWare® testen
        • ThemeWare® kaufen
        • ThemeWare® mieten
        • ThemeWare® hochladen
        • ThemeWare® installieren
        • ThemeWare® aktivieren
        • ThemeWare® zuweisen
        • ThemeWare® bearbeiten
        • ThemeWare® zurücksetzen
        • ThemeWare® bewerten
        • ThemeWare® updaten
        • ThemeWare® aufräumen
        • ThemeWare® deaktivieren
        • ThemeWare® deinstallieren
        • ThemeWare® löschen
        • ThemeWare® zurückgeben
        • ThemeWare® Version ermitteln
        • Shopware Updates und ThemeWare®
      • Demoshops
        • Startseite
        • Kategorie "Höhenluft & Abenteuer"
        • Kategorie "Kochlust & Provence"
        • Kategorie "Handwerk & Tradition"
        • Konfiguration
      • Erlebniswelten
        • ThemeWare® CMS-Styling für Erlebniswelten
        • ThemeWare® CSS-Klassen für Erlebniswelten
        • ThemeWare® CSS-Klassen für Erlebniswelten (Übersicht)
        • Abstände in CMS-Blöcken anpassen
        • Bilder in CMS-Blöcken dekorieren
        • CMS-Blöcke auf mobilen Geräten ausblenden
        • CSS-Abstandsklassen für CMS-Sektionen/-Blöcke
        • CSS-Animationen für Erlebniswelten
        • CSS-Klassen für Sektionen über die volle Breite
        • Erlebniswelten mit Bootstrap CSS-Klassen gestalten
        • Erlebniswelten mit Bootstrap HTML-Code gestalten
        • Hover-Effekte für Bilder in CMS-Blöcken
        • Kategorie-Erlebniswelten der Demoshops nachbauen
        • Markiere CMS-Blöcke als Favoriten um sie schneller zu finden
        • Markiere CMS-Elemente als Favoriten um sie schneller zu finden
        • Responsive Erlebniswelten erstellen
        • Responsive Erlebniswelten mit Bootstrap
        • Spaltenabstände in CMS-Blöcken anpassen
        • Überschriften in CMS-Blöcken gestalten
        • Zusatzfeld in der Erlebniswelt ausgeben
      • Fehlerbehebung
        • Bekannte Fehler einfach selber lösen
        • Darstellungsfehler beheben
        • Erweiterungen bzw. Plugins prüfen
        • Individuelle Anpassungen prüfen
        • Shop aktualisieren
        • Shopware Standard-Theme prüfen
        • ThemeWare® Soft Reset durchführen
        • ThemeWare® neu installieren
      • Fehlersuche
        • Erweiterung als Fehlerursache identifizieren
        • Fehlermeldungen debuggen
        • Fehler eingrenzen
        • Theme als Fehlerursache identifizieren
        • Debug-Modus
      • Fonts
        • Fonts lokal einbinden
        • Fonts mit dem ThemeWare® Customizing Plugin lokal einbinden
        • Google Fonts importieren
        • Schriftkonfiguration
        • Website auf Google Fonts prüfen
      • Header
        • Erlebniswelt-Header konfigurieren
      • Individuelle Anpassungen
        • Individuelle Anpassungen mittels CSS
        • Individuelle Anpassungen mittels SCSS
        • Individuelle Template-Anpassungen (Twig, HTML)
        • Individuelle Anpassungen mit dem ThemeWare® Customizing Plugin
        • Individuelle Anpassungen mit der ThemeWare® Customizing App (Cloud)
        • Individuellen JavaScript-Code einbinden
        • CSS-Hierarchie
        • Bootstrap in der Storefront nutzen
        • Zusatzfelder in der Storefront ausgeben
      • Kategorien
        • Handwerk & Tradition (Demoshop)
        • Höhenluft & Abenteuer (Demoshop)
        • Produkt-Boxen kompakter gestalten
        • Produkt-Listing kompakter gestalten
        • Kategorie erstellen
        • Kategorie-Layout erstellen
        • Kategorie-Layout mit Sidebar erstellen
        • Kategorie-Layout zuweisen
        • Kochlust & Provence (Demoshop)
      • Konfiguration
        • Child-Theme
        • Farbkonfigurationsfeld
        • Feldtypen in der Theme-Konfiguration
        • Schriftkonfigurationsfeld
        • SCSS-Funktionen in der Konfiguration verwenden
        • Theme-Variablen in der Konfiguration verwenden
        • ThemeWare® Duplikate
        • ThemeWare® Duplikat erstellen
        • ThemeWare® Duplikat umbenennen
        • Verwaiste Konfigurationsfelder
      • Produktseiten
        • Produkt-Layout erstellen
        • Produkt-Layout mit Sidebar erstellen
        • Produkt-Layout zuweisen
      • Sonstiges
        • Browser-Cache leeren
        • Shopware Cache leeren / aufwärmen
        • Storefront aktualisieren
        • Theme kompilieren
      • Landingpages
        • Landingpage erstellen
        • Landingpage-Layout erstellen
        • Landingpage-Layout zuweisen
        • Startseite erstellen
      • Shopseiten
        • Shopseiten-Layout erstellen
        • Shopseite in Storefront verlinken
        • AGB-Seite erstellen
        • Datenschutz-Seite erstellen
        • Kontaktseite erstellen
        • Newsletterseite erstellen
        • Seite "Impressum" erstellen
        • Seite "Versand- und Zahlungsarten" erstellen
        • Seite "Widerrufsbelehrungen" erstellen
      • Shopware Account
        • ThemeWare® Subscription verlängern
        • Wechsel zur Mietlizenz
      • Shopware Store
        • ThemeWare® finden
        • ThemeWare® testen
        • ThemeWare® kaufen
        • ThemeWare® mieten
        • ThemeWare® nach der Testphase kaufen
        • ThemeWare® nach des Probemontas mieten
      • Texte bearbeiten und übersetzen
      • Zusatzfelder (Custom Fields)
    • Grundwissen
      • Update-Leitfaden
      • Aktuelle ThemeWare® Version ermitteln
      • Bilder
        • Anzeigemodus von Bildern
        • Bildgrößen
      • Daten von ThemeWare®
      • Erlebniswelten
        • CMS-Layout
        • CMS-Sektion
        • CMS-Block
        • CMS-Element
      • Farbkonfiguration
      • HTML-Code
      • Icons
      • Lizenzen
      • Plugin Kompatibilität (HC-Architecture®)
      • Schriftkonfiguration
      • Shop-Logo
      • Shopware Kompatibilität
      • Textbausteine
      • Unterstützte Browser
      • Versandarten
      • Zahlungsarten
    • Profiwissen
      • Das ultimative Profiwissen
      • Backup der ThemeWare® Konfiguration
      • Bootstrap CSS-Klassen nutzen
      • Bootstrap HTML-Code nutzen
      • Datenbank mit dem Adminer bearbeiten
      • Debug-Modus
      • Erlebniswelten mit Bootstrap CSS-Klassen optimieren
      • Erlebniswelten mit Bootstrap HTML-Elementen optimieren
      • Experten-Einstellungen in CMS-Elementen
      • Experten-Einstellungen in der Theme-Konfiguration
      • Experten-Modus
      • HTML Sanitizer
      • Kompatibilität zu ThemeWare® für Shopware 6 herstellen
      • SCSS
      • Spalten-CSS-Klassen in ThemeWare® CMS-Elementen
      • ThemeWare® auf dem FTP-Server
      • ThemeWare® in der Datenbank
      • ThemeWare® Konfiguration exportieren und importieren
      • ThemeWare® Konfiguration sichern und wiederherstellen
      • ThemeWare® Konfiguration zurücksetzen
      • ThemeWare® manuell installieren
      • ThemeWare® manuell updaten
      • ThemeWare® per FTP hochladen
      • ThemeWare® über die Datenbank deaktivieren
      • Twig
      • Zusätzliche CSS-Klassen für Animationen
    • Häufige Fragen
      • Die Subscription läuft aus - was nun?
      • Häufig in ThemeWare® gesuchte Funktionen
      • Kann ich den Probemonat verlängern?
      • Kann ich die Testphase verlängern?
      • Muss ich ThemeWare® für eine andere Domain nochmal erwerben?
      • Muss ich ThemeWare® für einen anderen Verkaufskanal nochmal erwerben?
      • Wann endet der Probemonat?
      • Wann endet die Testphase?
      • Warum gibt es ThemeWare® mehrmals im Shopware Store?
      • Warum ist die neue ThemeWare® Version nicht verfügbar?
      • Warum muss die Subscription bei Kauf-Erweiterungen verlängert werden?
      • Warum überlagert der Header die Erlebniswelt?
      • Was bedeutet "Bereits kompatibel"?
      • Was bedeutet "Jetzt verfügbar"?
      • Was bedeutet "Mit der neuen Shopware Version"?
      • Was bedeutet "Nicht kompatibel"?
      • Was bedeutet das Fenster "Erweiterungs-Warnung" beim Öffnen meines Admin?
      • Welche Bildgrößen sollte ich mit ThemeWare® nutzen?
      • Wie binde ich das Google-Tag ein?
      • Wie kann ich CMS-Blöcke auf dem Handy ausblenden?
      • Wie kann ich Darstellungsfehler beheben?
      • Wie kann ich das Listing kompakter gestalten?
      • Wie kann ich den Rahmen um einen CMS-Block entfernen?
      • Wie kann ich die Produktbeschreibung in Produkt-Boxen ausblenden?
      • Wie kann ich die Rahmen um CMS-Blöcke entfernen?
      • Wie kann ich Produkt-Boxen kompakter gestalten?
      • Wie kann ich die Anzahl der Ebenen im Flyout ändern?
      • Wie kann ich die Lücken im Listing entfernen?
      • Wie kann ich eigene Fonts DSGVO-konform lokal einbinden?
      • Wie kann ich eine unterschiedliche Konfiguration für einen Verkaufskanal nutzen?
      • Wie kann ich eine zusätzliche Konfiguration in einem weiteren Verkaufskanal nutzen?
      • Wie kann ich Google Fonts DSGVO-konform lokal einbinden?
      • Wie kann ich individuelle Anpassungen vornehmen?
      • Wie kann ich einen Text (z.B. von Widgets) ändern oder übersetzen?
      • Wie kann ich Textbausteine für einzelne Verkaufskanäle anpassen?
      • Wie kann ich Texte für einzelne Verkaufskanäle anpassen?
      • Wie kann es zu Inkompatibilitäten kommen?
      • Wie kündige ich die Miete einer Erweiterung?
      • Wie lösche ich Lizenzen richtig?
      • Wie stelle ich den automatischen Bildwechsel im Slider ein?
    • Häufige Fehler
      • Storefront
        • AGB Pop-up wird ohne Inhalt angezeigt
        • Branding wird trotz Lizenzkey angezeigt
        • CMS-Blöcke werden in Erlebniswelt nicht angezeigt
        • Darstellungsfehler im Theme-Duplikat nach Update
        • Darstellungsfehler in der Storefront
        • Datenschutz Pop-up wird ohne Inhalt angezeigt
        • Galerie-Slider haben auf mobilen Geräten eine falsche Höhe
        • Header überlagert die Erlebniswelt auf der Startseite
        • Leider ist etwas schief gelaufen auf der Artikelseite
        • Oops! An Error Occurred
        • Pop-up (z.B. Datenschutz) wird ohne Inhalt angezeigt
        • Sticky Top-Navigation funktioniert nicht
        • Unterkategorien im Listing werden nicht angezeigt
        • Versandkosten Pop-up wird ohne Inhalt angezeigt
      • Administration
        • Administration nicht erreichbar
        • Allowed memory size of ... bytes exhausted
        • Bad Request...
        • $color: 0 is not a color
        • $color2: 0 is not a color
        • Das Theme konnte nicht deaktiviert werden
        • Das Theme konnte nicht kompiliert werden
        • Einige Blöcke wurden nicht ausreichend konfiguriert
        • Einige Fehler sind aufgetreten. Bitte überprüfe die Liste im Editor.
        • Error: argument '$color'
        • Fehler 400 / Theme kann nicht gespeichert werden
        • Fehler 500 / Themes können nicht gespeichert werden
        • Funktionen oder Konfigurationen fehlen
        • Konfiguration erforderlich. Bitte fülle alle Elemente mit Daten.
        • Konfigurationsfelder fehlen
        • Konfigurationsfelder im Tab "Allgemein"
        • Neue Konfigurationsfelder fehlen im Theme-Duplikat nach Update
        • Parse error: failed at $...
        • Reduzierte Darstellung des Theme-Managers
        • Speichern der Theme-Konfiguration dauert sehr lange
        • Theme kann nicht kompiliert werden
        • Theme konnte dem Verkaufskanal nicht zugewiesen werden
        • ThemeWare® lässt sich nicht updaten
        • ThemeWare® Update nicht verfügbar
        • Unable to compile the theme...
        • Unable to deactivate or uninstall theme
        • Unable to find the theme
        • Undefined variable $...
        • Vorschaubilder im Erlebniswelt-Editor zeigen Platzhalterbilder
    • Tipps und Tricks
      • Die 10 wichtigsten Tipps
      • Bilder optimieren
      • Empfohlene Erweiterungen bzw. Plugins
      • Fachbegriffe erklärt
      • Ideales Vorgehen bei der Konfiguration
      • Konfigurationsfelder schnell finden
      • Nützliche Links
      • Tipps zur Logo-Gestaltung
      • Wie du jede Farbe im Theme Manager findest
    • Shopware
      • Erste Schritte
        • Systemvoraussetzungen
      • Migration
      • Konfiguration
        • Hersteller
        • Produkte
        • Eigenschaften
        • Kategorien
        • Bewertungen
        • Bestellungen
        • Kunden
        • Medien
        • Erlebniswelten
          • Bilder in Text-Felder einfügen
        • Themes
          • Shopware default theme zuweisen
          • Shopware Standard-Theme zuweisen
          • Theme Konfiguration
          • Theme-Duplikate
          • Theme-Duplikat erstellen
          • Theme-Duplikat umbenennen
          • Theme wechseln
          • Theme einem Verkaufskanal zuweisen
        • Newsletter
        • Rabatte & Aktionen
        • Erweiterungen
          • Erweiterungen erwerben
          • Erweiterungen mieten
          • Erweiterungen aktivieren
          • Erweiterungen aktualisieren / updaten
          • Erweiterungen installieren
          • Erweiterungen manuell installieren
          • Erweiterungen bewerten
          • Erweiterungen manuell aktualisieren / updaten
          • Erweiterungen deaktivieren
          • Erweiterungen deinstallieren
          • Erweiterungen entfernen
          • Erweiterungen zurückgeben
        • Einstellungen
          • Caches & Indizes
        • Verkaufskanäle
          • Wartungsmodus
      • Cloud
      • Shopware Erweiterungen
      • Tutorials & FAQs
      • Update Guides
        • Shopware 6 aktualisieren / updaten
      • Support
      • Shopware Account
        • Lizenzen im Shopware Account auf eine andere Domain umziehen
        • Lizenzen übertragen
        • Shop im Shopware Account einrichten
        • Shopdomain umbenennen
        • Shopware Account in der Administration anmelden
        • Shopware Account mit Shop verknüpfen
  • Mehr Wissen
    • ThemeWare® Extras
    • ThemeWare® Tools
      • ThemeWare® Customizing Plugin
      • ThemeWare® Customizing App (Cloud)
      • ThemeWare® Erlebniswelten-Import (Plugin)
    • Lexikon
    • Barrierefreiheit
    • GPSR
    • SEO & Pagespeed
      • PageSpeed Insights
  • Sonstiges
    • Über ThemeWare®
    • ThemeWare® Demoshops
    • ThemeWare® Handbuch
    • ThemeWare® Video-Tutorial
    • ThemeWare® Utilities
    • 🇬🇧English
Powered by GitBook
LogoLogo

ThemeWare®

  • Über ThemeWare®
  • ThemeWare® Demoshops
  • ThemeWare® Service Portal
  • ThemeWare® Utilities

Informationen

  • Datenschutz
  • Impressum
  • Kontakt
  • Newsletter

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH

On this page
  • ThemeWare®
  • Überzeuge dich selbst in unserem PageSpeed-Demoshop:
  • SEO und Pagespeed Online-Kurs
  • Pagespeed 🚀
  • Server-Performance
  • HTML-Optimierung
  • Bild-Optimierung
  • Meta-Daten
  • Zugänglichkeit und SEO
  • Browser-Caching
  • Überzeuge dich selbst in unserem PageSpeed-Demoshop:
  • Unnötigen Quellcode reduzieren
  • JavaScript und CSS reduzieren
  • Externe Daten reduzieren
  • Fazit

Was this helpful?

  1. Mehr Wissen

SEO & Pagespeed

PreviousGPSRNextPageSpeed Insights

Last updated 2 months ago

Was this helpful?

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.

Mit ThemeWare® können wir dir viel abnehmen, aber nicht alles – denn SEO & Pagespeed hängen auch von deinen Einstellungen und individuellen Inhalten ab.

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.


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


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


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.

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

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

Tipps

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

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

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

Nutze das kostenlose Plugin "" 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.

Installiere und aktiviere das kostenlose "" 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.

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

Hinweis: Die Bilder welche wir dir mit unserem 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 ein eigenes Video.

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

Setze das "" 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.

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 () kann dabei helfen, diese Aspekte genau zu prüfen und zu verbessern.

ThemeWare® Utilities
Tools
HTML Minify plugin
TinyPNG
Bild-Downloadpaket
Online-Kurs
Zahlungs- und Versandlogs
LazySizes und LazyLoading für passende Bilder-Sizes
https://dequeuniversity.com/rules/axe/4.8/color-contrast
ThemeWare® PageSpeed InsightsThemeWare® Pagespeed
Entdecke unseren PageSpeed-Demoshop
ThemeWare® PageSpeed InsightsThemeWare® Pagespeed
Entdecke unseren PageSpeed-Demoshop
100% PageSpeed Insights – Einzigartige Performance, Zugänglichkeit, Best Practices und SEO
100% PageSpeed Insights
Logo
Logo