Föranslutningsursprung

Silktide kontrollerar om din sida skulle kunna läsas in snabbare genom att i förväg tala om för webbläsaren vilka andra servrar den snart kommer att behöva. Genom att öppna anslutningarna tidigt börjar filer från tredje part laddas ned tidigare.

Innan en webbläsare kan ladda ned något från en ny server – en typtjänst, ett eller en Analytics-leverantör – måste den slå upp serverns adress, öppna en anslutning och förhandla om kryptering. Den konfigurationen kräver flera nätverksresor, och normalt börjar webbläsaren inte med detta förrän den först upptäcker en fil som den behöver från servern. Det kan ske sent under sidinläsningen.

Varför detta är viktigt

Det kan kosta hundratals millisekunder att upprätta en anslutning till en enda server via en mobilanslutning, och en typisk sida kommunicerar med flera servrar från tredje part. När den konfigurationen startar sent – eftersom filen som behöver den refereras till långt ned i ett stilmall- eller skript – hamnar fördröjningen direkt på synligt innehåll som typsnitt och bilder.

En föranslutningsanvisning flyttar den här kostnaden till början av inläsningen, där den överlappar med arbete som webbläsaren ändå utförde. Det är en rad per server, utan någon visuell förändring av sidan.

Så åtgärdar du problemet

Lägg till en preconnect-anvisning i sidans <head> för varje viktig server som kontrollen rapporterar:

<!-- Öppna anslutningen innan webbläsaren upptäcker att den behöver en -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Inkludera attributet crossorigin för servrar som behöver det – typsnitt behöver det alltid.
Föranslut endast till servrar som är viktiga för det synliga innehållet på sidan, till exempel där dina typsnitt, bilder eller kritiska skript finns. Varje öppen anslutning använder resurser på besökarens enhet, så ett fåtal anvisningar hjälper medan dussintals gör saken sämre.
För mindre viktiga servrar är rel="dns-prefetch" en billigare anvisning som endast utför adressuppslagningen i förväg.

Så testar Silktide detta

Läs in sidan i en riktig webbläsare med den enhetstyp, anslutningshastighet och testplats som har konfigurerats för dina hastighetstester.
Identifiera de servrar som sidan laddar ned från, där anslutningskonfigurationen fördröjde nedladdningen och ingen tidig anslutningsanvisning fanns på plats.
Rapportera varje server tillsammans med den uppskattade tid som en föranslutningsanvisning skulle spara.
Bedöm sidan utifrån den totala uppskattade besparingen: omkring 100 millisekunder ger ett lägre betyg, och 200 millisekunder eller mer bedöms som dåligt.

Felsökning

Jag lade till anvisningen, men resultatet kvarstår

Kontrollera den exakta adressen: anvisningen måste matcha servern som filerna faktiskt kommer från, inklusive protokollet och eventuell underdomän (https://fonts.gstatic.com är inte https://fonts.googleapis.com). Typsnitt behöver också crossorigin på anvisningen – utan det öppnar webbläsaren fel typ av anslutning och kasserar den sedan.

Bör jag föransluta till alla servrar från tredje part?

Nej. Webbläsare begränsar hur många tidiga anslutningar de godkänner, och varje anslutning använder resurser på besökarens enhet. Använd föranslutning för de få servrar vars filer påverkar det som besökarna ser först.