In de sectie Mogelijkheden van uw Lighthouse-rapport worden alle belangrijke verzoeken vermeld die nog geen prioriteit geven aan ophaalverzoeken met <link rel=preconnect> :
Browsercompatibiliteit
<link rel=preconnect> wordt door de meeste browsers ondersteund. Zie Browsercompatibiliteit .
Verbeter de laadsnelheid van de pagina met preconnect
Overweeg het toevoegen van preconnect of dns-prefetch resourcehints om vroege verbindingen tot stand te brengen met belangrijke bronnen van derden.
<link rel="preconnect"> informeert de browser dat uw pagina van plan is een verbinding tot stand te brengen met een andere oorsprong, en dat u wilt dat het proces zo snel mogelijk start.
Het tot stand brengen van verbindingen vergt vaak veel tijd in langzame netwerken, vooral als het gaat om beveiligde verbindingen, omdat het DNS-lookups, omleidingen en verschillende retourtrips naar de uiteindelijke server kan inhouden die het verzoek van de gebruiker afhandelt.
Als u dit allemaal van tevoren regelt, kan uw toepassing voor de gebruiker veel vlotter aanvoelen, zonder dat dit een negatieve invloed heeft op het bandbreedtegebruik. Het grootste deel van de tijd bij het tot stand brengen van een verbinding wordt besteed aan wachten, in plaats van aan het uitwisselen van gegevens.
Het informeren van de browser over uw bedoeling is net zo eenvoudig als het toevoegen van een linktag aan uw pagina:
<link rel="preconnect" href="https://example.com">
Hierdoor weet de browser dat de pagina verbinding wil maken met example.com en daar inhoud wil ophalen.
Houd er rekening mee dat hoewel <link rel="preconnect"> behoorlijk goedkoop is, het nog steeds waardevolle CPU-tijd in beslag kan nemen, vooral bij beveiligde verbindingen. Dit is vooral erg als de verbinding niet binnen 10 seconden wordt gebruikt, omdat de browser deze sluit, waardoor al het vroege verbindingswerk wordt verspild.
Probeer in het algemeen <link rel="preload"> te gebruiken, omdat dit een uitgebreidere prestatieaanpassing is, maar bewaar <link rel="preconnect"> in uw gereedschapsriem voor de randgevallen zoals:
- Gebruiksscenario: weten waar u vandaan komt, maar niet wat u ophaalt
- Gebruiksscenario: streaming media
<link rel="dns-prefetch"> is een ander <link> -type gerelateerd aan verbindingen. Dit verwerkt alleen de DNS-lookup, maar het heeft bredere browserondersteuning, dus het kan als een leuke terugval dienen. Je gebruikt het op precies dezelfde manier:
<link rel="dns-prefetch" href="https://example.com" />.
Stapelspecifieke begeleiding
Drupal
Preconnect of dns-prefetch bronhints kunnen worden toegevoegd door een module te installeren en te configureren die faciliteiten biedt voor bronhints voor user-agents.
Magento
Wijzig de lay-out van uw thema's en voeg preconnect- of DNS-prefetch-resourcehints toe.