Šta odloženo učitavanje zapravo radi vašem Largest Contentful Paint-u

Odloženo učitavanje je odluka o raspoređivanju, a ne čarolija za brzinu

Odloženo učitavanje se često opisuje kao poboljšanje performansi, što je tačno na isti način na koji je nepakovanje kofera smanjenje težine. Pomaže zato što pregledač na početku radi manje.

Ta razlika je važna za Largest Contentful Paint, obično skraćeno LCP. LCP meri kada se najveći smisleni element u viewport-u renderuje. Na mnogim stranicama taj element je hero slika. Na drugima je to veliki naslov, poster slika, fotografija proizvoda ili blok sadržaja.

Odloženo učitavanje menja trenutak kada se resursi traže. Ono ne čini da se slika brže dekodira, da server brže odgovori ili da se font ranije renderuje. Ako odloženo učitate pogrešnu stvar, naročito element koji postaje LCP, govorite pregledaču da sačeka pre nego što preuzme baš ono što mora da prikaže da bi prošao Core Web Vitals.

Zato se odloženo učitavanje i previše koristi i nedovoljno razume.

Šta pregledač radi kada odloženo učitate sliku

Nativno odloženo učitavanje slika obično se dodaje ovako:

<img src='hero.jpg' loading='lazy' alt='...'>

Sa loading='lazy', pregledaču je dozvoljeno da odloži preuzimanje slike dok ne proceni da će slika verovatno biti potrebna. U praksi, pregledači koriste udaljenost od viewport-a, mrežne uslove, dimenzije slike i druge heuristike. Tačna pravila su detalji implementacije i mogu se menjati.

Sa loading='eager', ili bez lazy atributa u većini slučajeva, pregledač tretira sliku kao deo uobičajenog procesa učitavanja. I dalje mora da određuje prioritete između CSS-a, JavaScript-a, fontova, slika i drugih zahteva, ali slika je odmah dostupna za otkrivanje.

To znači da odloženo učitavanje prvenstveno utiče na tri faze:

• Otkrivanje: kada pregledač primeti resurs.
• Početak zahteva: kada mrežno preuzimanje počne.
• Vreme renderovanja: kada resurs konačno može da se dekodira i iscrta.

Za LCP je opasan početak zahteva. Ako zahtev za LCP sliku počne kasno, sve posle njega se takođe pomera kasnije.

Jednostavno pravilo: nikada ne odlažite učitavanje LCP kandidata

Ako je slika vidljiva u početnom viewport-u i verovatno je najveći sadržajni element, nemojte je odloženo učitavati.

To uključuje:

• hero slike
• primarne fotografije proizvoda iznad prvog ekrana
• velike uvodne slike članaka
• velike slike nalik pozadini implementirane kao <img>
• video poster slike kada je poster glavni vizuelni element

Pregledač ne može da renderuje LCP sliku dok ona nije zatražena, preneta, dekodirana i iscrtana. Odloženo učitavanje unosi neizvesnost pre prvog koraka. Čak i malo kašnjenje može biti dovoljno da LCP na sporijoj vezi pređe iz prihvatljivog u loš.

Uobičajen obrazac greške izgleda ovako:

1. Server šalje HTML.
2. Pregledač parsira sliku iznad prvog ekrana.
3. Slika ima loading='lazy'.
4. Pregledač čeka jer heuristika odloženog učitavanja kaže da može.
5. CSS i JavaScript nastavljaju da se učitavaju.
6. Zahtev za sliku počinje kasnije nego što bi trebalo.
7. LCP kasni, iako je sama datoteka slike razumno optimizovana.

Ovo je frustrirajuće jer stranica može izgledati uredno tokom pregleda koda. Problem nije samo veličina datoteke. Problem je prioritet.

Ako čitate laboratorijski izveštaj i pokušavate da utvrdite da li je LCP zaista problem, naš vodič za čitanje Lighthouse izveštaja bez panike namerno je praktičan: razdvojite terenske podatke, laboratorijske nagoveštaje i ispravke pre nego što počnete da menjate kod. (Napomena: ako je vaše rutiranje osetljivo na velika i mala slova, koristite tačan URL iz svog CMS-a.)

Ispravka: koristite stvarni interni URL

