ProHoster > Блог > Administrado > Antaŭŝarĝo, antaŭpreno kaj aliaj etikedoj

Antaŭŝarĝo, antaŭpreno kaj aliaj etikedoj

Ekzistas multajn manierojn plibonigi la retan rendimenton. Unu el ili estas antaŭŝargi enhavon, kiu estos bezonata poste. CSS antaŭ-pretigo, plena paĝo antaŭ-prezentado aŭ domajna nomo rezolucio. Ni faras ĉion anticipe, kaj tiam tuj montras la rezulton! Sonas mojosa.

Kio eĉ pli malvarmeta estas, ke ĝi estas tre simple efektivigita. Kvin etikedoj donu al la retumilo komandon por fari antaŭajn agojn:

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


Ni mallonge klarigu kion ili faras kaj kiam uzi ilin.

Saltu al: preŝargi · antaŭpretigi · antaŭkonekti · dns-prefetch · antaŭprezenti

preŝargi

<link rel= "preload"> diras al la retumilo ŝargi kaj konservi rimedon (kiel skripto aŭ stilfolio) kiel eble plej baldaŭ. Ĉi tio estas utila kiam rimedo bezonas kelkajn sekundojn post kiam la paĝo ŝargas - kaj vi volas akceli la procezon.

La retumilo faras nenion kun la rimedo post ŝarĝo. Skriptoj ne estas ekzekutitaj, stilfolioj ne estas aplikataj. La rimedo estas simple konservita kaj tuj disponebla laŭ peto.

sintakso

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

href montras la rimedon, kiun vi volas elŝuti.

as povas esti io ajn elŝutebla en la retumilo:

  • style por stilfolioj,
  • script por skriptoj,
  • font por tiparoj,
  • fetch por rimedoj ŝarĝitaj uzante fetch() aŭ XMLHttpRequest,
  • vidu plenan liston sur MDN.

Gravas specifi la atributon as – ĉi tio helpas la retumilon ĝuste prioritati kaj plani elŝutojn.

Kiam uzi

Uzu antaŭŝarĝon kiam la rimedo estas bezonata en tre proksima estonteco. Ekzemple:

  • Ne-normaj tiparoj de ekstera dosiero: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    defaŭlte comic-sans.woff2 komencos ŝargi nur post elŝuto kaj analizo index.css. Por eviti tiel longe atendi, vi povas elŝuti la tiparon pli frue uzante <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Se vi apartigas viajn stilojn laŭ la aliro Kritika CSS en du partojn, kritikajn (por tuja bildigo) kaj ne-kritikajn: 
    <style>
/* Inlined critical styles */
</style>

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

    Kun ĉi tiu aliro, ne-kritikaj stiloj nur komenciĝos ŝargi kiam JavaScript funkcias, kio povas okazi kelkajn sekundojn post bildigo. Anstataŭ atendi JS uzu <link rel= "preload">por komenci elŝuti pli frue:

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

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

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

Ne trouzu antaŭŝarĝadon. Se vi ŝarĝas ĉion en vico, la retejo ne magie plirapidiĝos; male, ĝi malhelpos la retumilon ĝuste plani sian laboron.

Ne konfuzu kun antaŭporto. Ne uzas <link rel= "preload">, se vi ne bezonas la rimedon tuj post la ŝarĝo de la paĝo. Se vi bezonos ĝin poste, ekzemple por la sekva paĝo, tiam uzu <link rel= "prefetch">.

Vidi detalojn

Ĉi tio estas bezonata etikedo esti efektivigita de la retumilo (se ĝi subtenas ĝin), male al ĉiuj aliaj etikedoj rilata al antaŭŝarĝado. La retumilo devas elŝuti la rimedon specifitan en <link rel="preload">. En aliaj kazoj ĝi povas ignori antaŭŝarĝon, ekzemple se ĝi funkcias per malrapida konekto.

Prioritatoj. Retumiloj kutime atribuas malsamajn prioritatojn al malsamaj rimedoj (stiloj, skriptoj, tiparoj, ktp.) por unue ŝargi la plej gravajn rimedojn. En ĉi tiu kazo, la retumilo determinas prioritaton laŭ atributo as. Por Chrome-retumilo vi povas rigardi plena prioritattabelo.

Antaŭŝarĝo, antaŭpreno kaj aliaj etikedoj

antaŭpretigi

