Poboljšanje brzine web stranice pomoću savjeta o resursima: Preload, Prefetch i Preconnect

U današnjem brzom digitalnom svijetu, brzina web stranice je najvažnija. Korisnici očekuju da se web stranice učitavaju brzo i reagiraju trenutno. Sporo vrijeme učitavanja može dovesti do lošeg korisničkog iskustva, veće stope napuštanja početne stranice i u konačnici, gubitka posla. Savjeti o resursima su moćni alati koji mogu pomoći programerima da optimiziraju vrijeme učitavanja web stranice govoreći pregledniku koji su resursi važni i kako ih prioritetizirati. Ovaj članak istražuje tri ključna savjeta o resursima: preload, prefetch i preconnect, te pruža praktične primjere za implementaciju.

Razumijevanje savjeta o resursima

Savjeti o resursima su direktive koje upućuju preglednik o resursima koji će web stranici trebati u budućnosti. Oni omogućuju programerima da proaktivno informiraju preglednik o kritičnim resursima, omogućujući mu da ih dohvati ili se poveže s njima ranije nego što bi inače. To može značajno smanjiti vrijeme učitavanja i poboljšati percipirane performanse.

Tri primarna savjeta o resursima su:

Preload: Dohvaća kritične resurse potrebne za početno učitavanje stranice.
Prefetch: Dohvaća resurse koji će vjerojatno biti potrebni za buduće navigacije ili interakcije.
Preconnect: Uspostavlja rane veze s važnim poslužiteljima trećih strana.

Preload: Prioritizacija kritičnih resursa

Što je Preload?

Preload je deklarativno dohvaćanje koje vam omogućuje da kažete pregledniku da dohvati resurs potreban za trenutnu navigaciju što je ranije moguće. Ovo je posebno korisno za resurse koje preglednik otkriva kasno, kao što su slike, fontovi, skripte ili stilski listovi učitani putem CSS-a ili JavaScripta. Prethodnim učitavanjem tih resursa možete spriječiti da postanu render-blocking i poboljšati percipiranu brzinu učitavanja vaše web stranice.

Kada koristiti Preload

Koristite preload za:

Fontove: Rano učitavanje prilagođenih fontova može spriječiti flash of unstyled text (FOUT) ili flash of invisible text (FOIT).
Slike: Prioritizacija slika iznad pregiba osigurava da se brzo učitavaju, poboljšavajući početno korisničko iskustvo.
Skripte i stilski listovi: Rano učitavanje kritičnih CSS ili JavaScript datoteka sprječava render-blocking.
Module i Web Workers: Prethodno učitavanje modula ili web workera može poboljšati odzivnost vaše aplikacije.

Kako implementirati Preload

Možete implementirati preload koristeći <link> oznaku u <head> vašeg HTML dokumenta:

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">

Objašnjenje:

rel="preload": Određuje da bi preglednik trebao prethodno učitati resurs.
href="/path/to/resource": URL resursa koji se treba prethodno učitati.
as="type": Određuje vrstu resursa koji se prethodno učitava (npr. font, stil, skripta, slika). Atribut `as` je obavezan i ključan da preglednik pravilno prioritetizira i rukuje resursom. Korištenje ispravne vrijednosti `as` osigurava da preglednik primjenjuje ispravnu Content Security Policy (CSP) i šalje ispravan Accept header.
type="mime/type": (Neobavezno, ali preporučeno) Određuje MIME vrstu resursa. To pomaže pregledniku da odabere ispravan format resursa, posebno za fontove.
crossorigin="anonymous": (Potrebno za fontove učitane s drugog izvora) Određuje CORS način rada za zahtjev. Ako učitavate fontove s CDN-a, vjerojatno će vam trebati ovaj atribut.

Primjer: Prethodno učitavanje fonta

Zamislite da imate prilagođeni font pod nazivom 'OpenSans' koji se koristi na vašoj web stranici. Bez preload, preglednik otkriva ovaj font tek nakon parsiranja CSS datoteke. To može uzrokovati kašnjenje u renderiranju teksta s ispravnim fontom. Prethodnim učitavanjem fonta možete ukloniti ovo kašnjenje.

<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Primjer: Prethodno učitavanje kritične CSS datoteke

Ako vaša web stranica ima kritičnu CSS datoteku koja je bitna za renderiranje početnog prikaza, njezino prethodno učitavanje može značajno poboljšati percipirane performanse.

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

Najbolje prakse za Preload

Prioritetizirajte kritične resurse: Učitajte samo resurse koji su bitni za početno učitavanje stranice. Prekomjerna upotreba preload može negativno utjecati na performanse.
Koristite ispravan as atribut: Uvijek odredite ispravan as atribut kako biste osigurali da preglednik pravilno rukuje resursom.
Uključite type atribut: Uključite type atribut kako biste pomogli pregledniku da odabere ispravan format resursa.
Koristite crossorigin za fontove s različitih izvora: Prilikom učitavanja fontova s drugog izvora, provjerite jeste li uključili crossorigin atribut.
Testirajte performanse: Uvijek testirajte utjecaj preload na performanse kako biste bili sigurni da zapravo poboljšava vrijeme učitavanja. Koristite alate kao što su Google PageSpeed Insights ili WebPageTest za mjerenje utjecaja.