Ispravan URL Wux članka je How to read a Lighthouse report without panicking. Poenta ostaje ista: identifikujte LCP element pre nego što promenite ponašanje učitavanja.

Kada odloženo učitavanje može da poboljša LCP

Odloženo učitavanje može indirektno da poboljša LCP kada sklanja nekritične resurse s puta pregledaču.

Zamislite stranicu proizvoda sa hero slikom proizvoda na vrhu i carousel-om od dvanaest slika preporuka ispod prvog ekrana. Ako se svih trinaest slika učitava odmah, pregledač može trošiti propusni opseg i slotove veza na slike koje korisnik još ne može da vidi. Na ograničenoj mreži to može da se takmiči sa hero slikom, CSS-om ili font datotekama.

Odloženo učitavanje carousel slika ispod prvog ekrana može pomoći da se LCP slika učita ranije jer se tokom početnog učitavanja stranice manje nekritičnih zahteva takmiči za resurse.

To je legitimni performansni slučaj za odloženo učitavanje:

• odmah učitajte LCP kandidata iznad prvog ekrana
• odloženo učitajte slike ispod početnog viewport-a
• izbegavajte teške skripte koje kasno ubacuju važne slike
• zadržite dimenzije slika u HTML-u da biste izbegli pomeranja rasporeda

Odloženo učitavanje samo po sebi nije optimizacija za LCP. To je alat za određivanje prioriteta resursa. Pomaže kada štiti kritičnu putanju.

Bolji obrazac za LCP slike

Za LCP sliku iznad prvog ekrana, cilj je da je pregledač rano otkrije, rano zatraži i renderuje bez nestabilnosti rasporeda.

Čvrsta osnova izgleda ovako:

<img
  src='/images/product-hero.avif'
  srcset='/images/product-hero-800.avif 800w, /images/product-hero-1400.avif 1400w'
  sizes='(max-width: 768px) 100vw, 720px'
  width='1400'
  height='900'
  loading='eager'
  fetchpriority='high'
  decoding='async'
  alt='Black hiking backpack with roll-top closure'
>

Važni delovi nisu dekorativni:

• loading='eager' sprečava kašnjenje odloženog učitavanja.
• fetchpriority='high' govori pregledaču da je ova slika važna.
• width i height rezervišu prostor i smanjuju pomeranje rasporeda.
• srcset i sizes sprečavaju preuzimanje prevelikih datoteka.
• Moderan format može smanjiti vreme prenosa kada se koristi pažljivo.

Ako i dalje servirate jedan veliki JPEG za svaki ekran, format slike i responzivno dimenzionisanje mogu biti važniji od atributa za odloženo učitavanje. Za praktično stablo odluke pogledajte kada AVIF pobeđuje WebP, a kada ne.

Pozadinske slike zahtevaju dodatnu pažnju

CSS pozadinske slike ne otkrivaju se tako rano kao obične HTML slike. Pregledač mora da preuzme i parsira CSS pre nego što sazna za njih. Ako je vaš LCP element CSS pozadinska slika, već ste otežali otkrivanje.

To ne znači da su pozadinske slike zabranjene. Znači da treba da ih koristite namerno.

Za dekorativne slike, CSS pozadine su u redu. Za smislene hero vizuale, element <img> ili <picture> obično je bolji jer je vidljiv HTML parseru, podržava alt tekst i dobro radi sa atributima za responzivne slike.

Ako morate da koristite CSS pozadinu za LCP sliku, razmotrite njeno preload-ovanje:

<link rel='preload' as='image' href='/images/hero.avif'>

Preload takođe nije čarobni štapić. Preload previše slika stvara isti problem prioriteta u drugačijem kostimu. Koristite ga za jednu sliku koja je zaista važna, ne za svaku sliku u dizajn sistemu.

JavaScript odloženo učitavanje često pogoršava stvari

Pre nego što je nativno odloženo učitavanje bilo široko podržano, mnogi sajtovi su koristili JavaScript biblioteke koje su zamenjivale data-src sa src nakon učitavanja stranice ili nakon što se aktivira intersection observer. Neki to i dalje rade.

To može biti razumno za duge članke ili galerije sa mnogo slika. Loš je izbor za sadržaj iznad prvog ekrana.

