Wat is de 'Avoid Chaining Critical Requests' waarschuwing?

Wat is de Avoid Chaining Critical Requests waarschuwing in Lighthouse? Lighthouse kijkt naar de prioriteit van de geladen bronnen. De Critical Request Chain geeft aan welke bronnen met een Hoge Prioriteit geladen moeten worden voordat de browser de pagina kan renderen.

Lees hier meer over in ons artikel over de Critical Request Chain.

Hoe beïnvloedt 'Chaining Critical Requests' de pagespeed?

Wanneer een browser een pagina laadt, bouwt deze een DOM boom (Document Object Model) van alle HTML elementen. Daarna worden de CSS stijlen toegevoegd via de CSSOM (CSS Object Model). Tot slot wordt de Render Tree gebouwd die bepaalt wat er op het scherm getoond moet worden.

Als een browser een script of stylesheet tegenkomt met een hoge prioriteit, pauzeert de browser het renderen (en dus het laden van de pagina) om die bron op te halen en uit te voeren. Dit blokkeert het renderen van de pagina en vertraagt dus de laadtijd (First Contentful Paint).

Hoe meer afhankelijke stappen in deze keten, hoe langer het duurt voordat de pagina getoond kan worden. Stel je voor: Je laadt een CSS bestand, dat een font laadt, dat een afbeelding laadt. De browser moet wachten op het CSS bestand, dan op het font en dan op de afbeelding.

Hoe los je 'Avoid Chaining Critical Requests' op?

Om de 'Avoid Chaining Critical Requests' waarschuwing op te lossen moet je eerst de ketens identificeren. Lighthouse toont je precies welke bronnen deel uitmaken van de keten en hoeveel tijd ze in beslag nemen.

Er zijn een aantal strategieën om dit aan te pakken:

• Minimaliseer het aantal kritieke bronnen: Verwijder ze, stel ze uit (defer/async) of markeer ze als niet-kritiek.
• Optimaliseer de kritieke bronnen: Verklein de grootte (minify) en comprimeer ze (gzip/brotli).
• Laad kritieke bronnen eerder: Gebruik <link rel="preload"> om belangrijke bronnen eerder op te halen.
• Verkort de ketens: Probeer afhankelijkheden te vermijden. In plaats van @import in CSS te gebruiken (wat een keten creëert), link direct naar de stylesheet in de HTML.

Hier zijn enkele specifieke tips:

Gebruik 'defer' en 'async' attributen voor scripts

Voor scripts die niet direct nodig zijn voor het renderen van de initiële weergave, gebruik defer of async. Dit zorgt ervoor dat het laden van de script het renderen niet blokkeert.

Optimaliseer het laden van fonts

Fonts zijn vaak onderdeel van kritieke ketens. Gebruik font-display: swap; om tekst direct zichtbaar te maken, zelfs als het lettertype nog niet geladen is.

Vermijd @import in CSS

Gebruik geen @import in je CSS bestanden. Dit forceert de browser om het eerste CSS bestand te downloaden en te parsen voordat het de geïmporteerde bestanden kan vinden, wat een vertragende keten creëert.