Prefetch: Predviđanje budućih potreba

Što je Prefetch?

Prefetch je savjet o resursima koji govori pregledniku da dohvati resurse koji će vjerojatno biti potrebni za buduće navigacije ili interakcije. Za razliku od preload, koji se usredotočuje na resurse potrebne za trenutnu stranicu, prefetch predviđa sljedeći potez korisnika. To je posebno korisno za poboljšanje brzine učitavanja sljedećih stranica ili komponenti.

Kada koristiti Prefetch

Koristite prefetch za:

Resurse sljedeće stranice: Ako znate da će korisnik vjerojatno prijeći na određenu stranicu, prefetch njezine resurse.
Resurse za korisničke interakcije: Ako korisnička interakcija pokreće učitavanje određenih resursa (npr. modalni prozor, obrazac), prefetch te resurse.
Slike i sredstva na drugim stranicama: Preload slike ili sredstva koja se koriste na drugim stranicama koje će korisnik vjerojatno posjetiti.

Kako implementirati Prefetch

Možete implementirati prefetch koristeći <link> oznaku u <head> vašeg HTML dokumenta:

<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">

Objašnjenje:

rel="prefetch": Određuje da bi preglednik trebao prefetch resurs.
href="/path/to/resource": URL resursa koji se treba prefetch.

Primjer: Prefetch resursa sljedeće stranice

Ako vaša web stranica ima jasan tijek korisnika, kao što je višestepeni obrazac, možete prefetch resurse za sljedeći korak kada je korisnik na trenutnom koraku.

<link rel="prefetch" href="/form/step2.html">

Primjer: Prefetch resursa za modalni prozor

Ako vaša web stranica koristi modalni prozor koji učitava dodatne resurse kada se otvori, možete prefetch te resurse kako biste osigurali glatko korisničko iskustvo.

<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">

Najbolje prakse za Prefetch

Koristite štedljivo: Prefetch treba koristiti štedljivo jer može potrošiti propusnost i resurse čak i ako korisniku nisu potrebni prefetch resursi.
Prioritetizirajte vjerojatne navigacije: Prefetch resurse za stranice ili interakcije koje će se najvjerojatnije dogoditi.
Uzmite u obzir mrežne uvjete: Prefetch je najprikladniji za korisnike sa stabilnim i brzim internetskim vezama. Izbjegavajte prefetch velikih resursa za korisnike sa sporim vezama ili vezama s ograničenim prijenosom podataka. Možete koristiti Network Information API za otkrivanje vrste korisničke veze i prilagoditi prefetching u skladu s tim.
Pratite performanse: Pratite utjecaj prefetch na performanse vaše web stranice kako biste osigurali da pruža neto korist.
Koristite dinamičko prefetching: Implementirajte prefetching dinamički na temelju korisničkog ponašanja i podataka analitike. Na primjer, prefetch resurse za stranice koje korisnici često posjećuju koji su trenutno na trenutnoj stranici.

Preconnect: Uspostavljanje ranih veza

Što je Preconnect?

Preconnect je savjet o resursima koji vam omogućuje da uspostavite rane veze s važnim poslužiteljima trećih strana. Uspostavljanje veze uključuje nekoliko koraka, uključujući DNS lookup, TCP handshake i TLS negocijaciju. Ti koraci mogu dodati značajnu latenciju učitavanju resursa s tih poslužitelja. Preconnect vam omogućuje da pokrenete te korake u pozadini, tako da kada preglednik treba dohvatiti resurs s poslužitelja, veza je već uspostavljena.

Kada koristiti Preconnect

Koristite preconnect za:

Poslužitelje trećih strana: Poslužitelje koji hostiraju fontove, CDN-ove, API-je ili bilo koje druge resurse na koje se oslanja vaša web stranica.
Često korištene poslužitelje: Poslužitelje kojima vaša web stranica često pristupa.

Kako implementirati Preconnect

Možete implementirati preconnect koristeći <link> oznaku u <head> vašeg HTML dokumenta:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">

Objašnjenje:

rel="preconnect": Određuje da bi se preglednik trebao preconnect s poslužiteljem.
href="https://example.com": URL poslužitelja za preconnect.
crossorigin: (Neobavezno, ali potrebno za resurse učitane s CORS-om) Određuje da veza zahtijeva CORS.

Primjer: Preconnecting s Google fontovima

Ako vaša web stranica koristi Google fontove, preconnecting s https://fonts.gstatic.com može značajno smanjiti latenciju učitavanja fontova.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Atribut `crossorigin` je ovdje ključan jer Google fontovi koriste CORS za posluživanje fontova.

Primjer: Preconnecting s CDN-om