Preload skener pregledača je brz, ali ne može da zatraži sliku čiji je URL sakriven u prilagođenom atributu dok se JavaScript ne pokrene. Ako vaša hero slika počinje kao data-src='hero.jpg', odložili ste otkrivanje iza preuzimanja skripte, parsiranja, izvršavanja i hydration-a framework-a.

To je loša razmena za LCP. Stavite URL-ove kritičnih slika u pravi HTML. Pustite pregledač da radi svoj posao.

LCP nije uvek problem sa slikom

Na nekim stranicama LCP element je tekst. U tom slučaju, odloženo učitavanje slika može imati malo direktnog uticaja. Usko grlo može biti CSS koji blokira renderovanje, spor odgovor servera, renderovanje na strani klijenta ili web fontovi.

Fontove vredi posebno pomenuti jer su čest skriveni uzrok kasnog renderovanja teksta. Veliki naslov može postati LCP, a ponašanje učitavanja fonta može odložiti ili promeniti trenutak kada se taj naslov iscrta. Ako rad na slikama ne pomera metriku, direktno pregledajte LCP element umesto da pretpostavljate. Naš članak o web fontovima kao dobitku za performanse pokriva dosadne ispravke koje često rade: manje težina, moderni formati, razumni fallback-ovi.

Kako testirati promene odloženog učitavanja bez samozavaravanja

Ne testirajte tako što ćete gledati svoju stranicu na kancelarijskom Wi-Fi-ju. Morate da vidite vreme zahteva.

Koristite ovaj tok rada:

1. Otvorite Chrome DevTools i snimite Performance trace.
2. Uključite network throttling, kao što su Fast 4G ili Slow 4G.
3. Ponovo učitajte stranicu sa isključenim cache-om.
4. Pronađite LCP marker.
5. Identifikujte LCP element.
6. U Network panelu proverite kada je taj resurs počeo da se učitava.

Ako LCP resurs počinje kasno, pitajte zašto:

• Da li je bio odloženo učitan?
• Da li ga je ubacio JavaScript?
• Da li je bio sakriven u CSS-u?
• Da li je dobio niži prioritet iza drugih slika?
• Da li je server sporo odgovorio?

Zatim napravite jednu promenu i ponovo testirajte. Rad na performansama postaje neuredan kada timovi u istom deployment-u promene format slike, odloženo učitavanje, preloading, JavaScript pakete i CDN podešavanja. Možda ćete poboljšati stranicu, ali nećete znati koja je promena bila važna.

I terenski podaci su važni. Laboratorijski alati su korisni za dijagnostiku, ali LCP varira prema uređaju, mreži, viewport-u, stanju cache-a i geografiji. Koristite real-user monitoring ili podatke iz Chrome User Experience Report-a kad god možete.

<!-- tool-cta:start -->

💡 Пробајте ово: Нека ваша LCP слика буде мала и учитана са приоритетом тако што ћете је обрадити помоћу Image Compressor, како би се брзо приказала без потребе за lazy loading-ом.

<!-- tool-cta:end -->

Praktična politika za većinu veb-sajtova

Za većinu marketinških sajtova, ecommerce stranica, dokumentacionih sajtova i izdavačkih stranica, ova politika je dovoljna:

• Primarna slika iznad prvog ekrana: učitajte odmah, razmotrite visok fetch prioritet.
• Slike sadržaja ispod prvog ekrana: učitajte odloženo.
• Ikonice i sitni UI resursi: obično nisu vredni pojedinačnog razmatranja.
• CSS background hero: razmotrite ponovo kao HTML sliku ili pažljivo preload-ujte.
• Hero slika ubačena JavaScript-om: popravite arhitekturu renderovanja ako je moguće.
• Carousel-i: odmah učitajte samo prvi vidljivi slajd; ostatak učitajte odloženo.

Postoje granični slučajevi. Heuristike pregledača se poboljšavaju. Framework-ovi dodaju automatske komponente za slike. Neke platforme sada izbegavaju odloženo učitavanje slika detektovanih blizu viewport-a. Ipak, princip se ne menja: kritični resursi treba da budu rani i očigledni; nekritični resursi treba da sačekaju.

Odloženo učitavanje je vredno kada izražava tu razliku. Štetno je kada sakriva najvažniji sadržaj od pregledača sve dok stranica već nije počela da gubi LCP trku.