ProHoster > Blogi > antaminen > Esilataa, esihaku ja muut tunnisteet

Esilataa, esihaku ja muut tunnisteet

On monia tapoja parantaa verkon suorituskykyä. Yksi niistä on myöhemmin tarvittavan sisällön esilataus. CSS-esikäsittely, koko sivun esirenderöinti tai verkkotunnuksen nimen resoluutio. Teemme kaiken etukäteen ja näytämme sitten heti tuloksen! Kuulostaa siistiltä.

Vielä siistimpää on, että se on hyvin yksinkertaisesti toteutettu. Viisi tunnistetta anna selaimelle komento suorittaa alustavia toimia:

<link rel="prefetch" href="/fi/style.css" as="style" />
<link rel="preload" href="/fi/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />


Selitetään lyhyesti, mitä ne tekevät ja milloin niitä käytetään.

Esittely: preload · prefetch · esiyhteys · dns-prefetch · esirenderöidä

preload

<link rel= "preload"> käskee selainta lataamaan ja tallentamaan välimuistiin resurssin (kuten komentosarjan tai tyylitaulukon) mahdollisimman pian. Tästä on hyötyä, kun resurssia tarvitaan muutaman sekunnin kuluttua sivun latautumisesta - ja haluat nopeuttaa prosessia.

Selain ei tee mitään resurssille lataamisen jälkeen. Skriptejä ei suoriteta, tyylisivuja ei käytetä. Resurssi tallennetaan yksinkertaisesti välimuistiin ja asetetaan välittömästi saataville pyynnöstä.

syntaksi

<link rel="preload" href="/fi/style.css" as="style" />

href osoittaa resurssiin, jonka haluat ladata.

as voi olla mitä tahansa, joka voidaan ladata selaimessa:

  • style tyylisivuille,
  • script käsikirjoituksia varten,
  • font fonteille,
  • fetch käyttäen ladattuja resursseja fetch() tai XMLHttpRequest,
  • katso koko lista MDN:ssä.

On tärkeää määrittää attribuutti as – Tämä auttaa selainta priorisoimaan ja ajoittamaan lataukset oikein.

Milloin käyttää

Käytä esilatausta, kun resurssia tarvitaan lähitulevaisuudessa. Esimerkiksi:

  • Standardista poikkeavat kirjasimet ulkoisesta tiedostosta: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Oletuksena comic-sans.woff2 alkaa latautua vasta lataamisen ja jäsentämisen jälkeen index.css. Voit välttää odottamisen niin kauan lataamalla fontin aiemmin käyttämällä <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Jos erotat tyylisi lähestymistavan mukaan Kriittinen CSS kahteen osaan, kriittiseen (välittömään renderöintiin) ja ei-kriittiseen: 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    Tällä lähestymistavalla ei-kriittiset tyylit alkavat latautua vain, kun JavaScript suoritetaan, mikä voi tapahtua muutaman sekunnin kuluttua renderöinnista. Sen sijaan, että odotat JS-käyttöä <link rel= "preload">aloittaaksesi lataamisen aikaisemmin:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/fi/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Älä käytä liikaa esilatausta. Jos lataat kaiken peräkkäin, sivusto ei maagisesti nopeudu, vaan päinvastoin se estää selainta suunnittelemasta toimintaansa oikein.

Ei pidä sekoittaa esihakuun. Älä käytä <link rel= "preload">, jos et tarvitse resurssia heti sivun latautumisen jälkeen. Jos tarvitset sitä myöhemmin, esimerkiksi seuraavaa sivua varten, käytä <link rel= "prefetch">.

Tiedot

Tämä on pakollinen tunniste selain suorittaa sen (jos se tukee sitä), toisin kuin kaikki muut tunnisteet liittyvät esilataukseen. Selaimen on ladattava kohdassa määritetty resurssi <link rel="preload">. Muissa tapauksissa se voi jättää esilatauksen huomioimatta, esimerkiksi jos se toimii hitaalla yhteydellä.

prioriteetit. Selaimet määrittävät yleensä eri prioriteetit eri resursseille (tyylit, skriptit, kirjasimet jne.), jotta tärkeimmät resurssit ladataan ensin. Tässä tapauksessa selain määrittää prioriteetin määritteen mukaan as. Chrome-selaimelle voit katsoa täysi prioriteettitaulukko.

Esilataa, esihaku ja muut tunnisteet

prefetch

<link rel= "prefetch"> pyytää selainta lataamaan taustalla olevan resurssin (kuten komentosarjan tai tyylisivun) ja tallentamaan sen välimuistiin. Lataus tapahtuu alhaisella prioriteetilla, joten se ei häiritse tärkeämpiä resursseja. Tästä on hyötyä, jos resurssia tarvitaan seuraavalla sivulla ja haluat tallentaa sen välimuistiin etukäteen.

