Core Web Vitals (CWV) wurden 2024 zu einem direkten Google-Rankingfaktor, und ihr Gewicht im Ranking von E-Commerce-Seiten steigt 2026 weiter. Auf PrestaShop 8 ist die CWV-Optimierung sowohl SEO-Arbeit als auch Qualitätsarbeit: Ein LCP, der von 4,2 s auf 1,8 s fällt, liefert mechanisch +20–40% Mobile-Conversion-Rate. Die meisten Händler starten Lighthouse, sehen einen roten Score, installieren ein generisches Cache-Modul und stellen fest, dass sich der Score kaum bewegt — weil die echten Hebel nicht im Cache liegen, sondern in präzisen technischen Details.
Diese Checkliste beschreibt die CWV-Optimierungen, die auf PrestaShop 8 in 2026 wirklich Ergebnisse liefern, mit echtem PHP- und SQL-Code angepasst an die PrestaShop-Architektur.
Die 3 Core Web Vitals 2026 und ihre Schwellenwerte
LCP (Largest Contentful Paint): Zeit von Ladestart bis Rendering des größten sichtbaren Elements. Gut: unter 2,5 s; verbesserungswürdig: 2,5–4 s; schlecht: über 4 s.
INP (Interaction to Next Paint): ersetzte FID im März 2024. Misst die Latenz zwischen Nutzerinteraktion und nächstem sichtbaren Rendering. Gut: unter 200 ms; verbesserungswürdig: 200–500 ms; schlecht: über 500 ms.
CLS (Cumulative Layout Shift): misst unerwartete visuelle Verschiebungen während des Ladens. Gut: unter 0,1; verbesserungswürdig: 0,1–0,25; schlecht: über 0,25.
Richten Sie jetzt Real User Monitoring (RUM) ein: die Google web-vitals-Library integriert sich in wenigen JS-Zeilen und sendet Messungen an GA4 — das Treueste zu dem, was Google sieht.
LCP: Optimierungen, die wirklich funktionieren
1. LCP-Element präzise identifizieren
Die Chrome Web Vitals Extension hebt das LCP-Element in Echtzeit auf jeder Seite hervor. Auf einer PrestaShop-Produktseite ist der LCP fast immer das Hauptproduktbild.
2. LCP-Bild-Vorladen
Ein <link rel="preload"> im Head für das Hauptproduktbild gewinnt 200–500 ms beim LCP. Implementierung im Produkt-Twig-Template:
{if isset($product.cover.bySize.large_default.url)}
<link rel="preload" as="image"
href="{$product.cover.bySize.large_default.url}"
imagesrcset="..." imagesizes="..." fetchpriority="high">
{/if}3. WebP / AVIF Konvertierung mit korrekten Dimensionen
Produktbilder in WebP reduzieren die Größe um 25–35% vs. JPEG bei gleichwertiger visueller Qualität. Prüfen Sie, dass die gelieferten Dimensionen mit der tatsächlichen Anzeigegröße übereinstimmen. Verwenden Sie srcset für verschiedene Viewport-Größen.
4. TTFB und Server-SQL-Abfragen
Aktivieren Sie PrestaShop Profiling (Konfiguration > Performance > Debug + Profiler-Modus aktivieren) und prüfen Sie den Database-Tab. Wenn Sie dieselbe Abfrage 50-mal pro Produktseitenaufruf mit kumulierten 200 ms sehen, ist es wahrscheinlich eine N+1-Abfrage in einem schlecht kodierten Modul.
INP: der moderne Performance-Killer (und der am meisten missverstandene)
INP ersetzte FID im März 2024 und ist jetzt die schwierigste Metrik zur Optimierung auf PrestaShop. FID maß nur die erste Interaktion; INP misst alle Interaktionen und behält das schlimmste 98. Perzentil. Ein einziger langsamer Klick auf einen Kategoriefilter, der 500 ms einfriert, wiegt mehr als 49 schnelle Interaktionen.
1. Langsame Interaktionen identifizieren
Die Chrome Web Vitals Extension zeigt INP in Echtzeit. Klicken Sie überall auf Ihrem Shop (Filter, In-den-Warenkorb, Popups, FAQ-Akkordeons, Produkt-Swiper) und beobachten Sie welche Interaktionen 200 ms überschreiten.
2. Long Tasks und Yield an den Main Thread
async function processProducts(products) {
for (let i = 0; i < products.length; i += 50) {
const chunk = products.slice(i, i + 50);
chunk.forEach(processProduct);
if ('scheduler' in window && 'yield' in scheduler) {
await scheduler.yield();
} else {
await new Promise(r => setTimeout(r, 0));
}
}
}3. Debounce und Throttle auf Inputs
Auf Suchfiltern, Varianten-Selects, Mengen-Inputs: kein AJAX bei jedem Tastendruck auslösen. Debounce von 200–300 ms vor dem Senden der Anfrage.
4. JS Code Splitting und verzögertes Laden
Viele PrestaShop-Module laden ihr JS auf allen Seiten, obwohl sie nur auf einigen benötigt werden. Verwenden Sie $this->context->controller->registerJavascript() mit dem richtigen Controller-Parameter.
CLS: visuelle Stabilität
1. Platz für Bilder reservieren. Jedes Bild im HTML muss explizite width– und height-Attribute haben.
2. Webfonts und FOIT/FOUT. font-display: optional für sekundäre Schriftarten, und font-display: swap mit einem metrisch-kompatiblen Fallback via size-adjust CSS.
3. Verzögerte Banner und Popups. Cookie-Banner, Newsletter-Popups, Top Bars, die 1–3 Sekunden nach dem Laden erscheinen, sind häufige CLS-Quellen. Entweder den Platz von Anfang an in CSS reservieren oder als Overlay (fixed/absolute) erscheinen lassen.
4. Externe iFrames und Embeds. Platz systematisch mit einem aspect-ratio: 16/9 Wrapper reservieren.
SQL- und Datenbankoptimierungen spezifisch für PrestaShop
Wenn der PrestaShop-Profiler eine langsame Abfrage (mehr als 50 ms) aufdeckt, führen Sie sie in MySQL mit EXPLAIN aus. Das destruktivste Muster: N+1-Abfragen in Hooks. Statt einer Abfrage pro Produkt im displayProductMiniature-Hook alle Produkt-IDs via actionProductListBefore sammeln und eine einzige WHERE id_product IN (1, 2, 3, ...) Abfrage machen.
Die Drittanbieter-Modul-Falle
Bei den von uns auditierten Shops kommen 60–80% der CWV-Probleme von schlecht kodierten Drittanbieter-Modulen. Regelmäßig durchzuführendes Audit: alle Drittanbieter-Module deaktivieren und Lighthouse starten → das ist Ihre „reines PrestaShop“-Baseline. Module einzeln reaktivieren und dabei Lighthouse jeweils neu starten. Module, die den Score um mehr als 5 Punkte senken, sind Ihre Übeltäter.
Mehrere Module in unserem Katalog wurden mit diesen Einschränkungen entwickelt, wie das DataFirefly SideCart-Modul und das DataFirefly Cross-Sell-Modul — Thema behandelt in unserem Artikel über Cross-Sell, das zum durchschnittlichen Warenkorbwert beiträgt.
Fazit: laufende Arbeit, kein einmaliges Projekt
Die Core-Web-Vitals-Optimierung auf PrestaShop 8 ist selten eine einmalige Aufgabe. Der richtige Reflex: permanentes Monitoring einrichten (Search Console + RUM via web-vitals.js + GA4) und Metriken routinemäßig prüfen. Für weitere Informationen besuchen Sie unsere Kategorien Performance & Core Web Vitals und PrestaShop-Tutorials.
Ebenfalls lesenswert: der vollständige Core-Web-Vitals-Leitfaden und Cache, Critical CSS und Next-Gen-Bilder.
Zum Umsetzen: unsere Auswahl an Modulen, um Ihren PrestaShop-Shop zu beschleunigen.
