Dein Server ist schnell – deine WooCommerce-Seite trotzdem langsam
Du hast in einen schnellen Server investiert. Gutes Hosting, genug RAM, vielleicht sogar ein CDN. Und dann läufst du deinen Shop durch PageSpeed Insights – und der Mobile-Score ist trotzdem rot. 23. 31. Largest Contentful Paint bei 8,9 Sekunden.
Das fühlt sich falsch an. Server schnell, Seite langsam. Wie passt das zusammen?
In den allermeisten WooCommerce-Shops, die ich auf den Tisch bekomme, liegt es an einer einzigen Sache – und sie hat nichts mit deinem Server zu tun.
Der eigentliche Schuldige: dein Hero-Bild lädt „lazy"
Der Wert, der deinen Mobile-Score nach unten zieht, heißt LCP – Largest Contentful Paint. Das ist die Zeit, bis das größte sichtbare Element geladen ist. Bei einem Shop ist das fast immer das Hero-Bild ganz oben: der Banner, das Key-Visual, das erste Produktbild.
Und genau dieses Bild wird in fast jedem WordPress-Setup lazy geladen – also bewusst verzögert, bis der Browser „glaubt", es zu brauchen. Lazy-Loading ist großartig für die 30 Bilder unter dem Sichtbereich. Aber für das Bild, das der Nutzer sofort sieht, ist es Gift: Der Browser stellt das wichtigste Bild hinten an, wartet, lädt es spät – und dein LCP explodiert.
Das Tragische: Du hast es dir wahrscheinlich selbst eingebaut. WordPress lazy-loaded seit 5.5 automatisch alle Bilder. Und dein Speed-Plugin (WP Rocket, Perfmatters, LiteSpeed Cache, Autoptimize …) legt nochmal eins drauf und lazy-loaded alles. Auch den Hero.
Der Fix: das oberste Bild „eager" laden und vorrangig behandeln
Die Lösung ist nicht „Lazy-Loading abschalten". Sie lautet: Nimm genau das eine Bild über der Falz vom Lazy-Loading aus und sag dem Browser, dass es wichtig ist.
Technisch sind das zwei Zeilen:
<!-- Hero NICHT lazy laden, sondern sofort + mit hoher Priorität -->
<img src="hero.webp" fetchpriority="high" loading="eager" alt="…">
<!-- Und vorab anfordern, bevor der Browser das HTML überhaupt fertig liest -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
fetchpriority="high" sagt dem Browser: Dieses Bild zuerst. loading="eager" verhindert das Lazy-Loading. Das <link rel="preload"> im <head> startet den Download, noch bevor das <img> im Markup erreicht ist. Zusammen ziehen sie deinen LCP typischerweise von 6–9 Sekunden auf unter 2 – am selben Server, mit denselben Bildern.
Die komplette Fix-Liste für WooCommerce / WordPress
- Finde dein LCP-Element. PageSpeed Insights zeigt es unter „Largest Contentful Paint element" direkt an. Meist: Hero-Banner oder erstes Produktbild.
- Nimm den Hero vom Lazy-Loading aus. In Perfmatters: Lazy Load → Exclude. In WP Rocket: LazyLoad → Excluded images/iframes. Trag den Dateinamen oder die CSS-Klasse des Hero-Bildes ein.
- Setze
fetchpriority="high"auf das Hero-<img>. Viele Themes/Plugins bieten das inzwischen als Schalter; sonst per Filter im Theme. - Preload den Hero im
<head>(<link rel="preload" as="image">). WP Rocket und Perfmatters haben dafür ein eigenes „Preload critical images"-Feld. - Liefere ihn als WebP/AVIF in der tatsächlich angezeigten Größe aus – kein 2400px-Bild in einen 800px-Slot quetschen.
- Kein CSS-Hintergrundbild für den Hero. Background-images kann der Browser nicht preloaden. Nimm ein echtes
<img>. - Gegencheck mobil. Immer den Mobile-Wert prüfen, nicht Desktop – Google rankt nach Mobile.
Ein ehrlicher Hinweis: Mit WordPress + WooCommerce ist auf Mobile ~90 die realistische Decke, nicht 100. Das ist völlig okay – grün ist grün. Wer dir 100/100 für einen echten Shop verspricht, hat entweder einen leeren Shop oder schummelt beim Testen.
Warum das wichtiger ist als es klingt
LCP ist ein offizielles Google-Ranking-Signal (Core Web Vitals). Eine langsame erste Sekunde kostet dich nicht nur Rankings, sondern Umsatz: Jede zusätzliche Sekunde Ladezeit senkt die Conversion messbar. Das Schöne an diesem Fix ist, dass er gratis ist – kein neuer Server, kein teureres Hosting. Nur die richtige Lade-Strategie für ein einziges Bild.
Willst du die nächsten Build-it-yourself-Guides – mit allen Stolperfallen? Ich schreibe jede Woche eine Ausgabe darüber, wie ich Shops, Seiten und KI-Workflows wirklich baue. Abonniere den „Built with AI"-Newsletter und verpass keine.
Lieber done-for-you? Wenn dein Shop diesen Fix (und das ganze Speed-Paket – Server-Migration, Core Web Vitals, Custom-Plugins) gemacht haben soll, statt selbst zu basteln: Schreib mir kurz. Das ist genau mein Tagesgeschäft.
Built with AI — der Newsletter
Praxisnahe KI-Tutorials und die Tools, die ich wirklich nutze — direkt in dein Postfach. Kostenlos, ohne Hype.
Über Substack. Jederzeit abbestellbar.