Preconnect-oorsprongen

Silktide controleert of je pagina sneller kan laden door de browser vooraf te laten weten welke andere servers hij binnenkort nodig heeft. Door die verbindingen vroegtijdig te openen, beginnen bestanden van derden eerder met downloaden.

Voordat een browser iets van een nieuwe server kan downloaden — een fontservice, een of een analyseprovider — moet hij het adres van de server opzoeken, een verbinding openen en versleuteling onderhandelen. Die voorbereiding kost meerdere rondes over het netwerk. Normaal begint de browser daar pas mee wanneer hij voor het eerst een bestand ontdekt dat hij van die server nodig heeft. Dat kan laat in het laden van de pagina zijn.

Waarom dit belangrijk is

Het opzetten van een verbinding met één server kan op een mobiele verbinding honderden milliseconden kosten, en een typische pagina communiceert met meerdere servers van derden. Wanneer die voorbereiding laat begint — omdat het bestand waarvoor de verbinding nodig is diep in een stylesheet of script wordt vermeld — komt de vertraging rechtstreeks terecht bij zichtbare inhoud, zoals fonts en afbeeldingen.

Een preconnect-hint verplaatst deze kosten naar het allereerste begin van het laden, waar ze overlappen met werk dat de browser toch al uitvoerde. Het is één regel per server, zonder visuele verandering aan de pagina.

Zo los je dit op

Voeg voor elke belangrijke server die het controle meldt een preconnect-hint toe aan de <head> van je pagina:

<!-- Open de verbinding voordat de browser ontdekt dat hij er een nodig heeft -->
<link rel="preconnect" href="https:\/\/fonts.gstatic.com" crossorigin>

Voeg het attribuut crossorigin toe voor servers die dit nodig hebben — fonts hebben dit altijd nodig.
Gebruik preconnect alleen voor servers die belangrijk zijn voor de zichtbare pagina, bijvoorbeeld waar je fonts, afbeeldingen of kritieke scripts worden gehost. Elke geopende verbinding gebruikt bronnen op het apparaat van de bezoeker. Enkele hints helpen dus, maar tientallen werken averechts.
Voor minder belangrijke servers is rel="dns-prefetch" een goedkopere hint die alleen vooraf het adres opzoekt.

Zo test Silktide dit

Laad de pagina in een echte browser, met het apparaattype, de verbindingssnelheid en de testlocatie die voor je snelheidstests zijn ingesteld.
Bepaal van welke servers de pagina bestanden downloadt waarbij het opzetten van de verbinding de download vertraagde en geen hint voor een vroege verbinding aanwezig was.
Rapporteer elke server met de geschatte tijd die een preconnect-hint zou besparen.
Beoordeel de pagina op basis van de totale geschatte besparing: bij ongeveer 100 milliseconden wordt de score verlaagd, en bij 200 milliseconden of meer wordt de score als slecht beoordeeld.

Problemen oplossen

Ik heb de hint toegevoegd, maar de bevinding blijft staan

Controleer het exacte adres: de hint moet overeenkomen met de server waar de bestanden daadwerkelijk vandaan komen, inclusief het protocol en eventuele subdomeinen (https:\/\/fonts.gstatic.com is niet hetzelfde als https:\/\/fonts.googleapis.com). Fonts hebben ook crossorigin nodig op de hint — zonder dit attribuut opent de browser het verkeerde type verbinding en wordt die vervolgens weggegooid.

Moet ik met elke server van derden verbinding maken via preconnect?

Nee. Browsers beperken het aantal vroege verbindingen dat ze inwilligen, en elke verbinding gebruikt bronnen op het apparaat van de bezoeker. Gebruik preconnect alleen voor de paar servers waarvan de bestanden bepalen wat bezoekers als eerste zien.