Tässäkään selain ei tee mitään resurssille lataamisen jälkeen. Skriptejä ei suoriteta, tyylisivuja ei käytetä. Resurssi tallennetaan yksinkertaisesti välimuistiin ja asetetaan välittömästi saataville pyynnöstä.

syntaksi

<link rel="prefetch" href="/fi/style.css" as="style" />

href osoittaa resurssiin, jonka haluat ladata.

as voi olla mitä tahansa, joka voidaan ladata selaimessa:

  • style tyylisivuille,
  • script käsikirjoituksia varten,
  • font fonteille,
  • fetch käyttäen ladattuja resursseja fetch() tai XMLHttpRequest,
  • katso koko lista MDN:ssä.

On tärkeää määrittää attribuutti as - Tämä auttaa selainta priorisoimaan ja ajoittamaan lataukset oikein.

Milloin käyttää

Resurssien lataaminen muilta sivuilta, jos tarvitset resurssia toiselta sivulta ja haluat esiladata sen nopeuttaaksesi sivun hahmontamista. Esimerkiksi:

  • Sinulla on verkkokauppa, ja 40 % käyttäjistä poistuu tuotesivun etusivulta. Käyttää <link rel= "prefetch">, lataa CSS- ja JS-tiedostoja tuotesivujen renderöimiseksi.
  • Sinulla on yksisivuinen sovellus, ja eri sivut lataavat eri paketteja. Kun käyttäjä vierailee sivulla, paketit kaikille sivuille, joille se linkittää, voidaan ladata valmiiksi.

On todennäköistä, että tätä tunnistetta voidaan käyttää turvallisesti missä tahansa määrin.. Selaimet ajoittavat yleensä esihaun alimmalla prioriteetilla, joten se ei häiritse ketään. Muista vain, että se kuluttaa käyttäjäliikennettä, mikä voi maksaa rahaa.

Ei kiireellisiin pyyntöihin. Älä käytä <link rel= "prefetch">, kun resurssia tarvitaan muutamassa sekunnissa. Käytä tässä tapauksessa <link rel= "preload">.

Tiedot

Valinnainen tunniste. Selaimen ei tarvitse noudattaa tätä ohjetta, vaan se voi jättää sen huomiotta esimerkiksi hitaalla yhteydellä.

Prioriteetti Chromessa. Chromessa <link rel= "prefetch"> yleensä suoritetaan minimiprioriteettilla (katso täysi prioriteettitaulukko), eli kaiken muun lataamisen jälkeen.

esiyhteys

<link rel= "preconnect"> pyytää selainta muodostamaan yhteyden verkkotunnukseen etukäteen, kun haluat nopeuttaa yhteyden muodostamista tulevaisuudessa.

Selaimen on muodostettava yhteys, jos se hakee resursseja uudesta kolmannen osapuolen toimialueesta. Jos se esimerkiksi lataa Google Fonts, React fontit CDN:stä tai pyytää JSON-vastausta API-palvelimelta.

Uuden yhteyden muodostaminen kestää yleensä muutaman sadan millisekunnin. Se tehdään kerran, mutta se vie aikaa. Jos olet muodostanut yhteyden etukäteen, säästät aikaa ja lataat resursseja tästä verkkotunnuksesta nopeammin.

syntaksi

<link rel= "preconnect" href="https://api.my-app.com" />

