ProHoster > Blog > uprava > Preload, prefetch i druge oznake

Preload, prefetch i druge oznake

Tu je mnogo načina za poboljšanje web performansi. Jedan od njih je predučitavanje sadržaja koji će biti potreban kasnije. CSS pretprocesiranje, predrenderiranje cijele stranice ili razrješenje naziva domene. Sve radimo unaprijed, a zatim odmah prikazujemo rezultat! Zvuči super.

Ono što je još cool jest da je vrlo jednostavno implementirano. Pet oznaka dajte pregledniku naredbu za izvođenje preliminarnih radnji:

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


Ukratko objasnimo čemu služe i kada ih koristiti.

Skoči na: preload · unaprijed dohvaćeno · unaprijed povezati · dns-prethodno dohvaćanje · unaprijed prikazati

preload

<link rel= "preload"> govori pregledniku da učita i spremi u predmemoriju resurs (kao što je skripta ili stilska tablica) što je prije moguće. Ovo je korisno kada je resurs potreban nekoliko sekundi nakon učitavanja stranice - a želite ubrzati proces.

Preglednik ne radi ništa s resursom nakon učitavanja. Skripte se ne izvršavaju, listovi stilova se ne primjenjuju. Resurs se jednostavno sprema u predmemoriju i odmah se stavlja na raspolaganje na zahtjev.

sintaksa

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

href pokazuje na resurs koji želite preuzeti.

as može biti bilo što što se može preuzeti u pregledniku:

  • style za stilske listove,
  • script za skripte,
  • font za fontove,
  • fetch za resurse učitane pomoću fetch() ili XMLHttpRequest,
  • pogledajte cijeli popis na MDN-u.

Važno je navesti atribut as – ovo pomaže pregledniku da ispravno odredi prioritete i rasporedi preuzimanja.

Kada koristiti

Upotrijebite prethodno učitavanje kada je resurs potreban u vrlo bliskoj budućnosti. Na primjer:

  • Nestandardni fontovi iz vanjske datoteke: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Po defaultu comic-sans.woff2 počet će se učitavati tek nakon preuzimanja i analiziranja index.css. Kako biste izbjegli tako dugo čekanje, font možete preuzeti ranije koristeći <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Odvojite li svoje stilove prema pristupu Kritičan CSS na dva dijela, kritični (za trenutačno iscrtavanje) i nekritični: 
    <style>
/* Inlined critical styles */
</style>

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

    Uz ovaj pristup, stilovi koji nisu kritični počet će se učitavati tek kad se pokrene JavaScript, što se može dogoditi nekoliko sekundi nakon renderiranja. Umjesto čekanja koristite JS <link rel= "preload">za početak preuzimanja ranije:

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

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

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

Ne pretjerujte s predučitavanjem. Ako učitavate sve redom, stranica se neće magično ubrzati, naprotiv, spriječit će preglednik da pravilno planira svoj rad.

Ne smije se brkati s prethodnim dohvaćanjem. Nemojte koristiti <link rel= "preload">, ako vam resurs ne treba odmah nakon učitavanja stranice. Ako vam zatreba kasnije, na primjer za sljedeću stranicu, upotrijebite <link rel= "prefetch">.

Detalji

Ovo je obavezna oznaka koju treba izvršiti preglednik (ako to podržava), za razliku od svih ostalih oznaka vezano uz predučitavanje. Preglednik mora preuzeti resurs naveden u <link rel="preload">. U drugim slučajevima može zanemariti predučitavanje, na primjer ako radi na sporoj vezi.

prioriteti. Preglednici obično dodjeljuju različite prioritete različitim resursima (stilovi, skripte, fontovi itd.) kako bi prvi učitali najvažnije resurse. U ovom slučaju preglednik određuje prioritet prema atributu as. Za preglednik Chrome možete pogledati tablica punog prioriteta.

Preload, prefetch i druge oznake

unaprijed dohvaćeno

