Geschwindigkeit

Die meiste Arbeit für eine schnelle Seite erledigt der Shop von selbst. Diese Seite erklärt, was dabei passiert, wo du eingreifen kannst und warum es so gebaut ist. Am Ende steht, wie du einen PageSpeed-Bericht liest, ohne dich von einzelnen Zahlen verrückt machen zu lassen.

Bilder

Bilder sind fast immer der größte Posten. Ein Produktfoto kommt mit 2.000 bis 4.000 Pixeln Breite herein, angezeigt wird es in einer Kachel von 150 bis 300 Pixeln.

Was beim Hochladen entsteht

Fassung	Größe	Wofür
thumb	150 px (längste Kante)	Warenkorb, Kasse, Mediathek
medium	600 px	Produktkacheln, Startseite
medium_large	1.024 px	Startbild und andere bildschirmbreite Bilder auf dem Handy
large	1.600 px	Produktseite, Startbild auf großen Bildschirmen
Kachelfassung	700 px breit, im Kachelformat	Produktkacheln ohne Beschnitt
Original	wie hochgeladen	Zoom auf der Produktseite

Jede Fassung gibt es zusätzlich als AVIF und WebP. Einstellbar unter Einstellungen → Medien: Konvertieren an/aus, Zielformat (AVIF + WebP, nur AVIF, nur WebP), Qualität WebP/JPEG/PNG (Vorgabe 82) und eine eigene Qualität AVIF (Vorgabe 60). AVIF komprimiert anders: Bei 60 sieht es aus wie WebP bei 82 und ist oft nur halb so groß. Eine geänderte Qualität gilt für neue Uploads; vorhandene Bilder rechnet php artisan wavux:bilder-nachrechnen --neu neu, die Kachelfassungen bleiben dabei erhalten. Es wird nur verkleinert, nie vergrößert: Ein Bild mit 400 Pixeln Breite bekommt keine 1.600-px-Fassung.

Die Kachelfassung bringt das Foto auf das Format der Kachel, ohne etwas abzuschneiden: Der Rand des Fotos wird fortgesetzt, bis die Kachel voll ist. Das Kachelformat ist 4/4.6 (Breite/Höhe) und lässt sich auf dem Server über MEDIA_KACHEL_VERHAELTNIS in der .env ändern.

Welcher Browser welche Fassung bekommt

Der Shop schreibt zu jedem Bild alle Fassungen in die Seite (srcset) und sagt dem Browser, wie breit das Bild angezeigt wird (sizes). Der Browser wählt dann selbst die kleinste passende Datei — das Handy eine kleine, der große Bildschirm eine große.

Kacheln (Produktlisten, Slider, Kategorien): ein Drittel bis die Hälfte der Bildschirmbreite.
Startbild, Banner, Kategoriekopf, Kampagnenbild, Hotspot-Bild: volle Bildschirmbreite.
Hauptbild der Produktseite: volle Breite auf dem Handy, halbe auf dem Computer.

Themes mit eigener Produktkarte (z. B. manufaktur) nehmen die Kachelfassung. Fehlt sie, nehmen sie die 600-px-Fassung, und erst wenn auch die fehlt, das Original. Die Kacheln der Standard-Blöcke wählen über srcset selbst die passende Größe.

Fehlende Größen trägt der Shop von selbst nach: Der Zeitplan (Cron) ruft stündlich wavux:bilder-nachrechnen auf und bearbeitet jedes Mal höchstens 30 Bilder. Kommt eine neue Größe dazu — wie am 21.10.2026 die 1.024er —, haben sie nach ein paar Stunden alle Bilder, ohne dass du etwas tun musst. Voraussetzung ist ein eingerichteter Cron.

Wer nicht warten will, startet es auf dem Server sofort — und für die Kachelfassungen:

php artisan wavux:bilder-nachrechnen

php artisan wavux:kachelbilder

Beide ergänzen nur, was fehlt, und können jederzeit wiederholt werden. Die Option --neu rechnet alles neu; bei bilder-nachrechnen geht dabei auch die Kachelfassung verloren — also danach wavux:kachelbilder laufen lassen.

Was erst später lädt

