ProHoster > Dienoraštis > Administravimas > Iš anksto įkelti, iš anksto gauti ir kitos žymos

Iš anksto įkelti, iš anksto gauti ir kitos žymos

Yra daug būdų, kaip pagerinti žiniatinklio našumą. Vienas iš jų – iš anksto įkeliamas turinys, kurio prireiks vėliau. CSS išankstinis apdorojimas, viso puslapio išankstinis atvaizdavimas arba domeno vardo skyrimas. Mes darome viską iš anksto, o tada iškart parodome rezultatą! Skamba gerai.

Dar šauniausia, kad tai labai paprastai įgyvendinama. Penkios etiketės duokite naršyklei komandą atlikti išankstinius veiksmus:

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


Trumpai paaiškinkime, ką jie daro ir kada juos naudoti.

Peršokti į: preload · prefetch · iš anksto prisijungti · dns iš anksto · iš anksto pateikti

preload

<link rel= "preload"> nurodo naršyklei kuo greičiau įkelti ir talpykloje išsaugoti išteklius (pvz., scenarijų ar stiliaus lentelę). Tai naudinga, kai resursas reikalingas praėjus kelioms sekundėms po puslapio įkėlimo – ir norite pagreitinti procesą.

Įkėlusi išteklius, naršyklė nieko nedaro. Scenarijai nevykdomi, stiliaus lapai netaikomi. Išteklius tiesiog saugomas talpykloje ir paprašius nedelsiant pasiekiamas.

sintaksė

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

href nurodo šaltinį, kurį norite atsisiųsti.

as gali būti bet kas, ką galima atsisiųsti naršyklėje:

  • style stiliaus lapams,
  • script už scenarijus,
  • font šriftams,
  • fetch už išteklius, įkeltus naudojant fetch() arba XMLHttpRequest,
  • žiūrėti visą sąrašą per MDN.

Svarbu nurodyti atributą as – tai padeda naršyklei tinkamai nustatyti atsisiuntimų prioritetus ir planuoti juos.

Kada naudoti

Naudokite išankstinį įkėlimą, kai išteklių prireiks artimiausiu metu. Pavyzdžiui:

  • Nestandartiniai šriftai iš išorinio failo: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Pagal nutylėjimą comic-sans.woff2 bus pradėtas įkelti tik atsisiuntus ir išnagrinėjus index.css. Kad nelauktumėte taip ilgai, šriftą galite atsisiųsti anksčiau naudodami <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Jei atskirsite savo stilius pagal požiūrį Kritinis CSS į dvi dalis – kritinę (atsitiktinai atvaizduoti) ir nekritinę: 
    <style>
/* Inlined critical styles */
</style>

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

    Taikant šį metodą, nekritiniai stiliai bus pradėti įkelti tik paleidus „JavaScript“, o tai gali įvykti praėjus kelioms sekundėms po pateikimo. Užuot laukę JS naudojimo <link rel= "preload">jei norite pradėti atsisiųsti anksčiau:

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

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

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

Per daug nenaudokite išankstinio įkėlimo. Jei įkelsite viską iš eilės, svetainė stebuklingai nepagreitės, o atvirkščiai, neleis naršyklei tinkamai planuoti savo darbo.

Negalima painioti su išankstiniu gavimu. Nenaudokite <link rel= "preload">, jei jums nereikia išteklių iškart po puslapio įkėlimo. Jei to prireiks vėliau, pavyzdžiui, kitam puslapiui, naudokite <link rel= "prefetch">.

Informacija

Tai būtina žyma Skirtingai nuo visų kitų žymų, kurią turi vykdyti naršyklė (jei ji ją palaiko). susiję su išankstiniu įkėlimu. Naršyklė turi atsisiųsti išteklius, nurodytus <link rel="preload">. Kitais atvejais jis gali nepaisyti išankstinio įkėlimo, pavyzdžiui, jei jis veikia lėtu ryšiu.

Prioritetai. Naršyklės paprastai priskiria skirtingus prioritetus skirtingiems ištekliams (stilius, scenarijus, šriftus ir kt.), kad pirmiausia būtų įkeliami svarbiausi ištekliai. Šiuo atveju naršyklė nustato prioritetą pagal atributą as. „Chrome“ naršyklei galite žiūrėti pilna prioritetų lentelė.

Iš anksto įkelti, iš anksto gauti ir kitos žymos

prefetch

