ProHoster > Blog > Administrazioa > Aurrez kargatu, aurrez jaso eta bestelako etiketak

Aurrez kargatu, aurrez jaso eta bestelako etiketak

Ez dago web errendimendua hobetzeko modu asko. Horietako bat geroago beharko den edukia aurrez kargatzea da. CSS aurreprozesatzea, orrialde osoko aurre-errendatzea edo domeinu-izenen ebazpena. Dena aldez aurretik egiten dugu, eta gero berehala bistaratzen dugu emaitza! Cool soinuak.

Are freskoagoa dena da oso sinpleki inplementatzen dela. Bost etiketa eman arakatzaileari komando bat aurretiazko ekintzak egiteko:

<link rel="prefetch" href="/eu/style.css" as="style" />
<link rel="preload" href="/eu/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" />


Azal ditzagun laburki zer egiten duten eta noiz erabili.

Hona joan: aurrez kargatu Β· aurretiaz eskuratuko Β· aurrez konektatu Β· dns-prefetch Β· aurrez errendatu

aurrez kargatu

<link rel= "preload"> arakatzaileari baliabide bat (adibidez, script bat edo estilo-orri bat) kargatu eta gordetzeko esaten dio ahalik eta azkarren. Baliagarria da orrialdea kargatu eta segundo gutxira baliabide bat behar denean, eta prozesua bizkortu nahi duzunean.

Arakatzaileak ez du ezer egiten baliabidearekin kargatu ondoren. Scriptak ez dira exekutatzen, ez dira estilo-orriak aplikatzen. Baliabidea cachean gordetzen da eta berehala eskuragarri jartzen da eskaera eginda.

sintaxia

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

href deskargatu nahi duzun baliabidera seinalatzen du.

as nabigatzailean deskargatu daitekeen edozer izan daiteke:

  • style estilo-orrietarako,
  • script gidoietarako,
  • font letra tipoetarako,
  • fetch erabiliz kargatutako baliabideetarako fetch() edo XMLHttpRequest,
  • ikusi zerrenda osoa MDNn.

Garrantzitsua da atributua zehaztea as – honek arakatzaileari deskargak behar bezala lehenesten eta programatzen laguntzen dio.

Noiz erabili

Erabili aurrekargatzea etorkizun hurbilean baliabidea behar denean. Adibidez:

  • Kanpoko fitxategi bateko letra-tipo ez-estandarrak: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Lehenespenez comic-sans.woff2 deskargatu eta analizatu ondoren bakarrik hasiko da kargatzen index.css. Hainbeste itxarotea ekiditeko, letra-tipoa lehenago deskarga dezakezu erabiliz <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Zure estiloak planteamenduaren arabera bereizten badituzu CSS kritikoa bi zatitan, kritikoa (berehala errendatzeko) eta ez-kritikoa: 
    <style>
/* Inlined critical styles */
</style>

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

    Planteamendu honekin, estilo ez-kritikoak JavaScript exekutatzen denean bakarrik hasiko dira kargatzen, eta hori errendatu eta segundo gutxira gerta daiteke. JS erabili itxaron beharrean <link rel= "preload">lehenago deskargatzen hasteko:

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

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

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

Ez gehiegi erabili aurrekargatzea. Dena segidan kargatzen baduzu, gunea ez da magiaz bizkortuko; aitzitik, nabigatzaileak bere lana behar bezala planifikatzea eragotziko du.

Ez nahastu behar aldez aurretik ateratzearekin. Ez erabili <link rel= "preload">, orria kargatu eta berehala baliabidea behar ez baduzu. Geroago behar baduzu, adibidez hurrengo orrialderako, erabili <link rel= "prefetch">.

Xehetasunak

Hau nahitaezko etiketa da nabigatzaileak exekutatu beharrekoa (onartzen badu), beste etiketa guztiak ez bezala aurrekargatzearekin lotuta. Arakatzaileak atalean zehaztutako baliabidea deskargatu behar du <link rel="preload">. Beste kasu batzuetan aurrez kargatzeari jaramonik egin ahal izango dio, adibidez, konexio motelean exekutatzen ari bada.

Lehentasunak. Nabigatzaileek lehentasun desberdinak esleitzen dizkiete baliabide ezberdinei (estiloak, gidoiak, letra-tipoak, etab.), baliabide garrantzitsuenak lehenbailehen kargatzeko. Kasu honetan, arakatzaileak lehentasuna zehazten du atributuaren arabera as. Chrome arakatzailean begiratu dezakezu lehentasun-taula osoa.

Aurrez kargatu, aurrez jaso eta bestelako etiketak

aurretiaz eskuratuko

