Opprinnelser for forhåndstilkobling

Silktide kontrollerer om siden din kunne lastes inn raskere ved å fortelle nettleseren på forhånd hvilke andre servere den snart vil trenge. Når disse tilkoblingene åpnes tidlig, begynner filer fra tredjeparter å lastes ned tidligere.

Før en nettleser kan laste ned noe fra en ny server – en fonttjeneste, et eller en analyseleverandør – må den slå opp serverens adresse, åpne en tilkobling og forhandle om kryptering. Dette oppsettet krever flere rundturer i nettverket, og vanligvis starter nettleseren først når den oppdager en fil den trenger fra serveren. Det kan skje sent under innlastingen av siden.

Hvorfor dette er viktig

Det kan ta flere hundre millisekunder å sette opp en tilkobling til én enkelt server på en mobiltilkobling, og en typisk side kommuniserer med flere tredjepartsservere. Når oppsettet starter sent – fordi filen som trenger det, er referert til langt inne i et stilark eller skript – påvirker forsinkelsen innhold som er synlig, for eksempel fonter og bilder.

Et forhåndstilkoblingshint flytter denne kostnaden til helt i starten av innlastingen, slik at den overlapper med arbeid nettleseren uansett utførte. Det er én linje med per server, uten noen visuell endring av siden.

Slik løser du det

Legg til et preconnect-hint i sidens <head> for hver viktig server kontrollen rapporterer:

<!-- Åpne tilkoblingen før nettleseren oppdager at den trenger en -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Ta med attributtet crossorigin for servere som trenger det – fonter gjør alltid det.
Forhåndskoble bare til servere som er viktige for det synlige innholdet på siden, for eksempel der fontene, bildene eller de kritiske skriptene dine ligger. Hver åpen tilkobling bruker ressurser på den besøkendes enhet, så noen få hint hjelper, mens dusinvis gjør skade.
For mindre viktige servere er rel="dns-prefetch" et rimeligere hint som bare utfører adresseoppslaget på forhånd.

Slik tester Silktide dette

Last inn siden i en ekte nettleser ved å bruke enhetstype, tilkoblingshastighet og teststedet som er konfigurert for hastighetstestene dine.
Identifiser serverne siden laster ned fra, der oppsettet av tilkoblingen forsinket nedlastingen og det ikke fantes noe hint om tidlig tilkobling.
Rapporter hver server sammen med den estimerte tiden et forhåndstilkoblingshint ville spart.
Gi siden karakter basert på den totale estimerte besparelsen: rundt 100 millisekunder gir lavere karakter, mens 200 millisekunder eller mer regnes som dårlig.

Feilsøking

Jeg la til hintet, men funnet vises fortsatt

Kontroller den nøyaktige adressen: Hintet må samsvare med serveren filene faktisk kommer fra, inkludert protokollen og eventuelle underdomener (https://fonts.gstatic.com er ikke https://fonts.googleapis.com). Fonter trenger også crossorigin på hintet – uten dette åpner nettleseren feil type tilkobling og forkaster den deretter.

Bør jeg forhåndskoble til alle tredjepartsservere?

Nei. Nettlesere begrenser hvor mange tidlige tilkoblinger de godtar, og hver av dem bruker ressurser på den besøkendes enhet. Begrens forhåndstilkobling til de få serverne som leverer filer som påvirker det besøkende ser først.