<link rel= "prefetch"> prašo naršyklės atsisiųsti ir talpykloje išsaugoti šaltinį (pvz., scenarijų ar stiliaus lapą) fone. Įkėlimas vyksta žemu prioritetu, todėl netrukdo naudoti svarbesnius išteklius. Tai naudinga, jei resursas reikalingas kitame puslapyje ir norite jį iš anksto išsaugoti talpykloje.

Čia taip pat naršyklė nieko nedaro su ištekliu po įkėlimo. Scenarijai nevykdomi, stiliaus lapai netaikomi. Išteklius tiesiog saugomas talpykloje ir paprašius nedelsiant pasiekiamas.

sintaksė

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

href nurodo šaltinį, kurį norite atsisiųsti.

as gali būti bet kas, ką galima atsisiųsti naršyklėje:

  • style stiliaus lapams,
  • script už scenarijus,
  • font šriftams,
  • fetch už išteklius, įkeltus naudojant fetch() arba XMLHttpRequest,
  • žiūrėti visą sąrašą per MDN.

Svarbu nurodyti atributą as - tai padeda naršyklei teisingai nustatyti atsisiuntimų prioritetus ir planuoti.

Kada naudoti

Norėdami įkelti išteklius iš kitų puslapių, jei jums reikia šaltinio iš kito puslapio ir norite jį iš anksto įkelti, kad paspartintumėte to puslapio pateikimą. Pavyzdžiui:

  • Turite internetinę parduotuvę, o 40% vartotojų palieka pagrindinį produkto puslapį. Naudokite <link rel= "prefetch">, įkeliant CSS ir JS failus, kad būtų pateikti produkto puslapiai.
  • Turite vieno puslapio programą, o skirtingi puslapiai įkelia skirtingus paketus. Kai vartotojas apsilanko puslapyje, visų puslapių, į kuriuos jis nukreipia, paketai gali būti iš anksto įkelti.

Tikėtina, kad šią žymą galima saugiai naudoti bet kokiu mastu.. Naršyklės paprastai suplanuoja išankstinį gavimą su žemiausiu prioritetu, todėl tai niekam netrukdo. Tiesiog nepamirškite, kad tai sunaudoja vartotojų srautą, o tai gali kainuoti.

Ne dėl skubių prašymų. Nenaudokite <link rel= "prefetch">, kai išteklių prireikia per kelias sekundes. Tokiu atveju naudokite <link rel= "preload">.

Informacija

Neprivaloma žyma. Naršyklė neprivalo laikytis šios instrukcijos; ji gali į tai nepaisyti, pavyzdžiui, esant lėtam ryšiui.

„Chrome“ prioritetas. „Chrome“. <link rel= "prefetch"> paprastai vykdomas su minimaliu prioritetu (žr pilna prioritetų lentelė), tai yra, įkėlus visa kita.

iš anksto prisijungti

<link rel= "preconnect"> prašo naršyklės iš anksto prisijungti prie domeno, kai norite paspartinti ryšio sąranką ateityje.

Naršyklė turi užmegzti ryšį, jei nuskaito išteklius iš naujo trečiosios šalies domeno. Pavyzdžiui, jei jis įkelia „Google Fonts“, „React“ šriftus iš CDN arba prašo JSON atsakymo iš API serverio.

Naujo ryšio užmezgimas paprastai užtrunka kelis šimtus milisekundžių. Tai daroma vieną kartą, bet vis tiek reikia laiko. Jei ryšį užmezgėte iš anksto, sutaupysite laiko ir greičiau atsisiųsite išteklius iš šio domeno.

sintaksė

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