href ilmaisee verkkotunnuksen, jonka IP-osoitteen haluat määrittää. Voidaan määrittää etuliitteellä (https://domain.com) tai ilman sitä (//domain.com).

Milloin käyttää

Käytä verkkotunnuksissa, joita tarvitaan pian ladataksesi sieltä tärkeän tyylin, skriptin tai kuvan, mutta et vielä tiedä resurssin URL-osoitetta. Esimerkiksi:

  • Sovellustasi isännöi my-app.com ja tekee AJAX-pyyntöjä api.my-app.com: Et tiedä tiettyjä kyselyitä etukäteen, koska ne tehdään dynaamisesti JS:stä. Tässä on varsin tarkoituksenmukaista käyttää tunnistetta verkkotunnukseen esiyhteyden muodostamiseen.
  • Sovellustasi isännöi my-app.com ja käyttää Google Fontsia. Ne ladataan kahdessa vaiheessa: ensin CSS-tiedosto ladataan verkkotunnuksesta fonts.googleapis.com, tämä tiedosto pyytää kirjasimia fonts.gstatic.com. Et voi tietää, mistä kirjasintiedostot ovat peräisin fonts.gstatic.com tarvitset ennen kuin lataat CSS-tiedoston, joten voimme tehdä vain alustavan yhteyden etukäteen.

Käytä tätä tunnistetta nopeuttaaksesi hieman kolmannen osapuolen komentosarjaa tai tyyliä ennalta muodostetun yhteyden vuoksi.

Älä käytä liikaa. Yhteyden muodostaminen ja ylläpitäminen on kallis toimenpide sekä asiakkaalle että palvelimelle. Käytä tätä tunnistetta enintään 4–6 verkkotunnuksessa.

Tiedot

Valinnainen tunniste. Selaimen ei tarvitse noudattaa tätä ohjetta ja se voi jättää sen huomiotta esimerkiksi jos useita yhteyksiä on jo muodostettu tai jossain muussa tapauksessa.

Mitä yhdistämisprosessi sisältää?. Yhdistääkseen kuhunkin sivustoon selaimen on tehtävä seuraavat:

  • DNS-resoluutio. Etsi palvelimen IP-osoite (216.58.215.78) määritetylle verkkotunnukselle (google.com).
  • TCP-kättely. Vaihda paketteja (asiakas → palvelin → asiakas) TCP-yhteyden muodostamiseksi palvelimeen.
  • TLS-kättely (vain HTTPS-sivustot). Kaksi paketinvaihtokierrosta (asiakas → palvelin → asiakas → palvelin → asiakas) suojatun TLS-istunnon aloittamiseksi.

Huomautus: HTTP/3 parantaa ja nopeuttaa kättelymekanismia, mutta se on vielä kaukana.

dns-prefetch

<link rel= "dns-prefetch"> pyytää selainta suorittamaan DNS-selvityksen verkkotunnukselle etukäteen, jos muodostat yhteyden siihen pian ja haluat nopeuttaa alkuperäistä yhteyttä.

Selaimen on määritettävä verkkotunnuksen IP-osoite, jos se hakee resursseja uudesta kolmannen osapuolen verkkotunnuksesta. Esimerkiksi Google-fonttien lataaminen, React-fontteja CDN-verkosta tai JSON-vastauksen pyytäminen API-palvelimelta.

Jokaisen uuden verkkotunnuksen DNS-tietueen selvitys kestää tyypillisesti noin 20-120 ms. Tämä vaikuttaa vain ensimmäisen resurssin lataamiseen tietystä toimialueesta, mutta aiheuttaa silti viiveen. Jos suoritamme DNS-ratkaisun etukäteen, säästämme aikaa ja lataamme resurssin nopeammin.

syntaksi

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href ilmaisee toimialueen nimen, jolle haluat määrittää IP-osoitteen. Voidaan määrittää etuliitteellä (https://domain.com) tai ilman sitä (//domain.com).

Milloin käyttää

Käytä verkkotunnuksissa, joita tarvitaan pian ladata sieltä resursseja, joista selain ei tiedä etukäteen. Esimerkiksi:

  • Sovellustasi isännöi my-app.com ja tekee AJAX-pyyntöjä api.my-app.com: Et tiedä tiettyjä kyselyitä etukäteen, koska ne tehdään dynaamisesti JS:stä. Tässä on varsin tarkoituksenmukaista käyttää tunnistetta verkkotunnukseen esiyhteyden muodostamiseen.
  • Sovellustasi isännöi my-app.com, ja käyttää Google Fontsia. Ne ladataan kahdessa vaiheessa: ensin CSS-tiedosto ladataan verkkotunnuksesta fonts.googleapis.com, tämä tiedosto pyytää kirjasimia fonts.gstatic.com. Et voi tietää, mistä kirjasintiedostot ovat peräisin fonts.gstatic.com tarvitset sitä, kunnes lataat CSS-tiedoston, joten voimme tehdä vain alustavan yhteyden etukäteen.

Käytä tätä tunnistetta nopeuttaaksesi hieman kolmannen osapuolen komentosarjaa tai tyyliä ennalta muodostetun yhteyden vuoksi.

Huomaa samanlaiset ominaisuudet kuin <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Yleensä ei ole järkevää käyttää niitä yhdessä yhdessä verkkotunnuksessa: <link rel= "preconnect"> sisältää jo <link rel= "dns-prefetch"/> ja paljon enemmän. Tämä voidaan perustella kahdessa tapauksessa:

  • Haluatko tukea vanhempia selaimia?. <link rel= "dns-prefetch" /> tukema IE10:stä ja Safari 5:stä lähtien. <link rel= "preconnect"> oli jonkin aikaa tuettu Chromessa ja Firefoxissa, mutta se lisättiin Safariin vasta 11.1:ssä ja ei vieläkään tueta IE/Edgessä. Jos sinun on tuettava näitä selaimia, käytä <link rel= "dns-prefetch" /> varavaihtoehtona <link rel= "preconnect">.
  • Haluat nopeuttaa yhteyksiä yli 4-6 verkkotunnukseen. Tag <link rel= "preconnect"> Ei suositella käytettäväksi useamman kuin 4-6 verkkotunnuksen kanssa, koska yhteyden muodostaminen ja ylläpitäminen on kallis toimenpide. <link rel= "dns-prefetch" /> kuluttaa vähemmän resursseja, joten käytä sitä tarvittaessa.

Tiedot

Valinnainen tunniste. Selaimen ei tarvitse noudattaa tätä ohjetta, joten se ei välttämättä suorita DNS-selvitystä esimerkiksi jos sivulla on paljon tällaisia ​​tunnisteita tai jossain muussa tapauksessa.

Mikä on DNS. Jokaisella Internetin palvelimella on yksilöllinen IP-osoite, joka näyttää tältä 216.58.215.78. Sivuston nimi kirjoitetaan yleensä selaimen osoiteriville (esim. google.com) ja DNS (Domain Name System) -palvelimet yhdistävät sen palvelimen IP-osoitteeseen (216.58.215.78).

IP-osoitteen määrittämiseksi selaimen on tehtävä kysely DNS-palvelimelta. Yhteyden muodostaminen uuteen kolmannen osapuolen toimialueeseen kestää 20–120 ms.

DNS on välimuistissa, vaikkakaan ei kovin luotettavasti. Jotkut käyttöjärjestelmät ja selaimet tallentavat DNS-kyselyt välimuistiin: tämä säästää aikaa toistuvissa kyselyissä, mutta välimuistiin ei voi luottaa. Linuxissa se ei yleensä toimi ollenkaan. Chromessa on DNS-välimuisti, mutta se kestää vain minuutin. Windows tallentaa DNS-vastaukset välimuistiin viiden päivän ajan.

esirenderöidä

<link rel= "prerender"> pyytää selainta lataamaan URL-osoitteen ja näyttämään sen näkymättömässä välilehdessä. Kun käyttäjä napsauttaa linkkiä, sivu tulee näkyviin välittömästi. Tämä on hyödyllistä, jos olet varma, että käyttäjä vierailee tietyllä sivulla ja haluaa nopeuttaa sen näyttöä.

Huolimatta (tai sen vuoksi) tämän tunnisteen poikkeuksellisesta tehokkuudesta, vuonna 2019 <link rel= "prerender"> huonosti tuettu yleisimmissä selaimissa. Katso lisätietoja. alla.

syntaksi

<link rel="prerender" href="https://my-app.com/pricing" />

href osoittaa URL-osoitteeseen, jonka haluat aloittaa renderöinnin taustalla.

Milloin käyttää

Kun olet todella varma, että käyttäjä menee tietylle sivulle. Jos sinulla on "tunneli", jonka kautta 70 % sivun A kävijöistä menee sivulle B, silloin <link rel= "prerender"> sivulla A auttaa tuomaan sivun B nopeasti näkyviin.

Älä käytä liikaa. Esirenderöinti on erittäin kallista kaistanleveyden ja muistin suhteen. Älä käytä <link rel= "prerender"> useammalle kuin yhdelle sivulle.

Tiedot

Valinnainen tunniste. Selaimen ei tarvitse noudattaa tätä ohjetta ja se voi jättää sen huomiotta esimerkiksi hitaalla yhteydellä tai kun vapaata muistia ei ole riittävästi.

Muistin säästämiseksi Chrome ei tee täydellistä renderöintiäJa vain esilataa NoState. Tämä tarkoittaa, että Chrome lataa sivun ja kaikki sen resurssit, mutta ei hahmonna tai suorita JavaScriptiä.

Firefox ja Safari eivät tue tätä tunnistetta ollenkaan. Tämä ei riko eritelmiä, koska selainten ei tarvitse noudattaa tätä ohjetta. mutta silti surullinen. Käyttöönottovirhe Firefox on ollut avoinna seitsemän vuotta. On raportoitu, että Safari ei myöskään tue tätä tunnistetta.

Yhteenveto

Käyttää:

  • <link rel= "preload"> - kun tarvitset resurssia muutamassa sekunnissa
  • <link rel= "prefetch"> - kun tarvitset resurssia seuraavalla sivulla
  • <link rel= "preconnect"> - kun tiedät tarvitsevasi resurssia pian, mutta et vielä tiedä sen koko URL-osoitetta
  • <link rel= "dns-prefetch"> - samoin, kun tiedät tarvitsevasi resurssia pian, mutta et vielä tiedä sen koko URL-osoitetta (vanhemmille selaimille)
  • <link rel= "prerender"> - kun olet varma, että käyttäjät menevät tietylle sivulle, ja haluat nopeuttaa sen näyttöä

Lähde: will.com

Lisää kommentti