Bilder unterhalb des ersten Bildschirms laden erst, wenn man dorthin scrollt (loading="lazy"). Ebenso das Bild der EU-Gewährleistungsmitteilung im Dialog „Ihre gesetzlichen Gewährleistungsrechte” — es kommt erst, wenn jemand den Dialog öffnet.

Das Startbild

Für die Bewertung bei Google zählt vor allem, wann das größte Element im ersten Bildschirm sichtbar ist — auf der Startseite fast immer das Startbild. Der Shop behandelt es deshalb anders als alle anderen Bilder:

Die erste Folie wird nie verzögert geladen und bekommt höchste Priorität.
Sie wird schon im Kopf der Seite angekündigt (preload), damit der Browser sie holt, bevor er das ganze HTML gelesen hat — ganz oben, noch vor dem Stylesheet. Das gilt in allen mitgelieferten Themes. Wer ein eigenes Theme baut, setzt dafür @stack('head_vorab') direkt hinter den <title> (das Gerüst von theme:new hat es schon).
Das Startbild ist ein echtes Bild, kein Hintergrundbild. Ein Hintergrundbild (background:url()) kann der Browser weder in passender Größe wählen noch vorab laden.
Bei mehreren Folien stehen die Regeln, welche Folie sichtbar ist, direkt beim Slider. Stünden sie am Seitenende, lägen bis dahin alle Folien übereinander, und das erste Bild würde zu spät freigelegt.

Was du tun kannst: Startbilder nicht größer hochladen als nötig (rund 2.000 Pixel Breite reichen), und bei einem Slider die erste Folie mit dem wichtigsten Bild belegen.

Schriften

Schriften liegen auf dem eigenen Server, nicht bei Google (Datenschutz) — siehe Schriften lokal. Für das Tempo gilt:

Die Schnitte, die oben auf der Seite stehen, werden vorab geladen. So springt die Seite nicht, wenn die Schrift eintrifft. Welche das sind, sagt das Theme (preload_font_weights in der theme.json, ohne Angabe 400–700) — ein Theme mit fetter Startbild-Überschrift lädt so auch 800 oder 900 vor, die anderen nicht.
Die Schrift-Angaben (@font-face) stehen direkt in der Seite statt in einer eigenen Datei — eine Anfrage weniger, die das erste Zeichnen aufhält. Bei sehr vielen Schriften (über 16 KB) bleibt es bei der eigenen Datei.

Zwischenspeicher (Cache)

Im Browser

Bilder, Schriften, Stylesheets und Skripte bekommen vom Server die Anweisung „ein Jahr aufheben“. Wer die Seite ein zweites Mal öffnet, lädt sie dann fast nur noch aus dem eigenen Speicher.

Damit Änderungen trotzdem ankommen, tragen die Dateien des Themes einen Stempel in der Adresse (app.css?v=…). Nach einem Update ändert sich der Stempel, und der Browser holt die neue Fassung sofort. Bilder bekommen bei jedem Hochladen ohnehin einen neuen Dateinamen.

Die Aufbewahrungsdauer stellt der Server ein, nicht der Shop — und sie ist nicht überall ab Werk gesetzt. Fehlt sie, meldet PageSpeed das unter „Effiziente Verweildauer im Cache” mit einer Liste von Schriften, Skripten und Bildern.

Bei Plesk: Websites & Domains → Domain → Apache & nginx-Einstellungen → Zusätzliche nginx-Anweisungen. Die fertigen Zeilen zum Einfügen stehen unter Installation auf anderen Servern → nginx — dieselben Regeln sperren zugleich Skripte im Upload-Ordner. Auf einem Live-Shop brachte das allein einen deutlichen Sprung bei PageSpeed. Prüfen lässt es sich im Browser (Entwicklerwerkzeuge → Netzwerk → eine Schriftdatei → Antwort-Header): Dort muss Cache-Control mit max-age=31536000 stehen. immutable ist richtig, weil Theme-Dateien einen Versionsstempel tragen und Bilder bei jedem Hochladen einen neuen Namen bekommen.

Im Shop