href nurodo domeno pavadinimą, kurio IP adresą norite nustatyti. Galima nurodyti priešdėliu (https://domain.com) arba be jo (//domain.com).

Kada naudoti

Naudokite domenams, kurių greitai prireiks norėdami iš ten atsisiųsti svarbų stilių, scenarijų ar vaizdą, bet dar nežinote šaltinio URL. Pavyzdžiui:

  • Jūsų programa yra talpinama my-app.com ir pateikia AJAX užklausas api.my-app.com: Jūs iš anksto nežinote konkrečių užklausų, nes jos daromos dinamiškai iš JS. Čia visai tikslinga naudoti žymą, kad iš anksto prisijungtumėte prie domeno.
  • Jūsų programa yra talpinama my-app.com ir naudoja „Google“ šriftus. Jie atsisiunčiami dviem etapais: pirmiausia iš domeno atsisiunčiamas CSS failas fonts.googleapis.com, tada šis failas prašo šriftų su fonts.gstatic.com. Negalite žinoti, iš kurių konkrečių šriftų failų yra fonts.gstatic.com jums reikės, kol įkelsite CSS failą, todėl prieš tai galime atlikti tik preliminarų ryšį.

Naudokite šią žymą, kad šiek tiek paspartintumėte trečiosios šalies scenarijų ar stilių dėl iš anksto nustatyto ryšio.

Nenaudokite per daug. Ryšio užmezgimas ir palaikymas yra brangi operacija tiek klientui, tiek serveriui. Naudokite šią žymą daugiausiai 4–6 domenams.

Informacija

Neprivaloma žyma. Naršyklė neprivalo laikytis šios instrukcijos ir gali jos nepaisyti, pavyzdžiui, jei jau užmegzta daug ryšių arba kitu atveju.

Ką apima prisijungimo procesas?. Norėdami prisijungti prie kiekvienos svetainės, naršyklė turi atlikti šiuos veiksmus:

  • DNS rezoliucija. Rasti serverio IP adresą (216.58.215.78) nurodytam domeno vardui (google.com).
  • TCP rankos paspaudimas. Keiskitės paketais (klientas → serveris → klientas), kad inicijuotų TCP ryšį su serveriu.
  • TLS rankos paspaudimas (tik HTTPS svetainės). Du paketų mainų raundai (klientas → serveris → klientas → serveris → klientas), kad būtų pradėta saugi TLS sesija.

Pastaba: HTTP/3 pagerins ir pagreitins rankos paspaudimo mechanizmą, tačiau iki jo dar toli.

dns iš anksto

<link rel= "dns-prefetch"> prašo naršyklės iš anksto atlikti domeno DNS skiriamąją gebą, jei netrukus prie jo prisijungsite ir norite paspartinti pradinį ryšį.

Naršyklė turi nustatyti domeno IP adresą, jei ji nuskaitys išteklius iš naujo trečiosios šalies domeno. Pavyzdžiui, įkeliami „Google Fonts“, „React“ šriftai iš CDN arba prašoma JSON atsakymo iš API serverio.

Kiekvienam naujam domenui DNS įrašo skyra paprastai trunka apie 20–120 ms. Tai turi įtakos tik pirmojo šaltinio įkėlimui iš nurodyto domeno, bet vis tiek vėluoja. Jei DNS sprendimą atliksime iš anksto, sutaupysime laiko ir greičiau įkelsime resursą.

sintaksė

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

href nurodo domeno pavadinimą, kuriam norite nustatyti IP adresą. Galima nurodyti priešdėliu (https://domain.com) arba be jo (//domain.com).

Kada naudoti

Naudokite domenams, kurių greitai prireiks iš ten atsisiųsti išteklius, apie kuriuos naršyklė iš anksto nežino. Pavyzdžiui:

  • Jūsų programa yra talpinama my-app.com ir pateikia AJAX užklausas api.my-app.com: Jūs iš anksto nežinote konkrečių užklausų, nes jos daromos dinamiškai iš JS. Čia visai tikslinga naudoti žymą, kad iš anksto prisijungtumėte prie domeno.
  • Jūsų programa yra talpinama my-app.com, ir naudoja „Google“ šriftus. Jie atsisiunčiami dviem etapais: pirmiausia iš domeno atsisiunčiamas CSS failas fonts.googleapis.com, tada šis failas prašo šriftų su fonts.gstatic.com. Negalite žinoti, iš kurių konkrečių šriftų failų yra fonts.gstatic.com jums jo reikės, kol įkelsite CSS failą, todėl iš anksto galime atlikti tik preliminarų ryšį.

Naudokite šią žymą, kad šiek tiek paspartintumėte trečiosios šalies scenarijų ar stilių dėl iš anksto nustatyto ryšio.

Atkreipkite dėmesį į panašias savybes <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Paprastai nėra prasmės juos naudoti kartu vienam domenui: <link rel= "preconnect"> jau apima <link rel= "dns-prefetch"/> ir daug daugiau. Tai gali būti pateisinama dviem atvejais:

  • Ar norite palaikyti senesnes naršykles?. <link rel= "dns-prefetch" /> remia nuo IE10 ir Safari 5. <link rel= "preconnect"> kurį laiką buvo palaikoma „Chrome“ ir „Firefox“, tačiau prie „Safari“ buvo pridėta tik 11.1 ir vis dar nepalaikoma IE/Edge. Jei jums reikia palaikyti šias naršykles, naudokite <link rel= "dns-prefetch" /> kaip atsarginė parinktis <link rel= "preconnect">.
  • Norite paspartinti ryšį su daugiau nei 4–6 domenais. Žyma <link rel= "preconnect"> Nerekomenduojama naudoti daugiau nei 4-6 domenuose, nes ryšio užmezgimas ir palaikymas yra brangi operacija. <link rel= "dns-prefetch" /> sunaudoja mažiau išteklių, todėl prireikus naudokite.

Informacija

Neprivaloma žyma. Naršyklė neprivalo laikytis šios instrukcijos, todėl ji gali neatlikti DNS sprendimo, pavyzdžiui, jei puslapyje yra daug tokių žymų ar kitu atveju.

Kas yra DNS. Kiekvienas serveris internete turi unikalų IP adresą, kuris atrodo taip 216.58.215.78. Svetainės pavadinimas paprastai įvedamas į naršyklės adreso juostą (pvz. google.com), o DNS (domeno vardų sistemos) serveriai suderina jį su serverio IP adresu (216.58.215.78).

Norėdami nustatyti IP adresą, naršyklė turi pateikti užklausą DNS serveriui. Prisijungiant prie naujo trečiosios šalies domeno užtrunka 20–120 ms.

DNS yra talpykloje, nors ir nelabai patikimai. Kai kurios OS ir naršyklės saugo DNS užklausas talpykloje: taip sutaupysite laiko kartotinėms užklausoms, tačiau negalima pasikliauti talpyklomis. „Linux“ sistemoje jis paprastai neveikia. „Chrome“ turi DNS talpyklą, bet ji trunka tik minutę. „Windows“ talpykloje saugo DNS atsakymus penkias dienas.

iš anksto pateikti

<link rel= "prerender"> prašo naršyklės atsisiųsti URL ir parodyti jį nematomame skirtuke. Kai vartotojas spusteli nuorodą, puslapis turi būti rodomas iš karto. Tai naudinga, jei esate tikri, kad vartotojas apsilankys tam tikrame puslapyje ir norės paspartinti jo rodymą.

Nepaisant (arba dėl to) išskirtinio šios žymos efektyvumo, 2019 m <link rel= "prerender"> prastai palaikomos pagrindinėse naršyklėse. Žr. daugiau informacijos. žemiau.

sintaksė

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

href nurodo URL, kurį norite pradėti pateikti fone.

Kada naudoti

Kai tikrai esi tikras, kad vartotojas nueis į tam tikrą puslapį. Jei turite „tunelį“, per kurį 70 % A puslapio lankytojų patenka į B puslapį, tada <link rel= "prerender"> puslapyje A padės labai greitai parodyti B puslapį.

Nenaudokite per daug. Išankstinis atvaizdavimas yra labai brangus pralaidumo ir atminties atžvilgiu. Nenaudokite <link rel= "prerender"> daugiau nei vienam puslapiui.

Informacija

Neprivaloma žyma. Naršyklė neprivalo laikytis šios instrukcijos ir gali jos nepaisyti, pavyzdžiui, esant lėtam ryšiui arba kai nepakanka laisvos atminties.

Norėdami sutaupyti atminties „Chrome“ neatlieka viso atvaizdavimoIr tik išankstinio įkėlimo NoState. Tai reiškia, kad „Chrome“ įkelia puslapį ir visus jo išteklius, bet nepateikia ir nevykdo „JavaScript“.

„Firefox“ ir „Safari“ šios žymos visiškai nepalaiko. Tai nepažeidžia specifikacijos, nes naršyklės neprivalo laikytis šios instrukcijos; bet vis tiek liūdna. Diegimo klaida „Firefox“ veikia septynerius metus. Yra pranešimų, kad Safari taip pat nepalaiko šios žymos.

Santrauka

Naudokite:

  • <link rel= "preload"> - kai jums reikia išteklių per kelias sekundes
  • <link rel= "prefetch"> - kai jums reikia šaltinio kitame puslapyje
  • <link rel= "preconnect"> - kai žinote, kad jums greitai prireiks šaltinio, bet dar nežinote viso jo URL
  • <link rel= "dns-prefetch"> - panašiai, kai žinote, kad jums greitai prireiks šaltinio, bet dar nežinote viso jo URL (senesnėms naršyklėms)
  • <link rel= "prerender"> — kai esate tikri, kad vartotojai eis į tam tikrą puslapį, ir norite paspartinti jo rodymą

Šaltinis: www.habr.com

Добавить комментарий