<link rel= "prefetch"> arakatzaileari baliabide bat (adibidez, script bat edo estilo-orri bat) atzeko planoan deskargatu eta gordetzeko eskatzen dio. Kargatzea lehentasun txikian gertatzen da, beraz, baliabide garrantzitsuagoak ez oztopatzeko. Baliagarria da baliabidea hurrengo orrian behar bada eta aldez aurretik cachean gorde nahi baduzu.

Hemen ere, arakatzaileak ez du ezer egiten baliabidearekin kargatu ondoren. Scriptak ez dira exekutatzen, ez dira estilo-orriak aplikatzen. Baliabidea cachean gordetzen da eta berehala eskuragarri jartzen da eskaera eginda.

sintaxia

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

href deskargatu nahi duzun baliabidera seinalatzen du.

as nabigatzailean deskargatu daitekeen edozer izan daiteke:

  • style estilo-orrietarako,
  • script gidoietarako,
  • font letra tipoetarako,
  • fetch erabiliz kargatutako baliabideetarako fetch() edo XMLHttpRequest,
  • ikusi zerrenda osoa MDNn.

Garrantzitsua da atributua zehaztea as - Honek arakatzaileari deskargak behar bezala lehenesten eta programatzen laguntzen dio.

Noiz erabili

Beste orri batzuetako baliabideak kargatzeko, beste orrialde bateko baliabide bat behar baduzu, eta aurretik kargatu nahi baduzu, orri horren errendatzea bizkortzeko. Adibidez:

  • Lineako denda bat duzu, eta erabiltzaileen % 40k produktuaren orri nagusitik uzten du. Erabili <link rel= "prefetch">, CSS eta JS fitxategiak kargatuz produktuen orriak errendatzeko.
  • Orrialde bakarreko aplikazioa duzu, eta orrialde ezberdinek pakete desberdinak kargatzen dituzte. Erabiltzaile batek orri bat bisitatzen duenean, lotzen dituen orrialde guztien paketeak aurrez kargatu daitezke.

Litekeena da etiketa hau segurtasunez erabil daitekeela edozein neurritan.. Arakatzaileek normalean lehentasun txikienarekin programatzen dute aurrebilketa, beraz, ez du inor molestatzen. Kontuan izan erabiltzaileen trafikoa kontsumitzen duela, eta horrek dirua kosta daiteke.

Ez premiazko eskaeretarako. Ez erabili <link rel= "prefetch">, baliabidea segundo gutxitan behar denean. Kasu honetan, erabili <link rel= "preload">.

Xehetasunak

Etiketa aukerakoa. Arakatzaileak ez du argibide hau jarraitu beharrik; agian ez ikusi egin dezake, adibidez, konexio motel batean.

Lehentasuna Chrome-n. Chrome-n <link rel= "prefetch"> normalean gutxieneko lehentasunarekin exekutatzen da (ikus lehentasun-taula osoa), hau da, gainerako guztia kargatu ondoren.

aurrez konektatu

<link rel= "preconnect"> Etorkizunean konexioaren konfigurazioa azkartu nahi duzunean aldez aurretik domeinura konektatzeko eskatzen dio arakatzaileari.

Arakatzaileak konexio bat ezarri behar du hirugarrenen domeinu berri batetik baliabideren bat berreskuratzen badu. Adibidez, Google Fonts, React letra-tipoak CDN batetik kargatzen baditu edo API zerbitzari batetik JSON erantzuna eskatzen badu.

Konexio berri bat ezartzeak ehun milisegundo batzuk behar izaten ditu normalean. Behin egiten da, baina oraindik denbora behar da. Aldez aurretik konexioa ezarri baduzu, denbora aurreztuko duzu eta domeinu honetako baliabideak azkarrago deskargatuko dituzu.

sintaxia

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