Einstellungen → Cache → Cache jetzt leeren leert die internen Zwischenspeicher (Konfiguration, Routen, Vorlagen). Nötig nur, wenn eine Änderung nicht erscheint — siehe Cache.

Warum es keinen Seiten-Cache gibt

Manche Systeme speichern ganze Seiten fertig ab und liefern sie ohne Rechenarbeit aus. Der Shop tut das bewusst nicht: In jeder Seite stecken Warenkorb, Anmeldung, Cookie-Einwilligung und Sicherheitsangaben für Formulare. Eine falsch zwischengespeicherte Seite zeigt im schlimmsten Fall einem Kunden den Warenkorb eines anderen — das wiegt schwerer als eine halbe Sekunde Rechenzeit.

Weniger HTML

Einstellungen → Optimieren:

HTML minifizieren entfernt überflüssigen Leerraum — je nach Seite 5 bis 15 % kleiner.
HTML-Kommentare entfernen — bedingte Kommentare bleiben.

Beides wirkt nur auf die öffentlichen Seiten. Bei einer Neuinstallation sind beide an; Shops, die vor Version 1.47 installiert wurden, behalten ihre Einstellung. Empfehlung: beide einschalten. In den Messungen auf einem Live-Shop brachten sie zusammen einen bis zwei Punkte bei der Handy-Note und ruhigere Werte von Lauf zu Lauf. Wenn nach dem Einschalten etwas anders aussieht, wieder aus und Bescheid geben.

Warum das Stylesheet eine eigene Datei bleibt

PageSpeed schlägt vor, das Stylesheet des Themes direkt in die Seite zu schreiben („Anfragen zum Blockieren des Renderings”). Das spart beim ersten Besuch eine Anfrage — steckt dann aber in jeder Seite, statt einmal im Browser-Speicher zu liegen. Wer fünf Seiten ansieht, lädt es fünfmal. Für die Note brächte das wenige Punkte; für echte Kunden, die mehr als eine Seite ansehen, ist die eigene Datei die bessere Wahl. Der Hinweis darf deshalb stehen bleiben.

Barrierefreiheit

PageSpeed bewertet auch, ob die Seite für Screenreader und mit schlechten Augen benutzbar ist. Der Shop sorgt selbst dafür, dass

jedes Logo einen lesbaren Namen trägt — ohne Logo-Text im Theme den Shopnamen,
Knöpfe ohne Beschriftung gar nicht erst ausgegeben werden,
die Punkte unter einem Slider richtig ausgezeichnet sind,
grauer Hinweistext in allen mitgelieferten Themes das Kontrastverhältnis von 4,5 : 1 erreicht.

Was bei dir liegt:

Alternativtexte für Bilder pflegen (Mediathek → Bild anklicken → Alternativtext).
Kontrast: Helle Schrift auf hellem Grund oder kräftige Akzentfarben in kleiner Schrift erreichen oft nicht das geforderte Verhältnis von 4,5 : 1. PageSpeed nennt die Stellen.
Ein Logo-Bild unter Theme → Anpassen hinterlegen — dann zeigen es alle Kopfzeilen, auch die für das Handy.

PageSpeed richtig lesen

PageSpeed Insights misst die Seite zweimal: als Handy und als Computer. Für das Handy wird ein langsames Mobilfunknetz und ein schwaches Gerät simuliert.

Die Zahlen oben (Leistung, Barrierefreiheit, Best Practices, SEO) sind die Bewertung, 0–100.
Largest Contentful Paint (LCP) ist die Zeit, bis das größte Element sichtbar ist. Der Wert oben ist hochgerechnet auf das langsame Netz. Wie es wirklich lief, zeigt weiter unten die LCP-Aufschlüsselung: Entdecken, Laden, Anzeigen — die Summe davon ist die echte Zeit.
Die Werte schwanken von Lauf zu Lauf um mehrere Punkte. Zwei, drei Läufe machen und den Schnitt nehmen. Über 90 auf dem Handy ist sehr gut, über 80 gut.
Hinweise wie „Reduziere nicht verwendete CSS” mit wenigen KB sind Kleinkram. Wichtig sind die Einträge mit großen Einsparungen (Hunderte KB, Hunderte Millisekunden).