Het gebruik van rel=”preconnect” op te richten netwerk verbindingen begin en het verhogen van prestaties

0
14

Milica Mihajlija:

Het toevoegen van rel=preconnect een <link> informeert de browser die je pagina is van plan om een verbinding te maken naar een ander domein, en dat u wilt het proces te starten zo spoedig mogelijk. Middelen zullen sneller laden omdat het installatie proces reeds voltooid op het moment dat de browser vraagt ze.

De afbeelding in de post heeft een goede baan van het maken van dit een zeer goede keuze voor de prestatie:

Robin heeft een goede baan van de afronding van de informatie op al dit soort dingen een paar jaar terug. Ziet eruit als een best practice op dit moment is het gebruik van deze twee:

<link rel=”preconnect” href=”http://example.com”>
<link rel=”dns-prefetching” href=”http://example.com”>

Voor alle domeinen die niet het belangrijkste domein bent u het laden van het document uit.

Een snelle blik op CSS-Tricks middelen nu, krijg ik:

secure.gravatar.com
statisch.codepen.io
res.cloudinary.com
ad.doubleclick.com
s3.buysellads.com
srv.buysellads.com
www.google-analytics.com

Dat zou extra 14 <link> – tags in de eerste paar pakketten van gegevens op elke aanvraag op deze site. Het klinkt als een perf winnen, maar ik zou willen om dat te testen voordat no-brainer gooien het daar.

Andy Davies heeft een aantal recente experimenten:

Dus wat voor verschil kan preconnect maken?

Ik gebruikt de HTTP-Archief te vinden van een paar van de sites die gebruik maken van Cloudinary voor hun beelden, en testten ze ongewijzigd, en vervolgens met de preconnect script geïnjecteerd. Elke proef bestond uit negen wordt uitgevoerd met Chrome emuleren van een mobiele apparaat, en de Kabel netwerk profiel.

Er is een merkbare een zichtbare verbetering in de eerste site, met de belangrijkste achtergrond afbeelding laden van meer dan een halve seconde sneller (top) dan op het ongewijzigd site (onder).

Dit spul doet me denken aan instant.pagina (die ging gewoon v2), dat is een leuke kleine script die laadt dingen gebaseerd op interacties. Het is nu een browser-extensie (FasterChrome) die ik heb geprobeerd. Ik kan niet zeggen dat ik merk een enorm verschil, maar ik ben bijna altijd op snelle internet verbindingen.