<link rel= "prefetch"> traži od preglednika da u pozadini preuzme i spremi resurs (kao što je skripta ili stilski list). Učitavanje se odvija s niskim prioritetom tako da ne ometa važnije resurse. Ovo je korisno ako je resurs potreban na sljedećoj stranici i želite ga unaprijed spremiti u predmemoriju.

Ovdje također preglednik ne radi ništa s resursom nakon učitavanja. Skripte se ne izvršavaju, listovi stilova se ne primjenjuju. Resurs se jednostavno sprema u predmemoriju i odmah se stavlja na raspolaganje na zahtjev.

sintaksa

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

href pokazuje na resurs koji želite preuzeti.

as može biti bilo što što se može preuzeti u pregledniku:

  • style za stilske listove,
  • script za skripte,
  • font za fontove,
  • fetch za resurse učitane pomoću fetch() ili XMLHttpRequest,
  • pogledajte cijeli popis na MDN-u.

Važno je navesti atribut as - ovo pomaže pregledniku da ispravno odredi prioritete i rasporedi preuzimanja.

Kada koristiti

Za učitavanje resursa s drugih stranica, ako trebate resurs s druge stranice i želite ga unaprijed učitati kako biste ubrzali iscrtavanje te stranice. Na primjer:

  • Imate online trgovinu, a 40% korisnika napusti početnu stranicu za stranicu proizvoda. Koristiti <link rel= "prefetch">, učitavanje CSS i JS datoteka za prikaz stranica proizvoda.
  • Imate jednu stranicu aplikacije, a različite stranice učitavaju različite pakete. Kada korisnik posjeti stranicu, mogu se unaprijed učitati paketi za sve stranice na koje se povezuje.

Vjerojatno je da se ova oznaka može sigurno koristiti u bilo kojoj mjeri.. Preglednici obično planiraju prethodno dohvaćanje s najnižim prioritetom, tako da nikome ne smeta. Samo imajte na umu da troši korisnički promet, što može koštati.

Nije za hitne zahtjeve. Nemojte koristiti <link rel= "prefetch">, kada je resurs potreban za nekoliko sekundi. U ovom slučaju, koristite <link rel= "preload">.

Detalji

Izborna oznaka. Preglednik ne mora slijediti ovu uputu; može je zanemariti, na primjer, na sporoj vezi.

Prioritet u Chromeu. U Chromeu <link rel= "prefetch"> obično se izvršava s minimalnim prioritetom (vidi tablica punog prioriteta), odnosno nakon učitavanja svega ostalog.

unaprijed povezati

<link rel= "preconnect"> traži od preglednika da se unaprijed poveže s domenom kada u budućnosti želite ubrzati postavljanje veze.

Preglednik mora uspostaviti vezu ako dohvaća resurse s nove domene treće strane. Na primjer, ako učitava Google Fontove, React fontove s CDN-a ili traži JSON odgovor s API poslužitelja.

Uspostavljanje nove veze obično traje nekoliko stotina milisekundi. Radi se jednom, ali ipak treba vremena. Ako ste unaprijed uspostavili vezu, uštedjet ćete vrijeme i brže preuzeti resurse s ove domene.

sintaksa

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

