Što lijeno učitavanje zapravo čini vašem Largest Contentful Paintu

Lijeno učitavanje je odluka o raspoređivanju, a ne čarolija za brzinu

Lijeno učitavanje često se opisuje kao poboljšanje performansi, što je točno na isti način na koji je nepakiranje kovčega smanjenje težine. Pomaže zato što preglednik na početku radi manje posla.

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

Lijeno učitavanje mijenja trenutak u kojem se resursi zatraže. Ne čini dekodiranje slike bržim, odgovor poslužitelja bržim ni prikaz fonta ranijim. Ako lijeno učitate pogrešnu stvar, osobito element koji postaje LCP, govorite pregledniku da pričeka prije nego što dohvati upravo ono što mora prikazati kako bi zadovoljio Core Web Vitals.

Zato se lijeno učitavanje i prečesto koristi i nedovoljno razumije.

Što preglednik radi kada lijeno učitate sliku

Izvorno lijeno učitavanje slika obično se dodaje ovako:

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

Uz loading='lazy', pregledniku je dopušteno odgoditi dohvaćanje slike dok ne procijeni da će slika vjerojatno biti potrebna. U praksi preglednici koriste udaljenost od viewporta, mrežne uvjete, dimenzije slike i druge heuristike. Točna pravila su implementacijski detalji i mogu se mijenjati.

Uz loading='eager', ili u većini slučajeva bez lazy atributa, preglednik sliku tretira kao dio uobičajenog procesa učitavanja. I dalje mora određivati prioritete među CSS-om, JavaScriptom, fontovima, slikama i drugim zahtjevima, ali slika je odmah otkriva.

To znači da lijeno učitavanje prvenstveno utječe na tri faze:

• Otkrivanje: kada preglednik uoči resurs.
• Početak zahtjeva: kada počinje mrežno dohvaćanje.
• Vrijeme prikaza: kada se resurs napokon može dekodirati i iscrtati.

Za LCP je opasna faza početak zahtjeva. Ako zahtjev za LCP sliku krene kasno, sve nakon toga također se pomiče kasnije.

Jednostavno pravilo: nikada ne lijeno učitavajte LCP kandidata

Ako je slika vidljiva u početnom viewportu i vjerojatno je najveći sadržajni element, nemojte je lijeno učitavati.

To uključuje:

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

Preglednik ne može prikazati LCP sliku dok ona nije zatražena, prenesena, dekodirana i iscrtana. Lijeno učitavanje unosi neizvjesnost prije prvog koraka. Čak i malo kašnjenje može biti dovoljno da LCP na sporijoj vezi prijeđe iz prihvatljivog u loš.

Uobičajen obrazac pogreške izgleda ovako:

1. Poslužitelj šalje HTML.
2. Preglednik parsira sliku iznad prvog zaslona.
3. Slika ima loading='lazy'.
4. Preglednik čeka jer heuristika lijenog učitavanja kaže da može.
5. CSS i JavaScript nastavljaju se učitavati.
6. Zahtjev za sliku počinje kasnije nego što bi trebao.
7. LCP kasni, iako je sama slikovna datoteka razumno optimizirana.

To je frustrirajuće jer stranica u pregledu koda može izgledati uredno. Problem nije samo veličina datoteke. Problem je prioritet.

Ako čitate laboratorijski izvještaj i pokušavate shvatiti je li LCP doista problem, naš vodič za čitanje Lighthouse izvještaja bez panike namjerno je praktičan: odvojite terenske podatke, laboratorijske naznake i popravke prije nego što počnete mijenjati kod. (Napomena: ako je vaše usmjeravanje osjetljivo na velika i mala slova, upotrijebite točan URL iz svog CMS-a.)

Ispravak: upotrijebite stvarni interni URL

Točan URL Wux članka je Kako čitati Lighthouse izvještaj bez panike. Poanta ostaje ista: identificirajte LCP element prije promjene ponašanja učitavanja.

Kada lijeno učitavanje može poboljšati LCP

Lijeno učitavanje može neizravno poboljšati LCP kada nekritične resurse drži izvan puta preglednika.

Zamislite stranicu proizvoda s hero slikom proizvoda na vrhu i karuselom od dvanaest slika preporuka ispod prvog zaslona. Ako se svih trinaest slika učitava eager načinom, preglednik može trošiti propusnost i mrežne veze na slike koje korisnik još ne može vidjeti. Na ograničenoj mreži to može konkurirati hero slici, CSS-u ili datotekama fontova.

Lijeno učitavanje slika u karuselu ispod prvog zaslona može pomoći da se LCP slika učita ranije jer se tijekom početnog učitavanja stranice natječe manje nekritičnih zahtjeva.

To je opravdan performansni slučaj za lijeno učitavanje:

• eager učitajte LCP kandidata iznad prvog zaslona
• lijeno učitajte slike ispod početnog viewporta
• izbjegavajte teške skripte koje kasno umeću važne slike
• zadržite dimenzije slika u HTML-u kako biste izbjegli pomake layouta

Lijeno učitavanje samo po sebi nije optimizacija LCP-a. To je alat za prioritizaciju resursa. Pomaže kada štiti kritični put.

Bolji obrazac za LCP slike

Za LCP sliku iznad prvog zaslona cilj je omogućiti pregledniku da je rano otkrije, rano zatraži i prikaže bez nestabilnosti layouta.

Čvrsta polazna 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 dijelovi nisu dekorativni:

