Berichte und Recherche zu Shopify und E-Commerce
Largest Contentful Paint ist der Core Web Vital, an dem Shopify-Stores am sichtbarsten scheitern, und unser eigenes Audit zeigt, warum: Bei 15 offiziellen Theme-Demos kam der erste Paint nach etwa 2 bis 5 Sekunden, dann warteten Kunden bis zu 13.9 weitere Sekunden auf das Hero-Medium. Hier ist der Mechanismus und die Liste der Fixes, mit Zahlen.
Largest Contentful Paint misst einen einzigen Moment: wann das größte sichtbare Element auf dem ersten Bildschirm fertig gerendert ist. In einem Shopify-Store ist dieses Element fast immer das Hero-Bild, das erste Produktfoto oder das Poster-Frame eines automatisch abspielenden Videos, und genau deshalb fallen die Shopify-LCP-Werte durch. Die Server der Plattform antworten schnell und das Gerüst des Themes zeichnet früh; dann starrt der Kunde auf ein Skelett, während sich Megabytes an Hero-Medien über eine mobile Verbindung schleppen.
Unsere eigenen Daten machen den Mechanismus sichtbar. Am 14. Juli 2026 haben wir 45 Lighthouse-Audits über 15 offizielle Theme-Demos durchgeführt, und die interessante Zahl ist nicht der LCP selbst, sondern der Abstand zwischen First Contentful Paint und LCP. FCP ist das Eintreffen des Gerüsts; die Lücke von FCP zu LCP ist das Hero-Medium, das alle warten lässt.
| Theme-Demo | FCP | LCP | Lücke (Warten auf Hero) |
|---|---|---|---|
| Ultra | 1.91s | 1.91s | 0.0s |
| Boutique | 2.20s | 3.67s | 1.5s |
| Symmetry | 1.53s | 6.33s | 4.8s |
| Impression | 5.22s | 12.19s | 7.0s |
| Horizon | 3.57s | 12.32s | 8.8s |
| Motion | 1.88s | 15.78s | 13.9s |
Lesen Sie die Zeile von Motion noch einmal: erster Paint nach 1.88 Sekunden, schneller als fast alles, was wir getestet haben, dann 13.9 Sekunden Warten auf das Hero. Der Code des Themes ist nicht der Engpass; die Medienstrategie ist es. Horizon erzählt die gleiche Geschichte aus einem anderen Winkel: Die Total Blocking Time lag bei 29ms, das war eines der besten JavaScript-Verhalten im Audit, neben einem LCP von 12.32 Sekunden. Großartiges Engineering, schwere Präsentation.
Und das Gegenbeispiel zeigt, dass die Obergrenze real ist: In der Demo von Ultra wurde das größte Element zusammen mit dem ersten Paint gerendert, 1.91 Sekunden für beides, die einzige von 15 Demos unter der 2.5-Sekunden-Schwelle von Google. So sieht ein disziplinierter erster Bildschirm in den Daten aus.
1. Wiegen Sie Ihr Hero. Öffnen Sie Ihre Startseite in PageSpeed Insights, klappen Sie die LCP-Diagnose auf und schauen Sie nach, was das LCP-Element tatsächlich ist. Wenn es ein Bild mit 2 bis 4MB oder ein Video ist, ist nichts anderes auf dieser Liste relevant, solange sich das nicht ändert. Exportieren Sie das Hero in der gerenderten Größe, liefern Sie WebP oder AVIF über die image_url-Breitenparameter von Shopify aus und begrenzen Sie die Datei auf etwa 200KB. Wenn das Hero ein automatisch abspielendes Video ist, geben Sie ihm ein leichtes Poster-Frame und lassen Sie das Video nach dem ersten Paint laden, oder verschieben Sie es unter den Fold.
2. Schalten Sie Lazy-Loading beim LCP-Bild ab. Eine verbreitete Shopify-Fehlkonfiguration: Das Theme oder eine App setzt loading="lazy" auf alles, auch auf das erste Hero-Bild, und verzögert damit genau den einen Download, der Ihren Wert bestimmt. Das LCP-Bild sollte eager mit hoher Fetch-Priorität laden; alles unter dem Fold sollte lazy bleiben.
3. Prüfen Sie den App-Stack. Jede installierte App kann Skripte einfügen, die laufen, bevor der Download Ihres Heros beginnt. Deinstallieren Sie, was Sie nicht aktiv nutzen, und prüfen Sie dann den Theme-Code auf verwaiste Script-Tags, die Apps hinterlassen haben. Shopifys eigene Performance-Dokumentation nennt App-Gewicht als einen der wichtigsten Faktoren für Theme-Geschwindigkeit.
4. Entschlacken Sie den ersten Bildschirm. Slideshows mit fünf Slides à 2MB, animierte Ankündigungsleisten, Chat-Widgets, die sofort starten: Jedes davon konkurriert mit dem LCP-Element. Der erste Bildschirm braucht eine Botschaft und ein Bild.
5. Und dann, erst dann, denken Sie über das Theme nach. Die Theme-Wahl bestimmt Ihre Obergrenze. Wir haben zwischen der schnellsten und der langsamsten Demo im selben Store und unter identischen Bedingungen eine Spanne von 8x gemessen, und der Unterschied war vor allem Disziplin: wie viel der erste Bildschirm des Themes im Standard mitschleppt. Wenn Sie schon nach einem Ersatz suchen, ist unser vollständiges Ranking von 15 gemessenen Demos der richtige Startpunkt, und der Anbieter, dessen Demo es anführte, UTD, listet hier alle seine Themes auf. Aber ein Theme-Wechsel bei einem 3MB schweren Hero verschiebt dasselbe Problem nur in eine schönere Typografie.
Messen Sie vorher und nachher, jedes Mal auf dieselbe Weise. Lighthouse in den Chrome DevTools oder PageSpeed Insights, mobiles Profil, drei Durchläufe, Median nehmen, weil einzelne Durchläufe schwanken. Achten Sie auf zwei Zahlen: den LCP selbst und die Lücke von FCP zu LCP aus der Grafik oben. Wenn Ihre Fixes wirken, schrumpft zuerst die Lücke zusammen, und das ist Ihr Signal, dass das Hero endlich mit der Seite eintrifft statt nach ihr. Echte Nutzerdaten im Core-Web-Vitals-Bericht der Search Console folgen innerhalb einiger Wochen, da Google den LCP anhand von Felddaten bewertet, nicht anhand von Laborläufen.
Fast immer, weil das größte Element above the fold ein schweres Hero-Bild oder ein automatisch abspielendes Video ist, dessen Download spät beginnt. Unsere Audit-Daten zeigen das Muster deutlich: Demos mit schnellem erstem Paint erreichten trotzdem LCP-Werte von 8 bis 14 Sekunden, wenn das Hero-Medium schwer war. Apps, die renderblockierende Skripte einfügen, verschieben den Start dieses Downloads noch weiter nach hinten.
Die Schwellenwerte von Google: unter 2.5 Sekunden gut, über 4 Sekunden schlecht, gemessen bei echten Nutzern auf Mobilgeräten. Zum Vergleich: Von den 15 offiziellen Theme-Demos, die wir unter simulierter mobiler Drosselung geprüft haben, lag nur 1 unter 2.5 Sekunden.
Das kann sein, und es ist die eine Speed-Entscheidung, die Sie nur einmal treffen. Wir haben beim medianen mobilen LCP eine Spanne von 8x zwischen der schnellsten Theme-Demo (1.91s) und der langsamsten (15.78s) gemessen. Kümmern Sie sich aber zuerst um Hero-Medium und App-Stack: Ein schnelles Theme mit einem 4MB-Hero scheitert trotzdem.
Ja. Jede App, die ein Skript in Ihr Theme einfügt, konkurriert vor dem ersten Paint mit dem LCP-Bild um Bandbreite und Main-Thread-Zeit. Prüfen Sie Ihre installierten Apps, entfernen Sie, was Sie nicht nutzen, und kontrollieren Sie, ob nach der Deinstallation übrig gebliebene Script-Tags im Theme-Code stehen.