Lazy loading: učitajte samo ono što posetilac zaista vidi

$body$

Zamislite stranicu sa 30 slika. Posetilac otvori sajt, vidi prve dve-tri, pročita naslov i ode. A njegov browser je u međuvremenu skinuo svih 30 slika — 25 megabajta saobraćaja za sadržaj koji niko nije pogledao. Lazy loading (odloženo učitavanje) rešava tačno taj problem: slika se učitava tek kada posetilac skroluje blizu nje.

Kako lazy loading radi

Umesto da browser odmah preuzme sve resurse, elementi ispod prve vidljive sekcije (takozvani „below the fold" sadržaj) dobijaju oznaku da sačekaju. Kada posetilac skroluje i element se približi vidljivom delu ekrana, browser ga tek tada zatraži sa servera. Rezultat: početno učitavanje je drastično lakše, a posetilac ne primećuje nikakvu razliku — slike se pojave pre nego što do njih doskroluje.

Najlakši način: native lazy loading

Dobra vest je da za osnovni lazy loading ne treba nikakav plugin ni JavaScript. Svi moderni browseri podržavaju atribut loading="lazy":

• <img src="slika.webp" loading="lazy" alt="..."> — za slike
• <iframe src="..." loading="lazy"></iframe> — za mape, YouTube embedove i slično

WordPress od verzije 5.5 automatski dodaje ovaj atribut na slike u sadržaju, tako da većina WordPress sajtova već ima osnovni lazy loading — često i ne znajući.

Ključna greška: lazy loading na prvoj slici

Najčešća greška koju viđamo u praksi: lazy loading uključen na svemu, pa i na glavnoj (hero) slici na vrhu stranice. To je kontraproduktivno — ta slika je obično i LCP element (Largest Contentful Paint, ključna Core Web Vitals metrika), i njeno odlaganje direktno pogoršava rezultat brzine.

Pravilo je jednostavno:

• Slike koje se vide odmah po otvaranju stranice: loading="eager" (ili bez atributa), a za najvažniju sliku dodajte i fetchpriority="high".
• Sve ispod prvog ekrana: loading="lazy".

Lazy loading za video i embedove

Najveći dobitak često nije na slikama nego na embedovima. Jedan YouTube embed povuče 500–800 KB skripti čim se stranica otvori. Rešenje je „facade" pristup: prikaže se samo sličica videa, a pravi player se učita tek na klik. Na WordPressu to rade pluginovi poput WP Rocket ili Lazy Load for Videos.

Šta lazy loading ne rešava

Lazy loading smanjuje količinu podataka, ali ne ubrzava sam server. Ako je TTFB (vreme do prvog bajta) loš, stranica i dalje sporo kreće. Zato lazy loading ima najviše smisla u kombinaciji sa brzim hostingom na NVMe diskovima i CDN-om koji servira slike sa lokacije blizu posetioca — obe stvari su uključene u naše hosting pakete. Za WordPress sajtove smo pripremili i optimizovan WordPress hosting gde je keširanje već podešeno.

Checklist za kraj

• Uključite loading="lazy" na sve slike ispod prvog ekrana.
• Hero sliku izuzmite i dajte joj fetchpriority="high".
• YouTube i mape zamenite facade pristupom.
• Uvek navedite width i height atribute da stranica ne „skače" tokom učitavanja.
• Proverite rezultat u PageSpeed Insights pre i posle.

Pola sata posla, a razlika se meri u sekundama — malo koja optimizacija daje toliko za tako malo truda.

$body$