• loading='eager' sprječava kašnjenje zbog lijenog učitavanja.
• fetchpriority='high' govori pregledniku da je ova slika važna.
• width i height rezerviraju prostor i smanjuju pomak layouta.
• srcset i sizes sprječavaju prevelika preuzimanja.
• Moderan format može smanjiti vrijeme prijenosa kada se koristi pažljivo.

Ako i dalje poslužujete jedan veliki JPEG svakom zaslonu, format slike i responzivno određivanje veličina mogu biti važniji od atributa za lijeno učitavanje. Za praktično stablo odluke pogledajte kada AVIF pobjeđuje WebP, a kada ne.

Pozadinske slike traže dodatnu pažnju

CSS pozadinske slike ne otkrivaju se tako rano kao obične HTML slike. Preglednik mora dohvatiti i parsirati CSS prije 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 biste trebali biti promišljeni.

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

Ako morate koristiti CSS pozadinu za LCP sliku, razmislite o njezinu preloadu:

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

Ni preload nije čarobni štapić. Preload previše slika stvara isti problem prioriteta u drugom ruhu. Koristite ga za jednu sliku koja je doista važna, a ne za svaku sliku u dizajnerskom sustavu.

JavaScript lijeno učitavanje često pogoršava stvari

Prije nego što je izvorno lijeno učitavanje dobilo široku podršku, mnoge su web-lokacije koristile JavaScript biblioteke koje su nakon učitavanja stranice ili nakon aktiviranja intersection observera mijenjale data-src u src. Neke to još uvijek rade.

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

Preload skener preglednika je brz, ali ne može zatražiti sliku čiji je URL skriven u prilagođenom atributu dok se JavaScript ne izvrši. Ako vaša hero slika počinje kao data-src='hero.jpg', odgodili ste otkrivanje iza preuzimanja skripte, parsiranja, izvršavanja i hidratacije frameworka.

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

LCP nije uvijek problem sa slikom

Na nekim je stranicama LCP element tekst. U tom slučaju lijeno učitavanje slika može imati malo izravnog učinka. Usko grlo može biti CSS koji blokira renderiranje, spor odgovor poslužitelja, renderiranje na strani klijenta ili web fontovi.

Fontove vrijedi posebno istaknuti jer su čest skriveni uzrok kasnog prikaza teksta. Veliki naslov može postati LCP, a ponašanje učitavanja fontova može odgoditi ili promijeniti trenutak kada se taj naslov iscrtava. Ako rad na slikama ne pomiče metriku, izravno pregledajte LCP element umjesto da pretpostavljate. Naš članak o web fontovima kao dobitku za performanse pokriva dosadne popravke koji često djeluju: manje debljina, moderni formati, razumna fallback rješenja.

Kako testirati promjene lijenog učitavanja bez samozavaravanja

Nemojte testirati tako da gledate svoju stranicu na uredskom Wi-Fiju. Morate vidjeti vremenski slijed zahtjeva.

Koristite ovaj tijek rada:

1. Otvorite Chrome DevTools i snimite Performance trace.
2. Uključite ograničavanje mreže, primjerice Fast 4G ili Slow 4G.
3. Ponovno učitajte stranicu s onemogućenim cacheom.
4. Pronađite LCP marker.
5. Identificirajte LCP element.
6. U Network panelu provjerite kada se taj resurs počeo učitavati.

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

• Je li bio lijeno učitan?
• Je li umetnut JavaScriptom?
• Je li bio skriven u CSS-u?
• Je li izgubio prioritet iza drugih slika?
• Je li poslužitelj sporo odgovorio?

Zatim napravite jednu promjenu i ponovno testirajte. Rad na performansama postaje neuredan kada timovi u istoj implementaciji promijene format slika, lijeno učitavanje, preload, JavaScript pakete i CDN postavke. Možda ćete poboljšati stranicu, ali nećete znati koja je promjena bila važna.

Važni su i terenski podaci. Laboratorijski alati korisni su za dijagnostiku, ali LCP varira prema uređaju, mreži, viewportu, stanju cachea i geografiji. Koristite praćenje stvarnih korisnika ili podatke Chrome User Experience Reporta kada možete.

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

💡 Isprobajte ovo: Održavajte svoju LCP sliku malom i učitanom s prioritetom tako da je obradite kroz Image Compressor, kako bi se brzo prikazala bez potrebe za lazy loadingom.

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

Praktična pravila za većinu web-lokacija

Za većinu marketinških web-lokacija, ecommerce stranica, dokumentacijskih web-lokacija i izdavačkih stranica ova su pravila dovoljna:

• Primarna slika iznad prvog zaslona: eager učitavanje, razmotrite visoki prioritet dohvaćanja.
• Slike sadržaja ispod prvog zaslona: lijeno učitavanje.
• Ikone i sitni UI resursi: obično ne vrijedi razmišljati o njima pojedinačno.
• CSS pozadinski hero: razmotrite HTML sliku ili pažljiv preload.
• Hero slika umetnuta JavaScriptom: popravite arhitekturu renderiranja ako je moguće.
• Karuseli: eager učitajte samo prvi vidljivi slide; ostalo lijeno učitajte.

Postoje rubni slučajevi. Heuristike preglednika se poboljšavaju. Frameworkovi dodaju automatske komponente za slike. Neke platforme sada izbjegavaju lijeno učitavanje slika otkrivenih blizu viewporta. Ipak, načelo se ne mijenja: kritični resursi trebaju biti rani i očiti; nekritični resursi trebaju čekati.

Lijeno učitavanje je vrijedno kada izražava tu razliku. Štetno je kada skriva najvažniji sadržaj od preglednika sve dok stranica već ne počne gubiti utrku za LCP.