Wat doe je als CSS en lettertypen het tonen van je LCP blokkeren?

De afbeelding kan geladen zijn en toch nog niet in beeld staan, omdat de browser eerst de opmaak moet verwerken. CSS is standaard renderblokkerend: zolang die niet binnen is, tekent de browser niets.

Lettertypen doen iets vergelijkbaars. Is je LCP-element een tekstblok en moet het lettertype nog geladen worden, dan blijft de tekst onzichtbaar tot dat gebeurd is.

Wat helpt: de opmaak die nodig is voor het bovenste deel van de pagina direct in de HTML zetten en de rest apart laden, lettertypen vooraf laden en instellen met font-display swap, en niet-kritieke stylesheets uitstellen. Kijk ook naar scripts van derden: cookiebanners en chatwidgets staan vaak vooraan in de rij terwijl ze daar niets te zoeken hebben.