Postoji mnogi načini za poboljšanje web performansi. Jedan od njih je predučitavanje sadržaja koji će biti potreban kasnije. Prefetching CSS, prethodno renderiranje cijele stranice ili rješavanje imena domene. Radimo sve unaprijed, a zatim odmah prikazujemo rezultat! Zvuči sjajno.

Još bolje je što je to vrlo jednostavno za implementaciju. Pet tagova daju pretraživaču naredbu za prethodne radnje:

Ukratko ćemo objasniti što oni rade i kada ih koristiti.

Pređi na: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> govori pretraživaču da što prije učita i kešira resurs (npr. skriptu ili stilsku tablicu). To je korisno kada će resurs biti potreban za nekoliko sekundi nakon učitavanja stranice — i želite ubrzati proces.

Pretraživač ne radi ništa s resursom nakon učitavanja. Skripte se ne izvršavaju, stilovi se ne primjenjuju. Resurs se jednostavno kešira i odmah se pruža na zahtjev.

Sintaksa

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

href ukazuje na resurs koji želite preuzeti.

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

style za stilizaciju,
script za skripte,
font za fontove,
fetch za resurse preuzete pomoću fetch() ili XMLHttpRequest,
cjelovit popis vidi na MDN.

Važno je navesti atribut as – to pomaže pretraživaču da ispravno postavi prioritete i planira učitavanje.

Kada koristiti

Koristite predučitavanje kada će resurs biti potreban u vrlo bliskoj budućnosti. Na primjer:

