Doorlinken van kritieke verzoeken voorkomen

Iedereen zal weleens zijn opgevallen dat bij de Google pagespeed test er een aanbeveling is met de melding “Doorlinken van kritieke verzoeken voorkomen”. En natuurlijk heeft iedereen zich afgevraagd wat dat nou precies is. En nog meer hoe je dit kan oplossen en verbeteren.

Voor Web Vitals is de vloed van dit probleem voor de FCP (First Contentful Paint) en LCP (Largest Contentful Paint) die samen 35% van je page speed score bepalen. Dit heeft te maken met het laden door de vertraging die het kan veroorzaken. Een belangrijk punt om te verbeteren voor SEO.

Om dit te kunnen oplossen is het belangrijk eerst te weten wat bedoeld wordt met “Doorlinken van kritieke verzoeken”. Sommige files zoals CSS en JavaScript files bevat code om weer andere files te laden. Dus je moet eerst een bestand laden. Als dit bestand is geladen kan die uitgevoerd worden. Dat is helaas niet helemaal waar altijd. Als er namelijk in dat bestand een ander bestand geladen moet worden dan moet deze eerst worden geladen voordat het hoofdbestand uitgevoerd kan worden. Dit kan voor veel vertraging zorgen.

Doorlinken van kritieke verzoeken voorkomen

In “Laad belangrijke verzoeken vooraf” wordt uitgelegd hoe deze kritieke verzoeken vooraf geladen kunnen worden. Op die manier wordt de vertraging voorkomen maar het doorlinken niet. Met andere worden de kritieke verzoeken die je kan verwijderen hoef je dan niet meer vooraf te laden.

We nemen het zelfde voorbeeld met een CSS file dat gebruik maakt van @font-face. Dit ziet er ongeveer als volgt uit.

@font-face {
    font-family: "Open Sans";
    src: url("./fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("./fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Binnen de file wordt een lettertype geladen. Met preload kan dit vooraf geladen worden zoals omschreven in “Laad belangrijke verzoeken vooraf“.

Belangrijkste is om vooraf te kijken wat echt nodig is en wat niet. Wat niet wordt gebruikt kan het best direct verwijderd worden. Door de extra files niet te laden zal dit direct een winst zijn voor page speed en Web Vitals.Probleem is dat lettertypen alleen via de CSS file geladen kan worden en niet als inline CSS. Dus het is belangrijk eerst zoveel mogelijk te verwijderen. De rest kan je dan het best laden met preload en async zoals omschreven in “Laad belangrijke verzoeken vooraf“.

Google Fonts

Voor wie gebruik maakt van Google Fonts zal gezien hebben dat de link die je krijgt ook een css-file is. In deze file wordt ook gebruik gemaakt van @font-face. Zelfde verhaal als hierboven. Alleen hebben we hier nog iets achter de hand.

Als je naar op Google fonts een lettertype kiest bedenk dan goed dat je alleen kiest voor de stylen die je echt nodig hebt en gebruikt. Dus kies nooit meer dan nodig is. Op die manier voorkom je dat extra files worden geladen die niet nodig zijn.

Hier gaat het dus voornamelijk om het beperken van de kritieke verzoeken, de rest kunnen we alleen sneller maken door de lettertypen vooraf te laden met preload en async.