Preconnect-oprindelser

Silktide tjekker, om din side kan indlæses hurtigere ved på forhånd at fortælle browseren, hvilke andre servere den snart får brug for. Hvis disse forbindelser åbnes tidligt, begynder filer fra tredjeparter at blive downloadet tidligere.

Før en browser kan downloade noget fra en ny server – en skrifttjeneste, et eller en analyseudbyder – skal den slå serverens adresse op, åbne en forbindelse og forhandle kryptering. Denne opsætning kræver flere netværksrundture, og normalt starter browseren først processen, når den opdager en fil, den har brug for fra den pågældende server. Det kan ske sent i sideindlæsningen.

Hvorfor det er vigtigt

Opsætning af en forbindelse til én server kan koste flere hundrede millisekunder på en mobilforbindelse, og en typisk side kommunikerer med flere tredjepartsservere. Når opsætningen starter sent – fordi filen, der har brug for den, er refereret dybt i et typografiark eller script – påvirker forsinkelsen direkte synligt indhold såsom skrifttyper og billeder.

Et preconnect-hint flytter denne omkostning til starten af indlæsningen, hvor den overlapper med arbejde, som browseren alligevel udførte. Det er én linje pr. server, uden nogen visuel ændring af siden.

Sådan retter du det

Tilføj et preconnect-hint i sidens <head> for hver vigtig server, som tjekket rapporterer:

<!-- Åbn forbindelsen, før browseren opdager, at den har brug for en -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Inkludér attributten crossorigin for servere, der har brug for den – skrifttyper har altid brug for den.
Opret kun preconnect-forbindelser til servere, der er vigtige for den synlige side, såsom dem, hvor dine skrifttyper, billeder eller kritiske scripts findes. Hver åben forbindelse bruger ressourcer på den besøgendes enhed, så en håndfuld hints hjælper, mens snesevis skader.
For mindre vigtige servere er rel="dns-prefetch" et billigere hint, der kun udfører adresseopslaget på forhånd.

Sådan tester Silktide dette

Indlæs siden i en rigtig browser med den enhedstype, forbindelseshastighed og testplacering, der er konfigureret til dine hastighedstests.
Identificér de servere, som siden downloader fra, hvor opsætning af forbindelsen forsinkede downloadet, og hvor der ikke var oprettet et hint til tidlig forbindelse.
Rapportér hver server med den estimerede tid, som et preconnect-hint ville spare.
Bedøm siden ud fra den samlede estimerede besparelse: Omkring 100 millisekunder giver en lavere vurdering, og 200 millisekunder eller mere vurderes som dårligt.

Fejlfinding

Jeg har tilføjet hintet, men fundet er der stadig

Kontrollér den nøjagtige adresse: Hintet skal matche den server, filerne faktisk kommer fra, inklusive protokollen og ethvert underdomæne (https://fonts.gstatic.com er ikke https://fonts.googleapis.com). Skrifttyper kræver også crossorigin på hintet – uden det åbner browseren den forkerte type forbindelse og kasserer den derefter.

Skal jeg oprette preconnect-forbindelser til alle tredjepartsservere?

Nej. Browsere begrænser, hvor mange tidlige forbindelser de respekterer, og hver af dem bruger ressourcer på den besøgendes enhed. Brug kun preconnect til de få servere, hvis filer former det, som besøgende ser først.