<link rel= "prefetch"> petas al la retumilo elŝuti kaj konservi rimedon (kiel skripto aŭ stilfolio) en la fono. Ŝargado okazas kun malalta prioritato do ĝi ne malhelpas pli gravajn rimedojn. Ĉi tio estas utila se la rimedo estas bezonata en la sekva paĝo kaj vi volas konservi ĝin anticipe.

Ankaŭ ĉi tie la retumilo faras nenion kun la rimedo post ŝarĝo. Skriptoj ne estas ekzekutitaj, stilfolioj ne estas aplikataj. La rimedo estas simple konservita kaj tuj disponebla laŭ peto.

sintakso

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

href montras la rimedon, kiun vi volas elŝuti.

as povas esti io ajn elŝutebla en la retumilo:

  • style por stilfolioj,
  • script por skriptoj,
  • font por tiparoj,
  • fetch por rimedoj ŝarĝitaj uzante fetch() aŭ XMLHttpRequest,
  • vidu plenan liston sur MDN.

Gravas specifi la atributon as - ĉi tio helpas la retumilon ĝuste prioritati kaj plani elŝutojn.

Kiam uzi

Por ŝargi rimedojn de aliaj paĝoj, se vi bezonas rimedon de alia paĝo, kaj vi volas antaŭŝargi ĝin por tiam akceli la bildigon de tiu paĝo. Ekzemple:

  • Vi havas retan vendejon, kaj 40% de uzantoj forlasas la hejmpaĝon por la produkta paĝo. Uzu <link rel= "prefetch">, ŝarĝante CSS kaj JS-dosierojn por bildigi produktajn paĝojn.
  • Vi havas ununuran paĝan aplikaĵon, kaj malsamaj paĝoj ŝarĝas malsamajn pakaĵojn. Kiam uzanto vizitas paĝon, pakaĵoj por ĉiuj paĝoj al kiuj ĝi ligas povas esti antaŭŝargitaj.

Estas verŝajne ke ĉi tiu etikedo povas esti sekure uzata en ajna grado.. Retumiloj kutime planas antaŭprenadon kun la plej malalta prioritato, do ĝi ĝenas neniun. Nur memoru, ke ĝi konsumas uzantan trafikon, kiu povas kosti monon.

Ne por urĝaj petoj. Ne uzas <link rel= "prefetch">, kiam la rimedo estas bezonata en kelkaj sekundoj. En ĉi tiu kazo, uzu <link rel= "preload">.

Vidi detalojn

Laŭvola etikedo. La retumilo ne devas sekvi ĉi tiun instrukcion; ĝi povas ignori ĝin, ekzemple, ĉe malrapida konekto.

Prioritato en Chrome. En Chrome <link rel= "prefetch"> kutime efektivigite kun minimuma prioritato (vidu plena prioritattabelo), tio estas post ŝarĝo de ĉio alia.

antaŭkonekti

<link rel= "preconnect"> petas la retumilon antaŭe konektiĝi al la domajno kiam vi volas akceli konekton en la estonteco.

La retumilo devas establi konekton se ĝi prenas ajnajn rimedojn de nova triaparta domajno. Ekzemple, se ĝi ŝarĝas Google Tiparojn, React tiparojn de CDN, aŭ petas JSON-respondon de API-servilo.

Establi novan konekton kutime prenas kelkajn cent milisekundojn. Ĝi estas farita unufoje, sed ankoraŭ bezonas tempon. Se vi antaŭe establis konekton, vi ŝparos tempon kaj elŝutos rimedojn de ĉi tiu domajno pli rapide.

sintakso

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