href IP helbidea zehaztu nahi duzun domeinu-izena adierazten du. Aurrizki batekin zehaztu daiteke (https://domain.com) edo gabe (//domain.com).

Noiz erabili

Erabili laster beharrezkoak izango diren domeinuetarako hortik estilo, gidoi edo irudi garrantzitsu bat deskargatzeko, baina oraindik ez dakizu baliabidearen URLa. Adibidez:

  • Zure aplikazioa bertan dago ostatatuta my-app.com eta AJAX eskaerak egiten dizkio api.my-app.com: Ez dituzu aldez aurretik kontsulta zehatzak ezagutzen, JS-tik dinamikoki egiten direlako. Hemen nahiko egokia da etiketa bat erabiltzea domeinura aldez aurretik konektatzeko.
  • Zure aplikazioa bertan dago ostatatuta my-app.com eta Google Fonts erabiltzen ditu. Bi urratsetan deskargatzen dira: lehenik, CSS fitxategia domeinutik deskargatzen da fonts.googleapis.com, orduan fitxategi honek letra-tipoak eskatzen ditu fonts.gstatic.com. Ezin duzu jakin zein motatako fitxategi zehatzak diren fonts.gstatic.com beharko duzu CSS fitxategia kargatu arte, beraz aldez aurretik bakarrik egin dezakegu konexioa.

Erabili etiketa hau hirugarrenen gidoia edo estiloa pixka bat bizkortzeko aurrez ezarritako konexioa dela eta.

Ez gehiegi erabili. Konexio bat ezartzea eta mantentzea eragiketa garestia da bai bezeroarentzat bai zerbitzariarentzat. Erabili etiketa hau gehienez 4-6 domeinuetarako.

Xehetasunak

Etiketa aukerakoa. Arakatzaileak ez du jarraibide hau jarraitu beharrik eta ez ikusi egin dezake, adibidez, konexio asko dagoeneko ezarrita badaude edo beste kasuren batean.

Zer barne hartzen du konexio prozesuak?. Gune bakoitzarekin konektatzeko, arakatzaileak honako hau egin behar du:

  • DNS ebazpena. Aurkitu zerbitzariaren IP helbidea (216.58.215.78) zehaztutako domeinu-izenarentzat (google.com).
  • TCP esku-ematea. Trukatu paketeak (bezeroa β†’ zerbitzaria β†’ bezeroa) zerbitzariarekin TCP konexio bat hasteko.
  • TLS esku-ematea (HTTPS guneak soilik). Pakete truke bi txanda (bezeroa β†’ zerbitzaria β†’ bezeroa β†’ zerbitzaria β†’ bezeroa) TLS saio seguru bat hasteko.

Oharra: HTTP/3-k eskuak emateko mekanismoa hobetu eta bizkortuko du, baina urrun dago oraindik.

dns-prefetch

<link rel= "dns-prefetch"> aldez aurretik domeinurako DNS ebazpena egiteko eskatzen dio arakatzaileari laster konektatuko bazara eta hasierako konexioa bizkortu nahi baduzu.

Arakatzaileak domeinuaren IP helbidea zehaztu behar du hirugarrenen domeinu berri bateko baliabiderik berreskuratuko badu. Adibidez, Google Fonts kargatzea, React letra-tipoak CDN batetik edo JSON erantzuna eskatzea API zerbitzari batetik.

Domeinu berri bakoitzeko, DNS erregistroen ebazpenak 20-120 ms inguru behar izaten ditu normalean. Horrek domeinu jakin bateko lehen baliabidea kargatzean bakarrik eragiten du, baina hala ere atzerapena sartzen du. Aurrez DNS ebazpena egiten badugu, denbora aurreztuko dugu eta baliabidea azkarrago kargatuko dugu.

sintaxia

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

href IP helbidea ezarri nahi duzun domeinu-izena adierazten du. Aurrizki batekin zehaztu daiteke (https://domain.com) edo gabe (//domain.com).

Noiz erabili

Erabili laster beharrezkoak izango diren domeinuetarako hortik arakatzaileak aldez aurretik ezagutzen ez dituen baliabideak deskargatzeko. Adibidez:

  • Zure aplikazioa bertan dago ostatatuta my-app.com eta AJAX eskaerak egiten dizkio api.my-app.com: Ez dituzu aldez aurretik kontsulta zehatzak ezagutzen, JS-tik dinamikoki egiten direlako. Hemen nahiko egokia da etiketa bat erabiltzea domeinura aldez aurretik konektatzeko.
  • Zure aplikazioa bertan dago ostatatuta my-app.com, eta Google Fonts erabiltzen ditu. Bi urratsetan deskargatzen dira: lehenik, CSS fitxategia domeinutik deskargatzen da fonts.googleapis.com, orduan fitxategi honek letra-tipoak eskatzen ditu fonts.gstatic.com. Ezin duzu jakin zein motatako fitxategi zehatzak diren fonts.gstatic.com beharko duzu CSS fitxategia kargatu arte, beraz aldez aurretiko konexioa baino ezin dugu egin.

Erabili etiketa hau hirugarrenen gidoia edo estiloa pixka bat bizkortzeko aurrez ezarritako konexioa dela eta.

Kontuan izan antzeko ezaugarriak <link rel= "dns-prefetch"/> ΠΈ <link rel= "preconnect">. Normalean ez du zentzurik domeinu bakarrerako elkarrekin erabiltzeak: <link rel= "preconnect"> barne hartzen du dagoeneko <link rel= "dns-prefetch"/> eta askoz gehiago. Hau bi kasutan justifika daiteke:

  • Arakatzaile zaharragoak onartu nahi dituzu?. <link rel= "dns-prefetch" /> euskarria IE10 eta Safari 5 geroztik. <link rel= "preconnect"> denbora batez Chrome eta Firefox-en onartzen zen, baina Safari 11.1-en bakarrik gehitu zen oraindik ez da onartzen IE/Edge-n. Arakatzaile hauek onartu behar badituzu, erabili <link rel= "dns-prefetch" /> babeskopia aukera gisa <link rel= "preconnect">.
  • 4-6 domeinu baino gehiagoren konexioak bizkortu nahi dituzu. Etiketa <link rel= "preconnect"> Ez da gomendagarria 4-6 domeinu baino gehiagorekin erabiltzea, konexio bat ezartzea eta mantentzea eragiketa garestia baita. <link rel= "dns-prefetch" /> baliabide gutxiago kontsumitzen ditu, beraz, erabili behar izanez gero.

Xehetasunak

Etiketa aukerakoa. Arakatzaileak ez du jarraibide hau jarraitu behar, beraz, baliteke DNS ebazpenik ez egitea, adibidez, orrialdean horrelako etiketa asko baldin badaude edo beste kasuren batean.

Zer da DNS. Interneteko zerbitzari bakoitzak IP helbide bakarra du, itxura duena 216.58.215.78. Gunearen izena arakatzailearen helbide-barran sartzen da normalean (adibidez, google.com), eta DNS (Domain Name System) zerbitzariek zerbitzariaren IP helbidearekin bat egiten dute (216.58.215.78).

IP helbide bat zehazteko, arakatzaileak DNS zerbitzariari galdetu behar dio. 20-120 ms behar ditu hirugarrenen domeinu berri batera konektatzean.

DNS cachean gordetzen da, oso fidagarria ez bada ere. Sistema eragile eta arakatzaile batzuek DNS kontsultak gordetzen dituzte: honek denbora aurreztuko du errepikatutako kontsultetan, baina ezin da fidatu cachean gordetzea. Linux-en normalean ez du batere funtzionatzen. Chrome-k DNS cachea du, baina minutu bat baino ez du irauten. Windows-ek DNS erantzunak gordetzen ditu bost egunez.

aurrez errendatu

<link rel= "prerender"> URLa deskargatzeko eta fitxa ikusezin batean bistaratzeko eskatzen dio arakatzaileari. Erabiltzaileak estekan klik egiten duenean, orria berehala agertu behar da. Baliagarria da erabiltzaileak orrialde jakin bat bisitatuko duela eta haren bistaratzea azkartu nahi baduzu ziur bazaude.

Etiketa honen eraginkortasun aparta izan arren (edo horregatik), 2019an <link rel= "prerender"> nabigatzaile nagusietan gaizki onartzen da. Ikusi xehetasun gehiago. azpitik.

sintaxia

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

href atzeko planoan errendatzen hasi nahi duzun URLra seinalatzen du.

Noiz erabili

Erabiltzailea orri jakin batera joango dela benetan ziur zaudenean. A orrialdeko bisitarien % 70 B orrialdera joateko "tunel" bat baduzu, orduan <link rel= "prerender"> A orrialdean B orria oso azkar bistaratzen lagunduko du.

Ez gehiegi erabili. Aurrez errendatzea oso garestia da banda zabalerari eta memoriari dagokionez. Ez erabili <link rel= "prerender"> orrialde bat baino gehiagorako.

Xehetasunak

Etiketa aukerakoa. Arakatzaileak ez du jarraibide hau jarraitu beharrik eta ez ikusi egin dezake, adibidez, konexio motelean edo memoria libre nahikoa ez dagoenean.

Memoria gordetzeko Chrome-k ez du errendatze osoa egitenEta bakarrik aurrekargatu NoState. Horrek esan nahi du Chrome-k orria eta bere baliabide guztiak kargatzen dituela, baina ez duela JavaScript errendatzen edo exekutatzen.

Firefox eta Safari-k ez dute batere onartzen etiketa hau. Horrek ez du zehaztapena urratzen, arakatzaileek ez baitute argibide hau jarraitu behar; baina oraindik triste. Inplementazio akatsa Firefox zazpi urte daramatza zabalik. Safari-ren berri ematen da etiketa hau ere ez du onartzen.

Laburpena

Erabili:

  • <link rel= "preload"> - segundo gutxitan baliabide bat behar duzunean
  • <link rel= "prefetch"> - hurrengo orrialdeko baliabidea behar duzunean
  • <link rel= "preconnect"> - Baliabide bat laster beharko duzula dakizunean, baina oraindik ez dakizun URL osoa
  • <link rel= "dns-prefetch"> - Era berean, laster baliabide bat beharko duzula dakizuenean, baina oraindik ez dakizu bere URL osoa (arakatzaile zaharrentzako)
  • <link rel= "prerender"> β€” erabiltzaileak orrialde jakin batera joango direla ziur zaudenean eta haren bistaratzea azkartu nahi duzunean

Iturria: www.habr.com

Gehitu iruzkin berria