Mobile Geschwindigkeit eines PrestaShop-Shops: was Sie messen sollten und was wirklich hilft

Sie testen Ihren Shop am Büro-PC mit Glasfaser, und alles läuft gut. Ihr Kunde öffnet ihn auf einem Mittelklasse-Smartphone mit wechselndem Empfang im Bus. Für ihn braucht dieselbe Seite mehrere Sekunden, bis das Produktfoto erscheint, und reagiert verzögert, wenn er auf „In den Warenkorb“ tippt. Diese zweite Erfahrung ist die, die zählt, sowohl für den Verkauf als auch für Google, das Seiten anhand ihrer mobilen Version indexiert und bewertet.

Labor und Praxis: zwei verschiedene Messungen

Bevor Sie etwas ändern, unterscheiden Sie zwei Arten von Daten:

• Labordaten: die Werte eines simulierten Tests wie Lighthouse oder aus dem unteren Teil von PageSpeed Insights. Nützlich für die Diagnose, weil sie immer unter denselben Bedingungen messen, aber eben eine Simulation.
• Felddaten: was echte Chrome-Nutzer in den letzten Tagen erlebt haben, zusammengefasst. Das ist es, was oben in PageSpeed Insights erscheint (bei ausreichend Traffic) und im Bericht „Core Web Vitals“ der Search Console.

Sich auf den Laborwert zu fixieren, ist ein häufiger Fehler. Ein Shop kann in Lighthouse 60 Punkte haben und mit echten Daten bestehen, oder 90 und durchfallen, weil seine Nutzer langsame Smartphones verwenden. Was Google als Signal nutzt, sind die Felddaten.

Die drei Metriken, in der Sprache eines Shops

Bewertet wird das 75. Perzentil der Besuche: Es reicht nicht, dass es für die Mehrheit gut läuft, es muss für drei von vier Besuchen gut laufen.

Was PrestaShop auf dem Smartphone ausbremst

Antwortzeit des Servers

Braucht der Server lange, um die Seite zu erzeugen, startet alles andere verspätet. In PrestaShop fallen die Datenbankabfragen jeder Seite ins Gewicht, Module, die Logik in Frontend-Hooks einhängen, ein altes PHP und ein Hosting ohne ausreichende Ressourcen. Ein Full-Page-Cache, der anonymen Besuchern bereits erzeugtes HTML ausliefert, ist hier meist die sichtbarste Einzelverbesserung.

CSS und JavaScript, die diese Seite nicht braucht

Jedes Modul neigt dazu, seine Dateien auf allen Seiten zu laden: das CSS des Kontaktformulars auf der Produktseite, das Skript des Konfigurators auf der Startseite. Auf einem Smartphone verzögert das Herunterladen, Parsen und Ausführen all dessen die Darstellung und verschlechtert vor allem den INP, weil der Prozessor des Telefons beschäftigt ist, wenn der Nutzer den Bildschirm berührt.

Skripte von Drittanbietern

Chats, Werbe-Pixel, Heatmaps, Bewertungs-Widgets. Jedes fügt Anfragen und Prozessorarbeit hinzu. Viele werden erst gebraucht, wenn der Nutzer mit der Seite interagiert.

Bilder

In großer Auflösung hochgeladene Produktfotos ohne moderne Formate oder ein Karussell auf der Startseite, das dem Smartphone ein für Desktop-Bildschirme gedachtes Bild schickt. Das LCP-Element einer Produktseite ist fast immer das Hauptfoto: Ist es schwer oder wird es per Lazy Loading geladen, leidet der LCP.

Schriften

Mehrere Schriftfamilien mit vielen Schnitten, von externen Servern geladen. Neben dem Gewicht verzögern sie den Text oder lassen ihn springen, wenn die endgültige Schrift angewendet wird.

Was wirklich hilft, in dieser Reihenfolge

1. Aktueller Server und aktuelles PHP. Eine unterstützte PHP-Version und ein aktuelles PrestaShop sind schon für sich schneller und ermöglichen aktuelle Cache- und Optimierungswerkzeuge, die auf alten Versionen nicht laufen.
2. Seiten-Cache für anonyme Besucher, mit korrekten Ausnahmen für Warenkorb, Zahlung und Kundenkonto und automatischem Leeren, wenn sich Produkte oder Preise ändern.
3. CSS und JS von Seiten entfernen, auf denen sie nicht gebraucht werden, statt sie nur zusammenzufassen und zu minifizieren. Alles in eine einzige große Datei zu packen, verringert nicht, was das Smartphone verarbeiten muss.
4. Drittanbieter-Skripte bis zur ersten Interaktion verzögern, mit einer Ausnahmeliste für das, was immer geladen werden muss.
5. Das Hauptbild ohne Lazy Loading und in der richtigen Größe; den Rest per Lazy Loading. Reservieren Sie den Platz für Bilder und Banner mit ihren Abmessungen, um Verschiebungen zu vermeiden.
6. Schriften vom eigenen Server ausliefern, nur mit den Schnitten, die Sie verwenden, und mit angepasstem font-display.

Wie Sie vorher und nachher messen

• Notieren Sie vor dem Start die Felddaten der wichtigsten Vorlagen (Startseite, Kategorie, Produktseite).
• Nutzen Sie das Labor, um zu prüfen, ob die Änderung an einer bestimmten URL das bewirkt, was Sie erwarten.
• Warten Sie, bis sich die Felddaten aktualisieren: Sie bilden einen Zeitraum von mehreren Wochen ab, die Verbesserung zeigt sich also nicht am nächsten Tag.
• Testen Sie auch auf einem echten Mittelklasse-Smartphone, mit über die Browser-Werkzeuge gedrosselter Verbindung: Das kommt dem am nächsten, was ein großer Teil Ihrer Kunden erlebt, und deckt Probleme auf, die die Glasfaser im Büro verdeckt, etwa Menüs, die sich nur zögerlich öffnen, oder Buttons, die sich verschieben.
• Behalten Sie auch Ihr Geschäft im Blick: Conversion-Rate auf Mobilgeräten, Absprünge auf Produktseiten, begonnene Warenkörbe.

Geschwindigkeit ist für Google ein Signal unter vielen, und niemand kann Ihnen für eine Verbesserung Positionen versprechen. Klar ist aber: Ein auf dem Smartphone schneller Shop verliert unterwegs weniger Kunden.

So lösen Sie es in PrestaShop

Das Pack Tienda rápida von Rekire vereint die Bausteine dieses Artikels: All In One Cache (Full-Page-Cache auf der Festplatte mit automatischem Leeren beim Speichern von Produkten, Kategorien oder Preisen, Abfrage-Cache in Redis ab PrestaShop 8 und OPcache-Verwaltung), den zugehörigen Einrichtungs- und Schulungsservice, RKR OptiMatters und Cache Buster. OptiMatters erfasst die CSS- und JS-Dateien, die jeder Seitentyp lädt, mit Gewicht und Herkunftsmodul, lässt Sie sie pro Seite, Gerät oder Controller entfernen, aufschieben oder bis zur ersten Interaktion verzögern, liefert Google Fonts vom eigenen Server mit nur den verwendeten Schnitten aus und bietet einen Vorher-Nachher-Modus, den nur sieht, wer im Backoffice angemeldet ist.