Onderzoek en research over Shopify en e-commerce
Largest Contentful Paint is de Core Web Vital waarop Shopify-winkels het zichtbaarst falen, en onze eigen audit laat zien waarom: bij 15 officiële themademo's verscheen de eerste paint na ongeveer 2 tot 5 seconden, waarna shoppers tot 13.9 seconden extra wachtten op de hero-media. Hier is het mechanisme en de lijst met oplossingen, met cijfers.
Largest Contentful Paint meet één moment: wanneer het grootste zichtbare element op het eerste scherm klaar is met renderen. Op een Shopify-winkel is dat element vrijwel altijd de hero-afbeelding, de eerste productfoto of een posterframe van een automatisch afspelende video, en precies daarom falen Shopify LCP-scores. De servers van het platform reageren snel en de shell van het thema wordt vroeg getekend; daarna staart de shopper naar een skelet terwijl megabytes aan hero-media over een mobiele verbinding kruipen.
Onze eigen data maakt het mechanisme zichtbaar. Op 14 juli 2026 voerden we 45 Lighthouse-audits uit op 15 officiële themademo’s, en het interessante getal is niet de LCP zelf, maar de afstand tussen First Contentful Paint en LCP. FCP is het moment waarop de shell aankomt; het gat tussen FCP en LCP is de hero-media die iedereen laat wachten.
| Themademo | FCP | LCP | Gat (wachten op 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 |
Lees de regel van Motion nog eens: eerste paint in 1.88 seconden, sneller dan bijna alles wat we hebben getest, gevolgd door een wachttijd van 13.9 seconden op de hero. De code van het thema is niet het knelpunt; de mediastrategie is dat wel. Horizon vertelt hetzelfde verhaal vanuit een andere hoek: de total blocking time was 29ms, tot het beste JavaScript-gedrag in de audit, naast een LCP van 12.32 seconden. Uitstekend engineeringwerk, zware etalage.
En het tegenvoorbeeld bewijst dat het plafond reëel is: op de demo van Ultra werd het grootste element samen met de eerste paint gerenderd, 1.91 seconden voor beide, de enige demo van de 15 onder de drempel van 2.5 seconden van Google. Zo ziet een gedisciplineerd eerste scherm eruit in de data.
1. Weeg je hero. Open je homepage in PageSpeed Insights, klap de LCP-diagnose uit en kijk wat het LCP-element werkelijk is. Als het een afbeelding van 2 tot 4MB of een video is, doet niets anders op deze lijst ertoe totdat dat verandert. Exporteer de hero op de weergegeven afmeting, serveer WebP of AVIF via de image_url-breedteparameters van Shopify en houd het bestand rond de 200KB. Is de hero een automatisch afspelende video, geef die dan een licht posterframe en laat de video pas na de eerste paint laden, of verplaats hem naar onder de vouw.
2. Stop met lazy-loading van de LCP-afbeelding. Een veelvoorkomende Shopify-misconfiguratie: het thema of een app past loading="lazy" toe op alles, inclusief de eerste hero-afbeelding, wat precies de ene download vertraagt die je score bepaalt. De LCP-afbeelding moet eager laden met hoge fetch priority; alles onder de vouw blijft lazy.
3. Controleer je app-stack. Elke geïnstalleerde app kan scripts injecteren die draaien voordat je hero begint te downloaden. Verwijder wat je niet actief gebruikt en controleer daarna de themacode op verweesde script tags die apps hebben achtergelaten. Shopify’s eigen performancedocumentatie noemt appgewicht als een primaire factor voor themasnelheid.
4. Snoei het eerste scherm. Slideshows met vijf slides van 2MB, geanimeerde aankondigingsbalken, chatwidgets die meteen opstarten: elk daarvan concurreert met het LCP-element. Het eerste scherm heeft één boodschap en één afbeelding nodig.
5. Overweeg dan, en pas dan, het thema. Je themakeuze bepaalt je plafond. We maten een verschil van 8x tussen de snelste en de traagste demo’s in dezelfde winkel, onder identieke omstandigheden, en het verschil zat vooral in discipline: hoeveel het standaard eerste scherm van het thema meedraagt. Ben je al op zoek naar een vervanger, dan is onze volledige ranglijst van 15 gemeten demo’s het startpunt, en de leverancier wiens demo bovenaan eindigde, UTD, zet al zijn thema’s hier op een rij. Maar een themawissel terwijl je hero 3MB weegt, verplaatst hetzelfde probleem alleen naar mooiere typografie.
Meet vooraf en achteraf, elke keer op dezelfde manier. Lighthouse in Chrome DevTools of PageSpeed Insights, mobiel profiel, drie runs, neem de mediaan, want losse runs schommelen. Let op twee getallen: de LCP zelf, en het gat tussen FCP en LCP uit de grafiek hierboven. Als je aanpassingen werken, stort dat gat als eerste in, en dat is je signaal dat de hero eindelijk met de pagina meekomt in plaats van erna. Data van echte gebruikers in het Core Web Vitals-rapport van Search Console volgt binnen een paar weken, omdat Google LCP beoordeelt op velddata en niet op labruns.
Bijna altijd omdat het grootste element above the fold een zware hero-afbeelding of een automatisch afspelende video is die pas laat begint te downloaden. Onze auditdata laat het patroon duidelijk zien: demo's met een snelle eerste paint noteerden alsnog LCP's van 8 tot 14 seconden wanneer de hero-media zwaar was. Apps die render-blocking scripts injecteren, duwen het startmoment van die download nog verder naar achteren.
De drempelwaarden van Google zijn: onder 2.5 seconden is goed, boven 4 seconden is slecht, gemeten bij echte gebruikers op mobiel. Ter referentie: van de 15 officiële themademo's die we onder gesimuleerde mobiele throttling hebben getest, kwam er slechts 1 onder de 2.5 seconden uit.
Dat kan, en het is de enige snelheidsbeslissing die je één keer neemt. We maten een verschil van 8x in mediane mobiele LCP tussen de snelste themademo (1.91s) en de traagste (15.78s). Maar pak eerst je hero-media en je app-stack aan: een snel thema met een hero van 4MB faalt alsnog.
Ja. Elke app die een script in je thema injecteert, concurreert met de LCP-afbeelding om bandbreedte en main-thread-tijd vóór de eerste paint. Controleer je geïnstalleerde apps, verwijder wat je niet gebruikt en kijk of er na het verwijderen nog script tags in de themacode zijn achtergebleven.