Lazy loaded afbeeldingen above the fold LCP

Pagina: 1
Acties:

Vraag


Acties:
  • 0 Henk 'm!

  • egonolieux
  • Registratie: Mei 2009
  • Laatst online: 06-01-2024

egonolieux

Professionele prutser

Topicstarter
Ik heb een website met een grid van images die lazy geload worden (loading="lazy"). Het probleem is dat dit voor een hoge LCP in Google Lighthouse zorgt. Ik weet dat het aanbevolen is afbeeldingen above the fold eager te loaden, maar aangezien mijn grid van afbeeldingen responsive is en geen vast aantal rijen/kolommen heeft (en daarbovenop ook nog eens de grootte van de afbeeldingen verandert), zie ik niet echt in hoe ik dit best kan oplossen.

Misschien dat ik met JavaScript kan checken of een afbeelding in de viewport zit, maar dan moet natuurlijk wel verhinderd worden dat de afbeeldingen niet vóór JavaScript geladen worden.

Alle reacties


Acties:
  • 0 Henk 'm!

  • denkeroverna
  • Registratie: Mei 2022
  • Laatst online: 03-04 23:55
https://developer.mozilla...Intersection_Observer_API Bedoel je zoiets?

Onlangs dit nog gebruikt, src op de image word data-src oid, zodra de image op jouw treshhold zit word de data-src vervangen door src.