Core Web Vitals sind kein Nischenthema für Entwickler mehr. Seit Google sie zu einem direkten Ranking-Faktor gemacht hat, kostet ein LCP von 4 Sekunden oder ein springendes CLS Positionen bei Produktanfragen — und damit Umsatz. 2026 hat INP das FID abgelöst und zieht die Schraube auf Mobilgeräten weiter an. Die gute Nachricht: Ein PrestaShop-Shop kann ohne Neuaufbau in den grünen Bereich kommen, sofern man die drei Metriken in der richtigen Reihenfolge angeht.
Dieser Artikel beschreibt die komplette Optimierungskette: was wirklich auf LCP, INP und CLS wirkt, und die technischen Hebel, die den Search-Console-Status von „Verbesserungsbedürftig“ auf „Gut“ kippen.
Verstehen, was jede Metrik misst
LCP (Largest Contentful Paint) misst, wie lange das größte sichtbare Element zum Rendern braucht — oft das Hauptproduktbild oder das Hero-Visual der Startseite. INP (Interaction to Next Paint) misst die Reaktionsfähigkeit: die Verzögerung zwischen einem Klick und der sichtbaren Reaktion der Seite, ausgebremst durch JavaScript. CLS (Cumulative Layout Shift) misst die visuelle Stabilität: jedes Element, das den Inhalt nachträglich „verschiebt“ (ein Bild ohne Abmessungen, ein eingefügtes Banner), verschlechtert den Wert.
Schritt 1 — Full-Page-Cache, der größte LCP-Hebel
PrestaShop generiert das HTML bei jedem Besuch neu, wenn nichts es cacht. Auf Shared Hosting explodiert die TTFB (Time to First Byte) und zieht den LCP nach oben. Ein Full-Page-Cache liefert das bereits erstellte HTML in wenigen Millisekunden. Es ist mit Abstand der Hebel mit dem größten LCP-Einfluss — noch bevor man die Bilder anfasst. In Kombination mit der Generierung von Critical CSS (das minimale CSS für den Above-the-Fold-Bereich, inline eingefügt, der Rest verzögert geladen) beseitigt man das Render-Blocking, das den ersten Aufbau verzögert.
Genau das bündelt ein dediziertes PrestaShop-Performance-Pack: Page-Cache, Critical CSS und fortgeschrittene Optimierungen in einem einzigen Modul, ohne Server-Bastelei.
Page-Cache & Performance-Optimierung für PrestaShop 8 & 9Seiten-Cache, Critical CSS und fortgeschrittene Optimierung für PrestaShop 8 und 9.149,00€
Schritt 2 — Next-Gen-Bilder (WebP / AVIF)
In einem Shop machen Bilder oft 70 % des Seitengewichts aus. JPEG/PNG im Jahr 2026 auszuliefern, lässt 30 bis 60 % unnötiges Gewicht liegen. WebP und vor allem AVIF liefern dieselbe visuelle Qualität bei einem Bruchteil des Gewichts — ein direkter Gewinn beim mobilen LCP. Die Regel: automatische Konvertierung on the fly, lokale Auslieferung (keine Abhängigkeit von einem kostenpflichtigen Drittanbieter-CDN) und ein Fallback für ältere Browser.
In PrestaShop führt der WebP- & AVIF-Bildoptimierer diese Konvertierung automatisch und zu 100 % lokal durch. Läuft Ihr Shop auf WooCommerce, ist das Pendant WebP AVIF Pro — gleiche Logik, ohne Abo.
Schritt 3 — CLS und INP beherrschen
CLS wird gelöst, indem man Platz reserviert: explizite Abmessungen oder aspect-ratio für jedes Bild und iframe, Schriften mit font-display swap und metrischem Fallback geladen. INP gewinnt man, indem man das JavaScript entlastet: nicht kritische Skripte verzögern, schwere Slider und Popups beim Laden vermeiden. Ein klassischer Fall, der beide belastet: eine schlecht integrierte Produktgalerie oder ein Video — ein Thema, das wir in unserer Analyse Produktvideo vs. Core Web Vitals vertieft haben.
Der Sonderfall der Facetten-Seiten
Gefilterte Kategorieseiten (Facettensuche) sind oft die schlimmsten Sorgenkinder: vollständige Reloads, nicht indexierbare URLs, schweres JavaScript. Eine auf Performance und SEO ausgelegte Facetten-Engine wie die Facettensuche & SEO für PrestaShop löst die Filter serverseitig mit indexierbaren Landingpages und schnellem Rendering — statt den INP bei jedem Filterklick zu verschlechtern.
Fazit: in der richtigen Reihenfolge optimieren, kontinuierlich messen
Die Gewinner-Sequenz ist klar: zuerst Full-Page-Cache und Critical CSS (maximaler LCP-Effekt), dann Next-Gen-Bilder, dann Stabilität (CLS) und Reaktionsfähigkeit (INP). Messen Sie vorher/nachher in der Search Console anhand von Felddaten (CrUX), nicht nur im Labor-Lighthouse. Um die Methode mit echtem Code zu vertiefen, geht unsere Core-Web-Vitals-Checkliste 2026 mit PHP und SQL weiter, und alle unsere Leitfäden sind in der Kategorie Performance & Core Web VitalsPerformance-Optimierung und Core Web Vitals: LCP, CLS, INP, Lazy Loading, WebP/AVIF-Konvertierung, CDN, kritisches CSS, Browser- und Server-Cache, Schriften-Optimierung, Minifizierung, JS-Bundles.