Ako vaša web stranica koristi CDN za posluživanje statičkih sredstava, preconnecting s nazivom hosta CDN-a može smanjiti latenciju učitavanja tih sredstava.

<link rel="preconnect" href="https://cdn.example.com">

Najbolje prakse za Preconnect

Koristite razborito: Preconnecting s previše poslužitelja zapravo može pogoršati performanse, jer preglednik ima ograničene resurse za uspostavljanje veza.
Prioritetizirajte važne poslužitelje: Preconnect s poslužiteljima koji su najkritičniji za performanse vaše web stranice.
Uzmite u obzir DNS-Prefetch: Za poslužitelje s kojima se ne trebate u potpunosti preconnect, ali i dalje želite rano riješiti DNS, razmislite o korištenju <link rel="dns-prefetch" href="https://example.com">. DNS-prefetch obavlja samo DNS lookup, što je manje zahtjevno za resurse od punog preconnect.
Testirajte performanse: Uvijek testirajte utjecaj preconnect na performanse kako biste osigurali da pruža neto korist.
Kombinirajte s drugim savjetima o resursima: Koristite preconnect u kombinaciji s preload i prefetch kako biste postigli optimalne performanse. Na primjer, preconnect s poslužiteljem koji hostira vaše fontove, a zatim preload datoteke fontova.

Kombiniranje savjeta o resursima za optimalne performanse

Prava snaga savjeta o resursima leži u njihovom strateškom kombiniranju. Evo praktičnog primjera:

Zamislite web stranicu koja koristi prilagođeni font hostiran na CDN-u i učitava kritičnu JavaScript datoteku.

Preconnect s CDN-om: Uspostavite ranu vezu s CDN-om koji hostira font i JavaScript datoteku.
```
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

Preload font: Prioritetizirajte učitavanje fonta kako biste spriječili FOUT.

<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Preload JavaScript datoteka: Prioritetizirajte učitavanje JavaScript datoteke kako biste osigurali da je dostupna kada je to potrebno.
```
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
```

Alati za analizu savjeta o resursima

Nekoliko alata može vam pomoći da analizirate učinkovitost vaših savjeta o resursima:

Google PageSpeed Insights: Pruža preporuke za optimizaciju performansi vaše web stranice, uključujući upotrebu savjeta o resursima.
WebPageTest: Omogućuje vam testiranje performansi vaše web stranice s različitih lokacija i mrežnih uvjeta.
Chrome DevTools: Panel Network u Chrome DevTools prikazuje vrijeme učitavanja resursa i može vam pomoći u prepoznavanju mogućnosti za optimizaciju.
Lighthouse: Automatizirani alat za poboljšanje kvalitete web stranica. Ima revizije za performanse, pristupačnost, progresivne web aplikacije, SEO i još mnogo toga.

Uobičajene zamke i kako ih izbjeći

Prekomjerna upotreba savjeta o resursima: Korištenje previše savjeta o resursima može negativno utjecati na performanse. Usredotočite se na najkritičnije resurse.
Netočan as atribut: Korištenje pogrešnog as atributa za preload može spriječiti ispravno učitavanje resursa.
Zanemarivanje CORS-a: Neuključivanje atributa crossorigin prilikom učitavanja resursa s drugog izvora može uzrokovati pogreške pri učitavanju.
Ne testiranje performansi: Uvijek testirajte utjecaj savjeta o resursima na performanse kako biste bili sigurni da pružaju neto korist.
Netočne staze: Dvaput provjerite i osigurajte da su sve staze datoteka i URL-ovi navedeni za savjete o resursima točni, inače će to rezultirati pogreškom.

Budućnost savjeta o resursima

Savjeti o resursima se neprestano razvijaju, s novim značajkama i poboljšanjima koja se dodaju specifikacijama preglednika. Praćenje najnovijih događaja u savjetima o resursima može vam pomoći da dodatno optimizirate performanse svoje web stranice. Na primjer, modulepreload je noviji savjet o resursima posebno dizajniran za prethodno učitavanje JavaScript modula. Također, atribut `priority` za savjete o resursima omogućuje vam da odredite prioritet resursa u odnosu na druge resurse. Podrška preglednika za te značajke još uvijek se razvija, stoga provjerite kompatibilnost prije nego što ih implementirate.

Zaključak

Savjeti o resursima moćni su alati za optimizaciju vremena učitavanja web stranice i poboljšanje korisničkog iskustva. Strateškom upotrebom preload, prefetch i preconnect možete proaktivno informirati preglednik o kritičnim resursima, smanjiti latenciju i poboljšati percipirane performanse vaše web stranice. Ne zaboravite prioritetizirati kritične resurse, koristiti savjete o resursima razborito i uvijek testirati utjecaj svojih promjena na performanse. Slijedeći najbolje prakse navedene u ovom članku, možete značajno poboljšati performanse svoje web stranice i pružiti bolje iskustvo svojim korisnicima diljem svijeta.