Optimaliseren van Largest Contentful Paint: Lazy vs. Eager Loading

ebprestatie-optimalisatie is sterk verbeterd, vooral in hoe we het laden van afbeeldingen aanpakken. Een van de belangrijkste metrics in moderne webprestaties is Largest Contentful Paint (LCP), die meet hoe lang het duurt voordat het grootste zichtbare element (vaak een afbeelding of tekstblok) laadt en weergegeven wordt. Het optimaliseren van LCP is cruciaal voor een snelle en soepele gebruikerservaring.

De evolutie van afbeeldingen laden

Vroeger hadden browsers volledige controle over hoe ze bronnen prioriteerden en downloadden. Ontwikkelaars hadden weinig invloed op of een afbeelding direct of later geladen werd. Dit leidde tot verschillende lazy loading-plugins, die het laden van afbeeldingen buiten het scherm uitstelden om de initiële paginasnelheid te verbeteren.

Het handmatig beheren van lazy loading vereiste echter vaak extra JavaScript, wat soms vertragingen of conflicten met browserheuristieken veroorzaakte. Gelukkig introduceerden moderne browsers het loading-attribuut voor afbeeldingen, waardoor ontwikkelaars het laadgedrag direct kunnen specificeren:

<img src="image.jpg" loading="lazy" alt="Example image">


Shopware en standaard lazy loading

Shopware heeft lazy loading standaard geïmplementeerd voor:

• CMS-elementen met afbeeldingen
• Media-elementen in de productlijst

Dit betekent dat de meeste afbeeldingen in Shopware-winkels standaard lazy geladen worden, wat de initiële laadtijd en bandbreedteverbruik vermindert.

Het probleem: LCP elementen horen niet 'lazy loaded' te zijn

Hoewel lazy loading in veel gevallen helpt, kan het LCP negatief beïnvloeden als het verkeerd wordt toegepast. Het LCP-element—vaak de hero-afbeelding of hoofdproductafbeelding—moet niet worden uitgesteld, omdat dit de waargenomen paginasnelheid vertraagt.

Om LCP te optimaliseren, moeten afbeeldingen die waarschijnlijk het grootste zichtbare element zijn expliciet op eager laden worden gezet:

<img src="hero-image.jpg" loading="eager" alt="Hero Image">


Een eenvoudige oplossing: configureerbare eager loading plugin

Om LCP-optimalisatie eenvoudiger te maken, hebben we een Shopware-plugin ontwikkeld waarmee je het loading="eager"-attribuut kunt instellen voor cms-element-image. Met deze plugin kun je het laadgedrag van de belangrijkste afbeeldingen aanpassen zonder templates handmatig te wijzigen, zodat cruciale afbeeldingen zo snel mogelijk laden.

Combineer met instant navigation voor een snellere LCP

Naast eager loading kun je LCP verder verbeteren met onze Instant Navigation Plugin. Deze plugin preloadt de LCP-bron van een pagina, zodat de browser weet dat deze media essentieel is voor de weergave. Hierdoor kan de browser de afbeelding nog beter prioriteren, wat bijna directe weergave mogelijk maakt.

Actieplan: verourderde lazy loading plugins verwijderen en LCP optimaliseren

1. Controleer je website op verouderde lazy loading plugins

• Oude plugins zijn mogelijk overbodig of zelfs schadelijk, omdat Shopware al standaard lazy loading ondersteunt.

2. Zorg dat cruciale LCP-afbeeldingen 'eager laden'

• Identificeer de grootste afbeeldingen op belangrijke pagina’s (homepage, productpagina’s).
• Gebruik onze Eager Loading Plugin om loading="eager" in te stellen.

3. Gebruik instant navigation voor preloading

• Preload de LCP-afbeelding van de volgende pagina voor snellere navigatie.

4. Test en monitor de prestaties

• Gebruik Google PageSpeed Insights of Lighthouse om LCP-scores te analyseren.
• Controleer het laadgedrag in Chrome DevTools (Performance tab)
• Zorg ervoor dat eager-loaded afbeeldingen vroegtijdig gedownload worden

Conclusie

LCP-optimalisatie is essentieel voor webprestaties. Hoewel lazy loading helpt, moet het niet worden toegepast op cruciale afbeeldingen. Met Shopware’s standaard lazy loading moeten we:

• Verouderde plugins verwijderen.
• LCP-afbeeldingen op eager zetten (handmatig of via onze eager loading plugin).
• Instant Navigation gebruiken voor preloading.

Door deze aanpassingen bereiken Shopware-winkels snellere laadtijden, een betere gebruikerservaring en hogere SEO-scores.

Hulp nodig?

Wil je meer weten? Neem contact op – ik help je graag!