ProHoster > Блог > Administracija > Preload, prefetch i druge oznake

Preload, prefetch i druge oznake

Postoje mnogo načina da poboljšate web performanse. Jedan od njih je prethodno učitavanje sadržaja koji će biti potreban kasnije. CSS prethodna obrada, pred-renderiranje cijele stranice ili razlučivanje imena domena. Radimo sve unaprijed, a zatim odmah prikazujemo rezultat! Zvuči cool.

Ono što je još kul je to što je vrlo jednostavno implementiran. Pet oznaka dajte pretraživaču komandu da izvrši preliminarne radnje:

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


Hajde da ukratko objasnimo šta rade i kada ih koristiti.

Skoči na: preload · unaprijed dohvaćeno · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> govori pretraživaču da učita i kešira resurs (kao što je skripta ili tablica stilova) što je prije moguće. Ovo je korisno kada je potreban resurs nekoliko sekundi nakon učitavanja stranice - a želite da ubrzate proces.

Pregledač ne radi ništa sa resursom nakon učitavanja. Skripte se ne izvršavaju, stilski listovi se ne primjenjuju. Resurs se jednostavno kešira i odmah stavlja na raspolaganje na zahtjev.

sintaksa

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

href ukazuje na resurs koji želite da preuzmete.

as može biti bilo šta što se može preuzeti u pretraživaču:

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

Važno je navesti atribut as – ovo pomaže pretraživaču da pravilno odredi prioritete i zakaže preuzimanja.

Kada koristiti

Koristite prethodno učitavanje kada vam resurs bude potreban u bliskoj budućnosti. Na primjer:

  • Nestandardni fontovi iz eksterne 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 će se početi učitavati tek nakon preuzimanja i raščlanjivanja index.css. Kako biste izbjegli tako dugo čekanje, možete preuzeti font ranije koristeći <link rel= "preload">:

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

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

    Sa ovim pristupom, nekritični stilovi će se početi učitavati tek kada 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="/bs/app/non-critical.css" as="style" />

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

Nemojte preterano koristiti prethodno učitavanje. Ako učitate sve redom, stranica se neće magično ubrzati, naprotiv, spriječit će pretraživač da ispravno planira svoj rad.

Ne treba se brkati sa dohvaćanjem unaprijed. 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, koristite <link rel= "prefetch">.

Pogledajte detalje

Ovo je obavezna oznaka da se izvršava od strane pretraživača (ako ga podržava), za razliku od svih ostalih oznaka vezano za predučitavanje. Pregledač mora preuzeti resurs naveden u <link rel="preload">. U drugim slučajevima može zanemariti prethodno učitavanje, na primjer ako radi na sporoj vezi.

Prioriteti. Preglednici obično dodjeljuju različite prioritete različitim resursima (stilovima, skriptama, fontovima, itd.) kako bi prvo učitali najvažnije resurse. U ovom slučaju, pretraživač određuje prioritet prema atributu as. Za preglednik Chrome možete pogledati puna tabela prioriteta.

Preload, prefetch i druge oznake

unaprijed dohvaćeno

<link rel= "prefetch"> traži od pretraživača da preuzme i kešira resurs (kao što je skripta ili stilska lista) u pozadini. 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 keširati.

I ovdje pretraživač ne radi ništa sa resursom nakon učitavanja. Skripte se ne izvršavaju, stilski listovi se ne primjenjuju. Resurs se jednostavno kešira i odmah stavlja na raspolaganje na zahtjev.

sintaksa

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

href ukazuje na resurs koji želite da preuzmete.

as može biti bilo šta što se može preuzeti u pretraživaču:

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

Važno je navesti atribut as - ovo pomaže pretraživaču da pravilno odredi prioritete i zakaže preuzimanja.

Kada koristiti

Za učitavanje resursa sa drugih stranica, ako vam je potreban resurs s druge stranice i želite ga unaprijed učitati da biste zatim ubrzali prikazivanje te stranice. Na primjer:

  • Imate online prodavnicu, a 40% korisnika napušta početnu stranicu za stranicu proizvoda. Koristi <link rel= "prefetch">, učitavanje CSS i JS datoteka za renderiranje stranica proizvoda.
  • Imate aplikaciju na jednoj stranici, a različite stranice učitavaju različite pakete. Kada korisnik posjeti stranicu, paketi za sve stranice na koje povezuje mogu se unaprijed učitati.

