PageSpeed 99/100 in einem echten PrestaShop 9.1 Shop mit 80+ Modulen

Kein Demo. Ein echter Shop.

Wenn man online PageSpeed-Fallstudien sieht, handelt es sich meistens um eine minimalistische Website mit wenigen Seiten und kaum Funktionalität. Das ist hier nicht der Fall.

mypresta.rocks ist unser produktiver PrestaShop 9.1 Shop. Er betreibt über 80 aktive Module – und das sind keine leichtgewichtigen Konfigurationsmodule. Wir sprechen von Modulen, die echte Frontend-Funktionalität hinzufügen: animierte Slider, Mega-Menü mit Dropdowns, ein vollständiger One-Page-Checkout, eine Blog-Engine mit Kommentaren und Teilen-Funktionen, ein Live-Suchwidget, Social-Media-Feeds, Produktgalerien, Verkaufs-Popups, Countdown-Timer, Cookie-Consent-Banner, Treueprogramme, Analyse-Dashboards und mehr.

Jedes dieser Module lädt seine eigenen CSS- und JavaScript-Dateien. Jedes hakt sich ins Frontend ein und rendert sichtbare, interaktive Elemente auf der Seite. Das ist die Art von Setup, die normalerweise Ihren PageSpeed-Score zerstört.

Und dennoch sind hier unsere Google PageSpeed Insights-Werte:

• Mobil: 99 Performance, 97 Accessibility, 100 Best Practices, 100 SEO
• Desktop: 99 Performance, 97 Accessibility, 100 Best Practices, 100 SEO

Das ist keine Theorie. Das ist das, was Google gerade auf unserer Live-Startseite misst.

Die Zahlen

Mobil (Langsames 4G, Moto G Power)

• First Contentful Paint: 1,2s
• Largest Contentful Paint: 1,5s
• Total Blocking Time: 110ms
• Cumulative Layout Shift: 0
• Speed Index: 1,4s

Desktop

• First Contentful Paint: 0,3s
• Largest Contentful Paint: 0,9s
• Total Blocking Time: 30ms
• Cumulative Layout Shift: 0,011
• Speed Index: 0,5s

Diese Ergebnisse stammen von Lighthouse 13, das auf der Google-Infrastruktur läuft – demselben Test, der den PageSpeed Insights-Bericht antreibt, den jeder Shop-Betreiber prüft.

Wie wir es geschafft haben

Es gibt keinen einzelnen Zaubertrick. Performance auf diesem Niveau entsteht durch eine disziplinierte Pipeline, die jede Schicht des Stacks berührt. Die Grundlagen haben wir in unserem PrestaShop Performance-Tuning-Leitfaden behandelt.

Critical CSS Extraction

Der größte Feind schnellen Renderings ist render-blockendes CSS. PrestaShops CCC-System (Combine, Compress, Cache) fasst alle Modul-Stylesheets in einer großen Datei zusammen. In unserem Shop ist diese Datei über 500KB groß.

Wir extrahieren kritisches Above-the-Fold-CSS mit Googles Critters-Bibliothek und betten es direkt in das HTML ein. Das vollständige Stylesheet wird dann asynchron mit dem Muster media="print" onload="this.media='all'" geladen. Der Browser rendert die Seite sofort mit den eingebetteten Styles, und der Rest lädt im Hintergrund, ohne irgendetwas zu blockieren.

CSS Purging

Mit 80+ Modulen enthält das kombinierte CSS Tausende von Regeln, die auf einer bestimmten Seite niemals verwendet werden. Wir führen PurgeCSS gegen das tatsächliche HTML der wichtigsten Seiten sowie alle JavaScript- und Template-Dateien im Theme und in den Modulen aus.

Das Ergebnis: 852KB auf 548KB reduziert – eine Reduzierung der CSS-Nutzlast um 36%. Weniger CSS bedeutet schnellere Downloads, schnelleres Parsen und einen flüssigeren Wechsel ohne Layout-Verschiebung.

JavaScript Splitting

Nicht das gesamte JavaScript muss sofort ausgeführt werden. Wir teilen das CCC-JavaScript-Bundle in zwei Teile auf:

• Sync-Bundle (~140KB / 41KB gzip): Kernfunktionalität – jQuery und PrestaShop-Kernscripts
• Deferred-Bundle (~497KB / 111KB gzip): Bootstrap, Theme-Scripts und nicht-kritische Modul-Scripts, die über <script defer> geladen werden

Das deferred Bundle lädt, ohne den Haupt-Thread zu blockieren. Dies allein hat unser synchrones JavaScript um über 60% reduziert.

Intelligentes Asset-Loading

Checkout-JavaScript (180KB+ minifiziert) wird auf Nicht-Checkout-Seiten vollständig zurückgestellt. Es lädt über requestIdleCallback auf der Startseite und Inhaltsseiten, und lädt nur sofort auf Produkt-, Warenkorb- und Checkout-Seiten, wo es tatsächlich benötigt wird.

Stripes Zahlungs-JavaScript wird auf Nicht-Checkout-Seiten vollständig entfernt.

Bildoptimierung

Alle Produkt- und Banner-Bilder werden im AVIF-Format über Apache Content Negotiation ausgeliefert – kein PHP-Overhead. Unser Batch-Konverter hat 5.399 Bilder verarbeitet und den gesamten Bildspeicher von 994MB auf 44MB reduziert (95,6% Reduzierung).

Unser mobiles Hero-Banner ist nur 25KB groß. Die Desktop-Version ist 56KB. Beide behalten bei diesen Größen eine ausgezeichnete visuelle Qualität.

Wir preloaden nur das mobile LCP-Bild und nichts sonst. Bei einer langsamen 4G-Verbindung mit ~200KB/s Bandbreite konkurriert jede vorab geladene Ressource mit dem Critical CSS um Bandbreite. Das Preloaden eines Fonts oder Desktop-Banners hat unseren FCP tatsächlich verschlechtert – eine Lektion, die wir auf die harte Tour gelernt haben.

WCAG 2.1 Barrierefreiheit

Der hohe Accessibility-Score erforderte sorgfältige Aufmerksamkeit auf Kontrastverhältnisse bei jedem Element auf der Seite:

• Alle Texte erfüllen die WCAG 2.1 AA-Kontrastanforderungen (4,5:1 für normalen Text, 3:1 für großen Text)
• Interaktive Elemente haben sichtbare Fokusindikatoren
• Korrekte Überschriftenhierarchie und ARIA-Labels durchgehend
• Versteckte Elemente verwenden .visually-hidden korrekt für Screenreader

Warum das wichtig ist

Google verwendet Core Web Vitals als Rankingsignal. Ein schneller, barrierefreier Shop rankt besser, konvertiert besser und bietet jedem Besucher ein besseres Erlebnis.

Aber noch wichtiger für unsere Kunden: jede Optimierungstechnik, die wir auf mypresta.rocks verwenden, ist in unsere Produkte eingebaut. Das Performance Revolution-Modul, das diese Pipeline antreibt, steht allen unseren Kunden zur Verfügung. Dieselbe Critical CSS Extraction, dasselbe JavaScript Splitting, dasselbe intelligente Asset-Loading.

Wenn wir mit 80+ aktiven Modulen in einem echten Produktionsshop 99/100 erreichen können – Module, die Slider, Suche, Checkout, Blog, Popups und alles dazwischen hinzufügen – kann Ihr Shop das auch schaffen. Kombinieren Sie es mit Instant Redis für serverseitiges Caching und Sie haben einen kompletten Performance-Stack.