Nestandardni fontovi iz vanjske datoteke:
```
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Po defaultu comic-sans.woff2 započinje učitavanje tek nakon učitavanja i analize index.css. Da ne čekate toliko dugo, možete učitati font ranije pomoću <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Ako svoje stilove dijelite prema pristupu Critical CSS na dva dijela, kritički (za odmah renderiranje) i nekritički:
```
/* Inlined critical styles */
```
S ovim pristupom, nekritične stilove će početi učitavati samo kada se pokrene JavaScript, što se može dogoditi nekoliko sekundi nakon renderiranja. Umjesto čekanja na JS, koristite <link rel= "preload">, kako biste započeli učitavanje ranije:
```
/* Ugrađeni kritični stilovi */
```

Ne zlorabite preuzimanje. Ako preuzimate sve nasumično, sajt se neće čarobno ubrzati, naprotiv, to može ometati pravilno planiranje rada pretraživača.

Ne brkajte s prefetchingom. Ne koristite <link rel= "preload">, ako vam resurs nije potreban odmah nakon učitavanja stranice. Ako će biti potreban kasnije, na primjer, za sljedeću stranicu, koristite <link rel= "prefetch">.

Detalji

Ovo je obavezan tag za izvršavanje od strane pretraživača (ako ga podržava), za razliku od svih drugih tagova povezanih s unaprijed učitavanjem. Pretraživač mora preuzeti resurs naveden u <link rel="preload">. U drugim slučajevima može ignorirati unaprijed učitavanje, na primjer, ako radi na sporoj vezi.

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

prefetch

<link rel= "prefetch"> traži od pretraživača da preuzme i kešira resurs (na primjer, skriptu ili tabelu stilova) u pozadini. Učitavanje se odvija s niskim prioritetom, stoga ne ometa važnije resurse. Ovo je korisno ako će resurs biti potreban na sljedećoj stranici i želite ga prethodno keširati.

Ni ovdje pretraživač ne radi ništa s resursom nakon preuzimanja. Skripte se ne izvršavaju, tabele stilova se ne primjenjuju. Resurs se jednostavno kešira i odmah se pruža na zahtjev.

Sintaksa

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

href ukazuje na resurs koji želite preuzeti.

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

style za stilizaciju,
script za skripte,
font za fontove,
fetch za resurse preuzete pomoću fetch() ili XMLHttpRequest,
cjelovit popis vidi na MDN.

Važno je navesti atribut as — to pomaže pretraživaču da pravilno postavi prioritete i planira učitavanje.

Kada koristiti

Za učitavanje resursa s drugih stranica, ako vam je potreban resurs s druge stranice, a želite ga unaprijed učitati kako biste kasnije ubrzali renderiranje te stranice. Na primjer:

Imate internetsku trgovinu, a 40% korisnika napušta početnu stranicu da bi prešlo na stranicu proizvoda. Iskoristite <link rel= "prefetch">, učitavanjem CSS i JS datoteka za renderiranje stranica s proizvodom.
Imate jednostranu aplikaciju, a različite stranice učitavaju različite pakete. Kada korisnik posjeti neku stranicu, moguće je unaprijed učitati pakete za sve stranice na koje se ona referira.

Vjerojatno se ova oznaka može sigurno koristiti u neograničenim količinama. Preglednici obično planiraju prefetch s najmanjim prioritetom, tako da nikome ne smeta. Samo imajte na umu da se troši korisnički promet, što može koštati novac.

Ne za hitne zahtjeve. Ne koristite <link rel= "prefetch">, kada će resurs biti potreban za nekoliko sekundi. U tom slučaju koristite <link rel= "preload">.

Detalji

Neobavezna oznaka. Preglednik nije dužan slijediti ovu uputu, može je ignorirati, na primjer, na sporoj vezi.

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

preconnect

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

Preglednik bi trebao uspostaviti vezu ako preuzima nekakve resurse s novog vanjskog domena. Na primjer, ako učitava Google Fonts, React iz CDN-a ili traži JSON odgovor s API servera.

Uspostavljanje nove veze obično traje nekoliko stotina milisekundi. Izvršava se jednom, ali ipak oduzima vrijeme. Ako ste unaprijed uspostavili vezu, uštedjet ćete vrijeme i brže učitati resurse s te domene.

Sintaksa

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

href označava ime domene za koju treba 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 za učitavanje važnog stila, skripte ili slike s njih, ali ne znate URL resursa unaprijed. Na primjer:

Vaša aplikacija je smještena na my-app.com i šalje AJAX zahtjeve na api.my-app.com: ne znate unaprijed konkretne zahtjeve, jer se oni dinamički generiraju iz JS-a. Ovdje je sasvim prikladna upotreba oznake za unaprijed povezivanje s domenom.
Vaša aplikacija je smještena na my-app.com i koristi Google Fonts. Učitavaju se u dva koraka: prvo se učitava CSS datoteka s domene fonts.googleapis.com, zatim ova datoteka traži fontove s fonts.gstatic.com. Ne možete znati koje konkretne datoteke fontova iz fonts.gstatic.com će vam biti potrebne dok ne preuzmete CSS datoteku, stoga unaprijed možemo samo uspostaviti preliminarnu vezu.

Upotrijebite ovu oznaku da malo ubrzate neku vanjsku skriptu ili stil prijenosom preliminarne veze.

Nemojte pretjerivati. Uspostavljanje i održavanje veze je skupa operacija kako za klijenta, tako i za poslužitelj. Koristite ovu oznaku maksimalno za 4-6 domena.

Detalji

Neobavezna oznaka. Preglednik nije obvezan slijediti ovu instrukciju i može je ignorirati, na primjer, ako su već uspostavljene mnoge veze ili u nekom drugom slučaju.

Što uključuje proces povezivanja. Da bi se spojio na svaku web stranicu, preglednik mora izvršiti sljedeće radnje:

Rješavanje DNS-a. Pronaći IP adresu poslužitelja (216.58.215.78) za navedeno domena (google.com).
TCP rukovanje. Razmjena paketa (klijent → poslužitelj → klijent) radi iniciranja TCP veze s poslužiteljem.
TLS rukovanje (samo za HTTPS stranice). Dva kruga razmjene paketa (klijent → poslužitelj → klijent → poslužitelj → klijent) za iniciranje sigurnog TLS sesije.

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

dns-prefetch

<link rel= "dns-prefetch"> traži od preglednika da unaprijed izvrši rješavanje DNS-a za domenu, ako ćete se ubrzo povezati s njom i želite ubrzati početnu vezu.

Preglednik mora odrediti IP adresu domene ako će preuzimati resurse s nove vanjske domene. Na primjer, preuzimanje Google Fonts ili React iz CDN-a, ili traženje JSON odgovora s API poslužitelja.

Za svaku novu domenu, rješavanje DNS zapisa obično traje oko 20−120 ms. To utječe samo na učitavanje prvog resursa s te domene, ali i dalje predstavlja kašnjenje. Ako izvršimo rješavanje DNS-a unaprijed, možemo uštedjeti vrijeme i učitati resurs brže.

Sintaksa

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

href ukazuje na domensko ime za koje treba uspostaviti IP adresu. Može se označiti s prefiksom (https://domain.com) ili bez njega (//domain.com).

Kada koristiti

Koristite za domene koje će uskoro biti potrebne kako bi se preuzeli resursi s kojih preglednik unaprijed ne zna. Na primjer:

Vaša aplikacija je smještena na my-app.com i šalje AJAX zahtjeve na api.my-app.com: ne znate unaprijed konkretne zahtjeve, jer se oni dinamički generiraju iz JS-a. Ovdje je sasvim prikladna upotreba oznake za unaprijed povezivanje s domenom.
Vaša aplikacija je smještena na my-app.com, i koristi Google Fonts. Učitavaju se u dva koraka: prvo se preuzima CSS datoteka s domene fonts.googleapis.com, zatim ova datoteka traži fontove s fonts.gstatic.com. Ne možete znati koje konkretne datoteke fontova iz fonts.gstatic.com će vam biti potrebne dok ne preuzmete CSS datoteku, stoga unaprijed možemo samo uspostaviti preliminarnu vezu.

Upotrijebite ovu oznaku da malo ubrzate neku vanjsku skriptu ili stil prijenosom preliminarne veze.

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

Želite podržati stare preglednike. <link rel= "dns-prefetch" /> podržava od IE10 i Safari 5. <link rel= "preconnect"> neko vreme je podržavan u Chrome-u i Firefox-u, ali je u Safari ubačen tek u 11.1 i još uvek nije podržan u IE/Edge. Ako je potrebno podržavati te preglednike, koristite <link rel= "dns-prefetch" /> kao rezervnu opciju za <link rel= "preconnect">.

Želite ubrzati vezu sa više od 4−6 domena. Tag <link rel= "preconnect"> se ne preporučuje koristiti 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 u slučaju potrebe koristite.

Detalji

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

Što je DNS. Svakom serveru na internetu pripada jedinstvena IP adresa koja izgleda kao 216.58.215.78. U adresnu traku preglednika obično se unosi naziv sajta (na primjer, google.com), a DNS serveri (Domain Name System) ga usklađuju sa IP adresom servera (216.58.215.78).

Da bi odredio IP adresu, preglednik mora poslati zahtjev DNS serveru. To traje 20−120 ms prilikom povezivanja sa novom eksternom domenom.

DNS se kešira, iako ne baš pouzdano. Neki operativni sistemi i pregledači keširaju DNS zahtjeve: to će uštedeti vreme prilikom ponovnih zahtjeva, ali na keširanje se ne može osloniti. U Linuxu to obično uopšte ne funkcioniše. Chrome ima DNS keš, ali opstaje samo minut. Windows kešira DNS odgovore pet dana.

prerender

<link rel= "prerender"> traži pregledniku da učita URL adresu i prikaže je na nevidljivoj kartici. Kada korisnik klikne na link, stranica bi trebala prikazati odmah. Ovo je korisno ako ste sigurni da će korisnik posetiti određenu stranicu i želite ubrzati njeno prikazivanje.

Uprkos izuzetnoj efikasnosti ovog taga (ili zbog nje), 2019. godine <link rel= "prerender"> slabo je podržan u glavnim preglednicima. Više detalja na donjem.

Sintaksa

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

href ukazuje na URL za koji želite pokrenuti renderovanje u pozadini.

Kada koristiti

Kada ste zaista sigurni da će korisnik preći na određenu stranicu. Ako imate «tunel» kroz koji 70% posjetitelja stranice A prelazi na stranicu B, tada <link rel= "prerender"> na stranici A vrlo brzo može prikazati stranicu B.

Nemojte pretjerivati. Predrensanje je iznimno skupo u smislu prometa i memorije. Nemojte koristiti <link rel= "prerender"> više od jedne stranice.

Detalji

Neobavezna oznaka. Preglednik nije obavezan slijediti ovu instrukciju i može je ignorirati, na primjer, na sporoj vezi ili kada nema dovoljno slobodne memorije.

Radi uštede memorije Chrome ne radi potpuno rendanje, već samo predučitavanje NoState. To znači da Chrome učitava stranicu i sve njene resurse, ali ne radi rendanje i ne izvršava JavaScript.

Firefox i Safari uopće ne podržavaju ovu oznaku. To ne krši specifikaciju, jer preglednici nisu obavezni izvršiti ovu instrukciju; ali svejedno je žalosno. Greška u implementaciji u Firefoxu je postojala sedam godina. Ima izvještaja da Safari također ne podržava ovu oznaku.

Sažetak

Koristite:

<link rel= "preload"> — kada će vam trebati resurs za nekoliko sekundi
<link rel= "prefetch"> — kada će vam trebati resurs na sljedećoj stranici
<link rel= "preconnect"> — kada znate da će vam uskoro biti potreban resurs, ali još ne znate njegov puni URL
<link rel= "dns-prefetch"> — slično, kada znate da će vam uskoro biti potreban resurs, ali još ne znate njegov puni URL (za stare preglednike)
<link rel= "prerender"> — kada ste sigurni da će korisnici preći na određenu stranicu i želite ubrzati njeno prikazivanje

Izvor: habr.com