Vjerovatno je da se ova oznaka može bezbedno koristiti u bilo kojoj meri.. Pretraživači obično zakazuju prethodno preuzimanje sa najnižim prioritetom, tako da to nikome ne smeta. Samo imajte na umu da troši korisnički promet, što može koštati novac.

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

Pogledajte detalje

Opciona oznaka. Pregledač ne mora slijediti ovo uputstvo; može ga zanemariti, na primjer, na sporoj vezi.

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

preconnect

<link rel= "preconnect"> traži od pretraživača da se unaprijed poveže s domenom kada želite da ubrzate postavljanje veze u budućnosti.

Pregledač mora uspostaviti vezu ako preuzima bilo kakve resurse sa nove domene treće strane. Na primjer, ako učita Google Fontove, React fontove sa CDN-a ili zatraži JSON odgovor od API servera.

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 preuzimati resurse sa ovog domena.

sintaksa

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

href označava naziv domene za koji želite da odredite IP adresu. Može se specificirati s prefiksom (https://domain.com) ili bez njega (//domain.com).

Kada koristiti

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

  • Vaša aplikacija se nalazi na my-app.com i postavlja AJAX zahtjeve za api.my-app.com: Ne znate unaprijed određene upite jer se dinamički prave iz JS-a. Ovdje je sasvim prikladno koristiti oznaku za prethodno povezivanje na domenu.
  • Vaša aplikacija se nalazi na my-app.com i koristi Google fontove. Oni se preuzimaju u dva koraka: prvo se preuzima CSS datoteka sa domene fonts.googleapis.com, tada ova datoteka traži fontove sa fonts.gstatic.com. Ne možete znati iz kojih su specifičnih fajlova fontova fonts.gstatic.com trebat će vam dok ne učitate CSS datoteku, tako da možemo napraviti samo preliminarnu vezu prije.

Koristite ovu oznaku da malo ubrzate neki skript ili stil treće strane zbog unaprijed uspostavljene veze.

Ne pretjerujte. Uspostavljanje i održavanje veze je skupa operacija i za klijenta i za server. Koristite ovu oznaku za najviše 4-6 domena.

Pogledajte detalje

Opciona oznaka. Pregledač nije obavezan da prati ovo uputstvo i može ga ignorisati, na primer, ako je već uspostavljeno mnogo veza ili u nekom drugom slučaju.

Šta uključuje proces povezivanja?. Za povezivanje sa svakom web lokacijom, pretraživač mora učiniti sljedeće:

  • DNS rezolucija. Pronađite IP adresu servera (216.58.215.78) za navedeni naziv domene (google.com).
  • TCP rukovanje. Razmjena paketa (klijent → server → klijent) za pokretanje TCP veze sa serverom.
  • TLS rukovanje (samo HTTPS stranice). Dva kruga razmjene paketa (klijent → server → klijent → server → klijent) za pokretanje sigurne TLS sesije.

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

dns-prefetch

<link rel= "dns-prefetch"> traži od pretraživača da izvrši DNS razlučivanje za domenu unaprijed ako ćete se uskoro povezati s njim i želite ubrzati početnu vezu.

Pregledač mora odrediti IP adresu domene ako će dohvatiti bilo kakve resurse sa nove domene treće strane. Na primjer, učitavanje Google Fontova, React fontova sa CDN-a ili traženje JSON odgovora od API servera.

Za svaki novi domen, rezolucija DNS zapisa obično traje oko 20-120 ms. Ovo utječe samo na učitavanje prvog resursa iz date domene, ali i dalje dovodi do kašnjenja. Ako izvršimo DNS razlučivanje 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 koji želite da postavite IP adresu. Može se navesti s prefiksom (https://domain.com) ili bez njega (//domain.com).

Kada koristiti

Koristi se za domene koje će uskoro biti potrebne za preuzimanje resursa odatle za koje pretraživač ne zna unaprijed. Na primjer:

  • Vaša aplikacija se nalazi na my-app.com i postavlja AJAX zahtjeve za api.my-app.com: Ne znate unaprijed određene upite jer se dinamički prave iz JS-a. Ovdje je sasvim prikladno koristiti oznaku za prethodno povezivanje na domenu.
  • Vaša aplikacija se nalazi na my-app.com, i koristi Google fontove. Oni se preuzimaju u dva koraka: prvo se preuzima CSS datoteka sa domene fonts.googleapis.com, tada ova datoteka traži fontove sa fonts.gstatic.com. Ne možete znati iz kojih su specifičnih fajlova fontova fonts.gstatic.com trebat će vam sve dok ne učitate CSS fajl, tako da možemo samo unaprijed napraviti preliminarnu vezu.

Koristite ovu oznaku da malo ubrzate neki skript ili stil treće strane zbog unaprijed uspostavljene veze.

Imajte na umu slične karakteristike kao <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. Ovo se može opravdati u dva slučaja:

  • Želite li podržati starije pretraživače?. <link rel= "dns-prefetch" /> podržano od od IE10 i Safarija 5. <link rel= "preconnect"> je neko vrijeme bio podržan u Chromeu i Firefoxu, ali je dodat u Safari samo u 11.1 i još uvijek nije podržan u IE/Edge. Ako trebate podržati ove pretraživače, koristite <link rel= "dns-prefetch" /> kao rezervna opcija za <link rel= "preconnect">.
  • Želite da ubrzate veze na više od 4-6 domena. Tag <link rel= "preconnect"> Ne preporučuje se korištenje sa 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.

Pogledajte detalje

Opciona oznaka. Pregledač nije obavezan da prati ovu instrukciju, tako da možda neće izvršiti DNS rezoluciju, na primjer, ako ima mnogo takvih oznaka na stranici ili u nekom drugom slučaju.

Šta je DNS. Svaki server na Internetu ima jedinstvenu IP adresu, koja izgleda kao 216.58.215.78. Naziv stranice se obično unosi u adresnu traku pretraživača (npr. google.com), a DNS (Domain Name System) serveri ga poklapaju sa IP adresom servera (216.58.215.78).

Da bi odredio IP adresu, pretraživač mora da upita DNS server. Potrebno je 20−120 ms kada se povezujete na novu domenu treće strane.

DNS je keširan, iako ne baš pouzdano. Neki OS i pretraživači keširaju DNS upite: ovo će uštedjeti vrijeme na ponovljenim upitima, ali se ne može pouzdati u keširanje. Na Linuxu obično uopće ne radi. Chrome ima DNS keš memoriju, ali traje samo minut. Windows kešira DNS odgovore pet dana.

prerender

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

Uprkos (ili zbog) izuzetne efikasnosti ove oznake, u 2019 <link rel= "prerender"> slabo podržan u glavnim pretraživačima. Pogledajte više detalja. dole.

sintaksa

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

href ukazuje na URL koji želite da počnete da prikazujete u pozadini.

Kada koristiti

Kada ste zaista sigurni da će korisnik otići na određenu stranicu. Ako imate „tunel“ kroz koji 70% posetilaca stranice A ide na stranicu B, onda <link rel= "prerender"> na stranici A će pomoći da se stranica B prikaže vrlo brzo.

Ne pretjerujte. Prethodno prikazivanje je izuzetno skupo u smislu propusnog opsega i memorije. Nemojte koristiti <link rel= "prerender"> za više od jedne stranice.

Pogledajte detalje

Opciona oznaka. Pregledač ne mora slijediti ovo uputstvo i može ga zanemariti, na primjer, pri sporoj vezi ili kada nema dovoljno slobodne memorije.

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

Firefox i Safari uopće ne podržavaju ovu oznaku. Ovo ne krši specifikaciju, jer pretraživači nisu obavezni da prate ovo uputstvo; ali i dalje tužno. Greška u implementaciji Firefox je otvoren sedam godina. Postoje izvještaji da Safari ne podržava ni ovu oznaku.

Rezime

Koristite:

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

izvor: www.habr.com

Dodajte komentar