Preload en preconnect
Wat zijn resource hints?
Preload preconnect is een groep resource hints: aanwijzingen waarmee je de browser vooraf laat weten wat hij straks nodig heeft. De browser krijgt een tip om een verbinding alvast te openen of een bestand alvast op te halen, nog voordat hij het zelf ontdekt.
Er zijn meerdere soorten. Met preconnect opent de browser alvast een verbinding met een andere server. Met preload haalt hij een bestand dat hij zeker nodig heeft al vroeg op. Met prefetch haalt hij een bestand op voor een volgende pagina, wanneer hij tijd over heeft.
Wanneer helpen ze?
Preconnect is nuttig voor bronnen van een andere server die je direct nodig hebt, zoals een lettertype van een externe dienst. De browser hoeft dan niet te wachten tot de verbinding is opgebouwd. Lees bij webfonts en laadsnelheid waarom lettertypen soms laat worden ontdekt.
Preload is zinvol voor een bestand dat pas laat wordt ontdekt, zoals een lettertype dat in de stylesheet staat, of het grootste beeld van de pagina. Dat beeld bepaalt vaak de LCP, en daar kan een hint dus verschil maken.
Waarom te veel hints averechts werken
Een hint is geen gratis winst. Elke preload vraagt de browser om bandbreedte en voorrang. Als je tien bestanden tegelijk preloadt, krijgt het belangrijkste bestand juist minder ruimte. Een verbinding naar een server die je nauwelijks gebruikt, kost ook tijd. Zo'n verbinding wordt na verloop van tijd weer gesloten, en dan heb je niets gewonnen.
Gebruik preload daarom alleen voor weinig, echt belangrijke bestanden. Controleer met de ontwikkelaarstools van je browser of de hints ook worden gebruikt. Een preload die niet wordt gebruikt, geeft vaak een waarschuwing in de console.
Veelgestelde vragen
Is dns-prefetch hetzelfde als preconnect?
Nee. Met dns-prefetch lost de browser alleen de domeinnaam alvast op. Preconnect gaat een stap verder, want dan wordt ook de verbinding opgezet. Gebruik dns-prefetch als lichte variant voor domeinen die je later misschien nodig hebt. Voor een domein dat je meteen gebruikt, is preconnect meestal de betere keuze.
Helpt preload bij elke pagina?
Nee. Preload is bedoeld voor een bestand dat op een pagina zeker nodig is en dat de browser anders laat ontdekt. Voor een tekstpagina zonder grote beelden of extra lettertypen heb je er weinig aan. Meet eerst waar de tijd verloren gaat, en voeg dan gericht een hint toe.