href indikas la domajnan nomon por kiu vi volas determini la IP-adreson. Povas esti specifita per prefikso (https://domain.com) aŭ sen ĝi (//domain.com).

Kiam uzi

Uzu por domajnoj kiuj estos bezonataj baldaŭ por elŝuti gravan stilon, skripton aŭ bildon de tie, sed vi ankoraŭ ne konas la rimedan URL. Ekzemple:

  • Via aplikaĵo estas gastigita my-app.com kaj faras AJAX-petojn al api.my-app.com: Vi ne konas la specifajn demandojn anticipe ĉar ili estas faritaj dinamike de JS. Ĉi tie estas sufiĉe konvene uzi etikedon por antaŭkonekti al la domajno.
  • Via aplikaĵo estas gastigita my-app.com kaj uzas Google Tiparojn. Ili estas elŝutitaj en du paŝoj: unue, la CSS-dosiero estas elŝutita de la domajno fonts.googleapis.com, tiam ĉi tiu dosiero petas tiparojn kun fonts.gstatic.com. Vi ne povas scii el kiuj specifaj tipardosieroj estas fonts.gstatic.com vi bezonos ĝis vi ŝargos la CSS-dosieron, do ni povas fari nur antaŭan konekton.

Uzu ĉi tiun etikedon por iom plirapidigi iun trian skripton aŭ stilon pro antaŭestablita konekto.

Ne trouzu. Establi kaj konservi konekton estas multekosta operacio por kaj la kliento kaj la servilo. Uzu ĉi tiun etikedon por maksimume 4-6 domajnoj.

Vidi detalojn

Laŭvola etikedo. La retumilo ne devas sekvi ĉi tiun instrukcion kaj povas ignori ĝin, ekzemple, se multaj konektoj jam estis establitaj aŭ en iu alia kazo.

Kion inkluzivas la procezo de konekto?. Por konektiĝi al ĉiu retejo, la retumilo devas fari la jenon:

  • DNS-rezolucio. Trovu IP-adreson de servilo (216.58.215.78) por la specifita domajna nomo (google.com).
  • TCP-manpremo. Interŝanĝu pakojn (kliento → servilo → kliento) por komenci TCP-konekton kun la servilo.
  • TLS-manpremo (HTTPS-ejoj nur). Du rondoj de paka interŝanĝo (kliento → servilo → kliento → servilo → kliento) por komenci sekuran TLS-sesion.

Noto: HTTP/3 plibonigos kaj akcelos la manpreman mekanismon, sed ĝi ankoraŭ estas tre malproksima.

dns-prefetch

<link rel= "dns-prefetch"> petas al la retumilo anticipe plenumi DNS-rezolucion por la domajno, se vi baldaŭ konektos al ĝi kaj volas akceli la komencan konekton.

La retumilo devas determini la IP-adreson de la domajno se ĝi prenos iujn ajn rimedojn de nova triaparta domajno. Ekzemple, ŝarĝante Google Tiparojn, React tiparojn de CDN, aŭ petante JSON-respondon de API-servilo.

Por ĉiu nova domajno, DNS-rekorda rezolucio kutime prenas proksimume 20-120 ms. Ĉi tio nur influas la ŝarĝon de la unua rimedo de antaŭfiksita domajno, sed ankoraŭ enkondukas prokraston. Se ni plenumas DNS-rezolucion anticipe, ni ŝparos tempon kaj ŝargos la rimedon pli rapide.

sintakso

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

href indikas la domajnan nomon por kiu vi volas agordi la IP-adreson. Povas esti specifita per prefikso (https://domain.com) aŭ sen ĝi (//domain.com).

Kiam uzi

Uzu por domajnoj kiuj estos bezonataj baldaŭ por elŝuti de tie rimedojn, pri kiuj la retumilo ne scias antaŭe. Ekzemple:

  • Via aplikaĵo estas gastigita my-app.com kaj faras AJAX-petojn al api.my-app.com: Vi ne konas la specifajn demandojn anticipe ĉar ili estas faritaj dinamike de JS. Ĉi tie estas sufiĉe konvene uzi etikedon por antaŭkonekti al la domajno.
  • Via aplikaĵo estas gastigita my-app.com, kaj uzas Google Tiparojn. Ili estas elŝutitaj en du paŝoj: unue, la CSS-dosiero estas elŝutita de la domajno fonts.googleapis.com, tiam ĉi tiu dosiero petas tiparojn kun fonts.gstatic.com. Vi ne povas scii el kiuj specifaj tipardosieroj estas fonts.gstatic.com vi bezonos ĝin ĝis vi ŝargos la CSS-dosieron, do ni povas fari nur antaŭan konekton.

Uzu ĉi tiun etikedon por iom plirapidigi iun trian skripton aŭ stilon pro antaŭestablita konekto.

Bonvolu noti similajn trajtojn al <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Kutime ne havas sencon uzi ilin kune por unu domajno: <link rel= "preconnect"> jam inkluzivas <link rel= "dns-prefetch"/> kaj multe pli. Ĉi tio povas esti pravigita en du kazoj:

  • Ĉu vi volas subteni malnovajn foliumilojn?. <link rel= "dns-prefetch" /> subtenata de ekde IE10 kaj Safari 5. <link rel= "preconnect"> estis subtenata por tempeto en Chrome kaj Fajrovulpo, sed estis aldonita nur al Safaro en 11.1 kaj ankoraŭ ne subtenata en IE/Edge. Se vi bezonas subteni ĉi tiujn foliumilojn, uzu <link rel= "dns-prefetch" /> kiel rezerva opcio por <link rel= "preconnect">.
  • Vi volas akceli konektojn al pli ol 4-6 domajnoj. Etikedo <link rel= "preconnect"> Ĝi ne rekomendas uzi kun pli ol 4-6 domajnoj, ĉar establi kaj konservi konekton estas multekosta operacio. <link rel= "dns-prefetch" /> konsumas malpli da rimedoj, do uzu ĝin se necese.

Vidi detalojn

Laŭvola etikedo. La retumilo ne devas sekvi ĉi tiun instrukcion, do ĝi eble ne plenumas DNS-rezolucion, ekzemple, se ekzistas multaj tiaj etikedoj sur la paĝo aŭ en iu alia kazo.

Kio estas DNS. Ĉiu servilo en la Interreto havas unikan IP-adreson, kiu similas 216.58.215.78. La nomo de la retejo estas kutime enigita en la adresbreton de la retumilo (ekzemple, google.com), kaj DNS (Domain Name System) serviloj kongruas ĝin kun la IP-adreso de la servilo (216.58.215.78).

Por determini IP-adreson, la retumilo devas pridemandi la DNS-servilon. Oni bezonas 20−120 ms kiam oni konektas al nova triaparta domajno.

DNS estas kaŝmemorigita, kvankam ne tre fidinde. Kelkaj OS-oj kaj retumiloj konservas DNS-demandojn: tio ŝparos tempon pri ripetaj demandoj, sed kaŝmemoro ne povas esti fidi. En Linukso ĝi kutime tute ne funkcias. Chrome havas DNS-kaŝmemoron, sed ĝi daŭras nur unu minuton. Vindozo konservas DNS-respondojn dum kvin tagoj.

antaŭprezenti

<link rel= "prerender"> petas al la retumilo elŝuti la URL kaj montri ĝin en nevidebla langeto. Kiam la uzanto alklakas la ligilon, la paĝo devus esti montrita tuj. Ĉi tio estas utila se vi certas, ke la uzanto vizitos certan paĝon kaj volas akceli ĝian ekranon.

Malgraŭ (aŭ pro) la escepta efikeco de ĉi tiu etikedo, en 2019 <link rel= "prerender"> malbone subtenata en ĉefaj retumiloj. Vidu pli da detaloj. sube.

sintakso

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

href montras la URL, kiun vi volas komenci bildigi en la fono.

Kiam uzi

Kiam vi estas vere certa, ke la uzanto iros al certa paĝo. Se vi havas "tunelon" tra kiu 70% de vizitantoj al paĝo A iras al paĝo B, tiam <link rel= "prerender"> sur paĝo A helpos montri paĝon B tre rapide.

Ne trouzu. Antaŭ-prezentado estas ege multekosta laŭ bendolarĝo kaj memoro. Ne uzas <link rel= "prerender"> por pli ol unu paĝo.

Vidi detalojn

Laŭvola etikedo. La retumilo ne devas sekvi ĉi tiun instrukcion kaj povas ignori ĝin, ekzemple, ĉe malrapida konekto aŭ kiam estas nesufiĉa libera memoro.

Por ŝpari memoron Chrome ne faras plenan bildigonkaj nur antaŭŝarĝi NoState. Ĉi tio signifas, ke Chrome ŝarĝas la paĝon kaj ĉiujn ĝiajn rimedojn, sed ne bildigas aŭ ekzekutas JavaScript.

Fajrovulpo kaj Safaro tute ne subtenas ĉi tiun etikedon. Ĉi tio ne malobservas la specifon, ĉar retumiloj ne devas sekvi ĉi tiun instrukcion; sed tamen malgaja. Efektiva cimo Fajrovulpo estas malfermita dum sep jaroj. Estas raportoj ke Safaro ankaŭ ne subtenas ĉi tiun etikedon.

Resumo

Uzu:

  • <link rel= "preload"> - kiam vi bezonas rimedon en kelkaj sekundoj
  • <link rel= "prefetch"> - kiam vi bezonas la rimedon sur la sekva paĝo
  • <link rel= "preconnect"> - kiam vi scias, ke vi bezonos rimedon baldaŭ, sed vi ankoraŭ ne konas ĝian plenan URL
  • <link rel= "dns-prefetch"> - simile, kiam vi scias, ke vi bezonos rimedon baldaŭ, sed vi ankoraŭ ne konas ĝian plenan URL (por pli malnovaj retumiloj)
  • <link rel= "prerender"> — kiam vi certas, ke uzantoj iros al certa paĝo, kaj vi volas akceli ĝian montradon

fonto: www.habr.com

Aldoni komenton