Wat is preconnect? Uitleg en gebruik voor SEO

Definitie

Preconnect is een resource hint waarmee de browser alvast een verbinding opent met een ander domein, zoals een CDN of fontserver. Dat scheelt DNS-, TCP- en TLS-tijd zodra het eerste bestand nodig is.

Wat doet preconnect?

Voordat een browser iets van een ander domein kan ophalen, moet hij drie dingen doen: de DNS opzoeken, een verbinding opzetten en TLS afhandelen. Met <link rel="preconnect"> laat je dat eerder gebeuren, terwijl de browser nog met de HTML bezig is.

Volgens web.dev sluit de browser een ongebruikte verbinding na ongeveer 10 seconden. Preconnect alleen naar domeinen die je echt snel nodig hebt. Te veel preconnects kunnen andere belangrijke bestanden vertragen. Preconnect naar je eigen domein heeft geen effect; die verbinding bestaat al.

Fonts worden in anonieme CORS-modus geladen. Voor een fontdomein heb je daarom het attribuut crossorigin nodig. Zonder dat attribuut doet de browser alleen de DNS-lookup. dns-prefetch is de lichtere variant: alleen DNS. Die is geschikt voor minder belangrijke domeinen. Zet beide hints in aparte <link>-tags; web.dev noemt een bug in Safari als je ze combineert.

Zo werkt het in Magento/Hyvä, Shopify en Laravel

In Magento voeg je preconnect toe via layout-XML of een template in de <head>. Typische kandidaten: een media-CDN of een externe fontserver. Serveer je afbeeldingen en fonts vanaf je eigen domein, dan heb je preconnect niet nodig.

Shopify serveert thema-assets en afbeeldingen vanaf het eigen CDN. Veel Shopify-thema's zetten daar zelf al een preconnect voor in theme.liquid. Kijk vooral naar domeinen van apps en tracking die je zelf hebt toegevoegd.

In Laravel zet je de hint in je Blade-layout. Je kunt hem ook als Link-header vanuit middleware sturen; web.dev noemt die HTTP-header als gelijkwaardige optie.

Veelgemaakte fouten

- Preconnect naar tien domeinen. Elke verbinding kost bandbreedte en CPU; houd het bij de paar die het eerste scherm nodig heeft.

- crossorigin vergeten bij fonts. Dan opent de browser later toch een tweede verbinding.

- Preconnect naar een domein dat pas na een klik of na 10 seconden gebruikt wordt. Die verbinding is dan al dicht.

- Preconnect gebruiken waar het probleem ergens anders zit. Self-hosten van fonts of afbeeldingen haalt het extra domein helemaal weg.

Preconnect met dns-prefetch als fallback

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

<!-- Of als HTTP-header -->
Link: <https://cdn.example.com>; rel=preconnect

Verder lezen

Gerelateerde begrippen

Preload en fetchpriority fetchpriority Webfonts CDN (content delivery network)TTFB (Time to First Byte)Third-party scripts LCP (Largest Contentful Paint)

Veelgestelde vragen

Hoeveel preconnects mag ik gebruiken?+

web.dev noemt geen vast aantal, maar waarschuwt dat te veel preconnects andere bestanden vertragen. Beperk je tot de paar domeinen die het eerste scherm echt nodig heeft.

Wat is het verschil tussen preconnect en dns-prefetch?+

Preconnect doet DNS, verbinding en TLS. dns-prefetch doet alleen de DNS-lookup. dns-prefetch is lichter en geschikt voor domeinen die minder belangrijk zijn.

Heeft preconnect zin voor mijn eigen domein?+

Nee. Naar je eigen origin bestaat de verbinding al zodra de HTML binnenkomt. Preconnect is alleen nuttig voor andere domeinen.

Preconnect