href označava naziv domene za koju želite odrediti IP adresu. Može se navesti s prefiksom (https://domain.com) ili bez njega (//domain.com).

Kada koristiti

Koristite za domene koje će uskoro biti potrebne da preuzmete važan stil, skriptu ili sliku od tamo, ali još ne znate URL resursa. Na primjer:

  • Vaša aplikacija nalazi se na my-app.com i postavlja AJAX zahtjeve za api.my-app.com: Ne znate unaprijed specifične upite jer se izrađuju dinamički iz JS-a. Ovdje je sasvim prikladno koristiti oznaku za prethodno povezivanje s domenom.
  • Vaša aplikacija nalazi se na my-app.com i koristi Google Fontove. Preuzimaju se u dva koraka: prvo se s domene preuzima CSS datoteka fonts.googleapis.com, onda ova datoteka zahtijeva fontove sa fonts.gstatic.com. Ne možete znati iz koje su datoteke fonta fonts.gstatic.com trebat će vam dok ne učitate CSS datoteku, tako da možemo napraviti samo preliminarno povezivanje prije toga.

Upotrijebite ovu oznaku da malo ubrzate skriptu ili stil treće strane zbog unaprijed uspostavljene veze.

Nemojte pretjerivati. Uspostavljanje i održavanje veze skupa je operacija i za klijenta i za poslužitelja. Koristite ovu oznaku za najviše 4-6 domena.

Detalji

Izborna oznaka. Preglednik nije dužan slijediti ove upute i može ih zanemariti, na primjer, ako je već uspostavljeno mnogo veza ili u nekom drugom slučaju.

Što uključuje proces povezivanja?. Da bi se povezao na svaku stranicu, preglednik mora učiniti sljedeće:

  • DNS rezolucija. Pronađite IP adresu poslužitelja (216.58.215.78) za navedeni naziv domene (google.com).
  • TCP rukovanje. Razmijenite pakete (klijent → poslužitelj → klijent) za pokretanje TCP veze s poslužiteljem.
  • TLS rukovanje (samo HTTPS stranice). Dva kruga razmjene paketa (klijent → poslužitelj → klijent → poslužitelj → klijent) za pokretanje sigurne TLS sesije.

Napomena: HTTP/3 će poboljšati i ubrzati mehanizam rukovanja, ali to je još daleko.

dns-prethodno dohvaćanje

<link rel= "dns-prefetch"> traži od preglednika da unaprijed izvede DNS razrješenje za domenu ako ćete se uskoro spajati na nju i želite ubrzati početnu vezu.

Preglednik mora odrediti IP adresu domene ako će dohvatiti resurse s nove domene treće strane. Na primjer, učitavanje Google Fontova, React fontova s ​​CDN-a ili traženje JSON odgovora s API poslužitelja.

Za svaku novu domenu razlučivost DNS zapisa obično traje oko 20-120 ms. To utječe samo na učitavanje prvog resursa iz dane domene, ali i dalje predstavlja kašnjenje. Ako DNS rezoluciju izvršimo unaprijed, uštedjet ćemo vrijeme i brže učitati resurs.

sintaksa

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

href označava naziv domene za koju želite postaviti IP adresu. Može se navesti s prefiksom (https://domain.com) ili bez njega (//domain.com).

Kada koristiti

Koristite za domene koje će uskoro biti potrebne za preuzimanje resursa od tamo za koje preglednik ne zna unaprijed. Na primjer:

  • Vaša aplikacija nalazi se na my-app.com i postavlja AJAX zahtjeve za api.my-app.com: Ne znate unaprijed specifične upite jer se izrađuju dinamički iz JS-a. Ovdje je sasvim prikladno koristiti oznaku za prethodno povezivanje s domenom.
  • Vaša aplikacija nalazi se na my-app.com, i koristi Google Fontove. Preuzimaju se u dva koraka: prvo se s domene preuzima CSS datoteka fonts.googleapis.com, onda ova datoteka zahtijeva fontove sa fonts.gstatic.com. Ne možete znati iz koje su datoteke fonta fonts.gstatic.com trebat će vam dok ne učitate CSS datoteku, tako da možemo napraviti samo preliminarno povezivanje unaprijed.

Upotrijebite ovu oznaku da malo ubrzate skriptu ili stil treće strane zbog unaprijed uspostavljene veze.

Obratite pažnju na slične karakteristike <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Obično ih nema smisla koristiti zajedno za jednu domenu: <link rel= "preconnect"> već uključuje <link rel= "dns-prefetch"/> i mnogo više. To se može opravdati u dva slučaja:

  • Želite li podržati starije preglednike?. <link rel= "dns-prefetch" /> podržan od od IE10 i Safarija 5. <link rel= "preconnect"> je neko vrijeme bio podržan u Chromeu i Firefoxu, ali je samo dodan u Safari u 11.1 i još uvijek nije podržan u IE/Edgeu. Ako trebate podršku za ove preglednike, koristite <link rel= "dns-prefetch" /> kao rezervna opcija za <link rel= "preconnect">.
  • Želite ubrzati veze s više od 4-6 domena. Označiti <link rel= "preconnect"> Ne preporučuje se korištenje s više od 4-6 domena, jer je uspostavljanje i održavanje veze skupa operacija. <link rel= "dns-prefetch" /> troši manje resursa, pa ga koristite ako je potrebno.

Detalji

Izborna oznaka. Preglednik nije dužan slijediti ovu uputu, pa možda neće izvršiti DNS razrješenje, na primjer, ako na stranici ima mnogo takvih oznaka ili u nekom drugom slučaju.

Što je DNS. Svaki poslužitelj na internetu ima jedinstvenu IP adresu, koja izgleda ovako 216.58.215.78. Naziv stranice obično se unosi u adresnu traku preglednika (npr. google.com), a DNS (Domain Name System) poslužitelji ga povezuju s IP adresom poslužitelja (216.58.215.78).

Da bi odredio IP adresu, preglednik mora postaviti upit DNS poslužitelju. Za spajanje na novu domenu treće strane potrebno je 20−120 ms.

DNS je predmemoriran, iako ne baš pouzdano. Neki operativni sustavi i preglednici spremaju DNS upite u predmemoriju: ovo će uštedjeti vrijeme na ponavljanim upitima, ali ne možete se pouzdati u predmemoriju. Na Linuxu obično uopće ne radi. Chrome ima DNS predmemoriju, ali traje samo minutu. Windows sprema DNS odgovore pet dana.

unaprijed prikazati

<link rel= "prerender"> traži od preglednika da preuzme URL i prikaže ga u nevidljivoj kartici. Kada korisnik klikne na poveznicu, stranica bi se trebala odmah prikazati. Ovo je korisno ako ste sigurni da će korisnik posjetiti određenu stranicu i želite ubrzati njezin prikaz.

Unatoč (ili zbog) iznimne učinkovitosti ove oznake, u 2019 <link rel= "prerender"> slabo podržan u glavnim preglednicima. Pogledajte više detalja. ispod.

sintaksa

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

href pokazuje na URL koji želite početi prikazivati ​​u pozadini.

Kada koristiti

Kada ste stvarno sigurni da će korisnik otići na određenu stranicu. Ako imate “tunel” kroz koji 70% posjetitelja stranice A ide na stranicu B, onda <link rel= "prerender"> na stranici A pomoći će vrlo brzo prikazati stranicu B.

Nemojte pretjerivati. Predrenderiranje je izuzetno skupo u smislu propusnosti i memorije. Nemojte koristiti <link rel= "prerender"> za više od jedne stranice.

Detalji

Izborna oznaka. Preglednik nije dužan slijediti ove upute i može ih zanemariti, na primjer, ako je veza spora ili kada nema dovoljno slobodne memorije.

Za uštedu memorije Chrome ne radi potpuno renderiranjeI samo unaprijed učitaj NoState. To znači da Chrome učitava stranicu i sve njezine resurse, ali ne prikazuje niti izvršava JavaScript.

Firefox i Safari uopće ne podržavaju ovu oznaku. Ovo ne krši specifikaciju, budući da preglednici ne moraju slijediti ove upute; ali ipak tužan. Greška u implementaciji Firefox je otvoren sedam godina. Postoje izvješća da Safari ne podržava ni ovu oznaku.

Rezime

Koristiti:

  • <link rel= "preload"> - kada trebate resurs za nekoliko sekundi
  • <link rel= "prefetch"> - kada trebate izvor na sljedećoj stranici
  • <link rel= "preconnect"> - kada znate da će vam resurs uskoro trebati, ali još ne znate njegov puni URL
  • <link rel= "dns-prefetch"> - slično, kada znate da će vam resurs uskoro trebati, ali još ne znate njegov puni URL (za starije preglednike)
  • <link rel= "prerender"> — kada ste sigurni da će korisnici otići na određenu stranicu, a želite ubrzati njezin prikaz

Izvor: www.habr.com

Dodajte komentar