Belangrijke verzoeken vooraf laden (preload)

Belangrijke verzoeken vooraf laden, in de praktijk bekend als preload, betekent dat je de browser vertelt welke bestanden hij met voorrang moet ophalen voordat hij ze zelf in de code tegenkomt. Het is een aanbeveling die PageSpeed Insights geeft wanneer een bestand dat bepalend is voor de eerste weergave te laat in de wachtrij belandt.

Waarom een browser te laat begint

Een browser leest je HTML van boven naar beneden. Komt hij een stylesheet tegen, dan haalt hij die op. Staat er in die stylesheet een verwijzing naar een lettertype, dan wordt dat lettertype pas ontdekt nadat de CSS is gedownload en verwerkt. Diezelfde vertraging krijg je bij een hero-afbeelding die via CSS wordt ingeladen, of bij een script dat een tweede script ophaalt. Zo’n keten heet een request chain, en elke schakel kost honderden milliseconden.

Met <link rel=”preload”> in de head zet je zo’n bestand direct in de wachtrij, ongeacht waar het in de code opduikt. De browser hoeft niet meer te wachten tot hij het toevallig tegenkomt.

Wat je wel en niet preloadt

Preload alleen bestanden die je bij de eerste weergave echt nodig hebt. In de praktijk zijn dat er weinig: het lettertype dat je in je koppen gebruikt, de hero-afbeelding boven de vouw, en soms een klein stuk kritieke CSS. Alles wat pas bij scrollen of bij interactie nodig is, hoort er niet bij.

Een voorbeeld: een site met een grote koptekst in een custom webfont toonde eerst een systeemlettertype en wisselde na een seconde. Dat leverde een zichtbare sprong op en een slechte score voor layoutverschuiving. Door dat ene woff2-bestand te preloaden en font-display: swap te gebruiken, verdween de sprong en zakte de gemeten laadtijd merkbaar.

Waar het misgaat

Preloaden is geen knop die je overal aanzet. Wie tien bestanden preloadt, laat ze allemaal om dezelfde bandbreedte vechten en maakt het langzamer in plaats van sneller. Preload je een bestand dat de pagina helemaal niet gebruikt, dan waarschuwt de browser in de console dat het onnodig is opgehaald.

Let ook op het crossorigin-attribuut bij lettertypen. Vergeet je dat, dan haalt de browser het bestand twee keer op: een keer voor de preload en een keer voor het echte gebruik. Dat is precies het tegenovergestelde van wat je wilde.