Handbuch Page Speed Optimierung.

Alle Optimierungen im Einzelnen: Bilder, Skripte, CSS, Resource-Hints und HTML, dazu eine Prüfliste für die Abnahme.

Zur Produktseite Direkt anfragen

Systemvoraussetzungen

Shopware 6.6 oder 6.7 mit Storefront, PHP 8.2 oder neuer. Ein Paket deckt beide Fassungen ab.

Installation

Über die Plugin Suite installieren oder das ZIP unter Erweiterungen hochladen, installieren, aktivieren. Danach den Cache leeren.

Ab Werk sinnvoll: Sie müssen nichts einstellen. Die wirksamen und unkritischen Optionen sind bereits aktiv.

Bilder

  • Verzögertes Laden - Bilder ausserhalb des sichtbaren Bereichs laden erst beim Heranscrollen.
  • LCP-Vorladen - das erste Inhaltsbild wird erkannt und vorgeladen. Logos und Symbole werden dabei übersprungen.
  • Bildmasse ergänzen - fehlende Breite und Höhe werden aus der Thumbnail-Adresse gelesen, sonst aus der Mediendatenbank. Der Browser reserviert damit den Platz, was Layout-Verschiebungen senkt.
  • Thumbnails statt Originale - Originale bekommen ein srcset aus den Shopware-Varianten. Eine Ausnahmeliste ist vorhanden.

Skripte und CSS

Beide Optionen sind ab Werk aus, weil sie je nach Theme Nebenwirkungen haben können.

  • Skripte zurückstellen - Skripte blockieren das Rendern nicht mehr.
  • CSS asynchron laden - der grösste Hebel gegen renderblockierende Anfragen. Ohne kritisches Inline-CSS ist ein kurzes unformatiertes Aufblitzen möglich. Nach dem Einschalten Startseite, Listing und Kasse prüfen.

Resource-Hints

Vorverbindungen und Schrift-Vorladungen laufen vollautomatisch. Die Eingabefelder sind nur für manuelle Übersteuerung gedacht und haben Vorrang.

Externe Ursprünge werden aus dem ausgelieferten HTML erkannt, höchstens vier automatische, der eigene Host ausgenommen. Bei Schrift-Hosts wird crossorigin gesetzt, sonst nicht - damit der Browser die Verbindung tatsächlich wiederverwendet.

Eine Info-Box im Modul zeigt live, welche Vorverbindungen und Schriften gerade gesetzt werden.

HTML

  • HTML verkleinern - entfernt überflüssige Leerzeichen. Ab Werk aus.
  • Instant-Prefetch - lädt die Zielseite vor, sobald der Zeiger über einem Verweis verweilt. Ab Werk an.

Prüfliste für die Abnahme

  • Startseite, ein Listing und eine Detailseite im Browser prüfen.
  • Die Analyse im Modul aufrufen und die erkannten Vorverbindungen ansehen.
  • Ein Messwerkzeug wie PageSpeed Insights vorher und nachher laufen lassen.
  • Erst danach Skripte zurückstellen oder CSS asynchron einschalten, einzeln und mit Prüfung.
  • Nach jeder Änderung den Cache leeren.

Zu beachten

Sieht eine Seite nach dem Einschalten von "CSS asynchron" kurz unformatiert aus, schalten Sie die Option wieder aus - dafür bräuchte es kritisches Inline-CSS im Theme. Verschwindet ein Widget nach "Skripte zurückstellen", tragen Sie es in die Ausnahmeliste ein.

Support

Fragen beantworten wir direkt. Schreiben Sie uns über das Kontaktformular.