Mikä on Preconnect? " Rank Math

Mikä on Preconnect?

Preconnect (rel="preconnect") on HTML rel -attribuutin arvo, joka ohjaa selainta ottamaan yhteyden ulkoiseen verkkotunnukseen mahdollisimman varhaisessa vaiheessa. Tämä auttaa vähentämään viiveaikaa, kun selain pyytää myöhemmin resursseja kyseiseltä verkkotunnukselta.

Esimerkiksi monet verkkosivustot integroituvat kolmansien osapuolten analytiikkapalveluihin, kuten Google Analytics. Google Analytics -skripti ladataan kuitenkin ulkoiselta verkkotunnukselta (https://www.google-analytics.com/).

Kehittäjä voi siis lisätä verkkosivulle alla olevan preconnect-koodin.

<link rel="preconnect" href="https://www.google-analytics.com">

Tämä koodi ohjaa selainta muodostamaan yhteyden Google Analytics -verkkotunnukseen aikaisemmin kuin normaalisti. Näin se voi hakea skriptin nopeasti, kun se kohtaa koodin, joka käskee sitä tekemään niin, ilman että sen tarvitsee luoda uutta yhteyttä.

Ilman preconnect-koodia selain aloittaa yhteyden muodostamisen vasta, kun se kohtaa koodin, joka käskee sitä noutamaan komentosarjan. Tämä voi aiheuttaa viivettä, koska selaimen on ensin suoritettava DNS-resoluutio, TCP-kättely ja TLS-neuvottelu ennen kuin se voi aloittaa resurssin lataamisen.

Preconnect on resurssivihje. Toisin sanoen se on osa HTML-direktiivien ryhmää, joka opastaa selaimia lataamaan verkkosivulla tarvittavat resurssit. Se On jota käytetään HTML <link> tag ja se sijoitetaan yleensä <head> sivun HTML-koodin tagissa.

Preconnectin merkitys

Kehittäjät käyttävät esiliitäntää yleensä tärkeiden kolmansien osapuolten resurssien, kuten fonttien, sovellusrajapintojen ja skriptien käyttöön, isännöi ulkoiset verkkotunnukset.

Tämä auttaa vähentämään latenssia, nopeuttamaan sivun latausaikaja varmistaa, että selain voi nopeasti käyttää ulkoisten verkkotunnusten resursseja. Se vähentää myös SEO-ongelmien todennäköisyyttä, kuten kumulatiiviset asetteluvuorot (CLS), mikä voi vaikuttaa kielteisesti käyttökokemusta.

Ilman esiliitäntää selain yrittää käyttää ulkoista verkkotunnusta vain silloin, kun se tarvitsee resurssia. Tämän seurauksena sivun muut asiaan liittyvät resurssit ovat saattaneet latautua ennen kuin tarvittava resurssi saapuu.

Tällaisissa tapauksissa viivästynyt resurssi voi muuttaa sivun sisällön ulkoasua. Esimerkiksi fontit voivat häiritä sivun ulkoasua ja suunnittelua. Vaikutukset vaihtelevat sivukohtaisesti, mutta lopputulos on usein epäoptimaalinen ja monissa tapauksissa ei-toivottu.

Miten Preconnect toimii

Monet verkkosivustot lataavat fontteja Google Fontsista. Siksi verkkosivujen koodi sisältää yleensä seuraavan koodin, joka käskee selainta lataamaan haluamansa fontin Google Fontsista.

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Selaimen on kuitenkin ensin muodostettava yhteys Google Fonts -verkkotunnukseen, ennen kuin se voi hakea fontin kyseisestä URL-osoitteesta. Tämä yhteys edellyttää, että selain on vuorovaikutuksessa useiden järjestelmien kanssa, erityisesti:

Tämä voi kestää jonkin aikaa, ja se voi näkyä erityisesti silloin, kun yhteys on hidas. Tällaisissa tapauksissa selain käyttää varafonttia, kunnes haluttu fontti saapuu.

Tämä voi vaikuttaa kielteisesti käyttäjäkokemukseen ja aiheuttaa kumulatiivisia asettelun siirtymiä (CLS), jotka tapahtuvat, kun haluttu fontti korvaa varafontin. Kumulatiivinen asettelun muutos on yksi niistä mittareista, joita Google käyttää arvioidessaan sinun Core Web Vitals ja sivukokemus, joka on sijoitustekijä.

Yhteyden nopeuttamiseksi ja kumulatiivisen asettelun siirtymisen kaltaisten ongelmien estämiseksi kehittäjät sisällyttävät seuraavat ominaisuudet rel="preconnect" koodin verkkosivulleen:

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

The Ensimmäinen koodi ohjaa selainta muodostamaan esiyhteyden tyylitaulukkotunnukseen, kun taas toinen koodi ohjaa selainta muodostamaan esiyhteyden fonttitiedoston tunnukseen.

Kun selain kohtaa ne, se muodostaa yhteyden määritettyihin verkkotunnuksiin ja suorittaa DNS-ratkaisun, TCP-kättelyn ja TLS-neuvottelut niiden kanssa.

Myöhemmin, kun selain kohtaa koodin, joka käskee sitä hakemaan fontin Google Fontsista, se käyttää jo luotua yhteyttä uudelleen, mikä vähentää latenssia ja nopeuttaa fontin latautumista.

Preconnectin, Prefetchin ja Preloadin yhtäläisyydet

Esiliitos, esijännitys (rel="preload") ja esihakua (rel="prefetch") ovat toisiinsa liittyviä resurssivihjeitä. Kuten preconnect, ne opastavat selainta lataamaan resursseja, joita verkkosivu saattaa tarvita tai tulee tarvitsemaan. Erityisesti:

Preconnect ohjaa selainta luomaan varhaisen yhteyden ulkoiseen verkkotunnukseen.
Esilataus ohjaa selainta lataamaan kriittisen resurssin, kuten fontin tai skriptin, varhaisessa vaiheessa sivun alkulatauksen aikana.
Prefetch ohjaa selainta lataamaan resursseja, joita saatetaan tarvita myöhemmin, kuten seuraavan sivun sisältöä.

Yksinkertaisemmin, ei-teknisin termein:

Preconnect valmistelee yhteyden
Peload hakee kriittiset resurssit ajoissa
Prefetch hakee ei-kriittisiä resursseja tulevaa käyttöä varten.

Bloginpitäjät käyttävät yleensä kaikkia kolmea yhdessä muiden resurssivihjeiden kanssa parantaakseen merkittävästi sivun latausaikaa ja käyttäjäkokemusta.

Parhaat käytännöt liittämistä edeltävässä toiminnassa

rel="preconnect" on hyödyllinen resurssivinkki kehittäjille, jotka haluavat parantaa käyttäjäkokemusta. Se on kuitenkin tehokas vain silloin, kun sitä käytetään oikein. Seuraavassa on muutamia parhaita käytäntöjä, jotka kannattaa pitää mielessä.

1 Käytä Preconnectia vain kriittisten kolmannen osapuolen verkkotunnusten osalta.

Preconnect käyttää kaistanleveyttä, selaimen ja palvelimen resursseja. Se kuluttaa myös osan käyttäjän datasuunnitelmasta. Selaimilla on myös rajoituksia samanaikaisten yhteyksien määrälle, joita ne voivat hallita.

Käytä siksi preconnect-resurssivihjettä säästeliäästi. Varmista erityisesti, että käytät sitä vain välttämättömiin resursseihin, joita tarvitaan sivun latauksen alkuvaiheessa. Älä käytä sitä liikaa ja pidättäydy käyttämästä sitä muihin kuin kriittisiin resursseihin.

2 Sijoita se HTML-koodin -tagiin.

Sijoita esiliitosvihjeet asiakirjan osoitteeseen <head> tag. Vaikka voit teknisesti sijoittaa sen <body> tunnisteen, selain ei välttämättä näe sitä tarpeeksi ajoissa, mikä tekee tyhjäksi koko sen lisäämisen tarkoituksen.

3 Vältä Preconnectin käyttöä samassa toimialueessa oleville resursseille.

Resursseja, jotka sijaitsevat samassa verkkotunnuksessa kuin verkkosivu, ei tarvitse yhdistää etukäteen. Selaimella on nämä yhteydet jo avoinna tai se voi hallita niitä tehokkaasti. Esiliittäminen ei siis tuo mitään suorituskykyhyötyä.