Kako koristiti lazy loading za slike i video na web stranicama

Kad posjetite neku web stranicu i ona se učita u trenu, vjerojatno ne razmišljate o tome što se događa u pozadini. No iza te “magične” brzine često stoji jedan nepretenciozan, ali moćan trik: lazy loading. Riječ je o tehnici koja može promijeniti način na koji se vaša stranica doživljava i to ne samo od strane posjetitelja, već i Googlea.

Kad je internet bio spor, učitavanje jedne stranice s desetak slika znalo je potrajati cijelu vječnost. Danas su brzine mnogo bolje, ali problem je što su i stranice postale “teže”  pune velikih slika visoke rezolucije, HD videa, interaktivnih elemenata i animacija. Lazy loading ulazi na scenu kao pametan kompromis: sadržaj se ne učitava dok ga korisnik stvarno ne zatreba, čime se smanjuje početno opterećenje.

Zanimljivo je da ljudi često misle kako ovakva optimizacija zahtijeva dugotrajno kodiranje ili skupe dodatke. U stvarnosti, osnovna verzija lazy loadinga može se postaviti u par minuta. No kao i sa svime, vrag je u detaljima  od toga kako su slike optimizirane, do toga koristi li se fallback rješenje za starije preglednike.

Lazy loading – što je to zapravo?

U svojoj srži, lazy loading znači da se slike, videozapisi i drugi medijski elementi ne učitavaju odmah kada korisnik otvori stranicu, već tek kada ih stvarno treba vidjeti  obično kad se približe vidljivom dijelu ekrana (viewportu).

Ako bismo to usporedili s fizičkim svijetom, zamislite veliku knjigu s ilustracijama. Umjesto da Vam netko odmah donese cijelu knjigu s tisuću stranica, najprije vam otvori prvih nekoliko poglavlja  a ostalo donosi tek kad napredujete. To smanjuje vrijeme čekanja, čini iskustvo ugodnijim i sprečava nepotrebno opterećenje.

Ono što mnogi ne znaju jest da lazy loading može funkcionirati i s drugim vrstama sadržaja iframeovima, skriptama, pa čak i fontovima  iako se najčešće spominje u kontekstu slika i videa. Njegova implementacija varira ovisno o platformi i tehnologiji, ali princip ostaje isti: ne trošiti resurse na ono što korisnik još ne vidi.

Zanimljivo, prva verzija ove tehnike pojavila se još u ranim danima JavaScript biblioteka kao što su jQuery, gdje su developeri ručno pratili poziciju scroll-a i “ubacivali” sadržaj kad bi došao u vidokrug. Danas većina modernih preglednika nudi nativnu podršku kroz jednostavne HTML atribute.

Osim tehničkog aspekta, lazy loading ima i psihološki učinak. Kada stranica reagira brzo, korisnik je podsvjesno skloniji vjerovati brendu ili sadržaju. Brza stranica ostavlja dojam profesionalnosti, dok spora može izazvati frustraciju – čak i ako je sadržaj odličan.

Zašto je ova tehnika toliko važna?

Slike su često najveći krivac za sporo učitavanje. Čak i optimizirane JPEG ili WebP slike mogu opteretiti stranicu ako ih je puno.

HTML5 atribut loading=”lazy” promijenio je igru jer je omogućio da i oni bez naprednog tehničkog znanja uvedu ovu optimizaciju u par minuta. Preglednici poput Chromea, Firefoxa i Edgea već ga podržavaju. To znači da kod može ostati čist, a učinak na performanse i dalje bude osjetan.

Ipak, svaka postavljanje ima svoje nijanse. Ako se oslanjate isključivo na  atribut, možda ćete primijetiti da efekt nije jednako uglađen u svim preglednicima. Tu dolaze u igru JavaScript biblioteke koje nude animacije učitavanja, prilagođene efekte (blur, fade-in) ili dodatne uvjete za pokretanje učitavanja.

Jedna zanimljivost je da se lazy loading može kombinirati s responsive images tehnikama, poput srcset i sizes atributa, kako bi se osiguralo da se učitava optimalna verzija slike za uređaj korisnika. Time ne samo da odgađate učitavanje, nego i smanjujete veličinu datoteke kad se učita.

Primjer koda

 

<img
src=”slika-mala.jpg”
srcset=”slika-mala.jpg 480w, slika-srednja.jpg 800w, slika-velika.jpg 1200w”
sizes=”(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px”
alt=”Prilagodljiva slika”
loading=”lazy”>

Lazy loading za video – malo drugačija priča

Video sadržaj je posebna kategorija jer troši daleko više resursa od statičnih slika. Dok jedna optimizirana fotografija može imati 200 kB, ugrađeni YouTube video s playerom, skriptama i mrežnim zahtjevima lako premaši nekoliko megabajta. To znači da ako na jednoj stranici imate pet videa, inicijalno učitavanje može postati noćna mora – pogotovo za mobilne korisnike.

Lazy loading kod videa zato igra ključnu ulogu. Ideja je jednostavna: umjesto da odmah učitate cijeli video player, na početku prikažete statičnu sliku (thumbnail) ili čak “lažni” gumb za reprodukciju. Tek kada korisnik klikne ili se približi tom dijelu stranice, pravi video player se učitava. Na taj način smanjujete broj mrežnih zahtjeva i ubrzavate inicijalno renderiranje stranice.

U praksi, to se može implementirati na nekoliko načina. Za modernije preglednike dovoljan je atribut loading=”lazy” unutar <iframe> taga. No ako želite potpunu kontrolu i bolju kompatibilnost, vrijedi razmisliti o JavaScript rješenjima koja se dinamički bave zamjenom elemenata. Primjerice, možete u DOM-u držati samo sliku i kratki HTML gumb, a kad korisnik klikne, skripta zamijeni to pravim iframe-om.

Ova metoda ne donosi samo tehničke benefite. Psihološki, korisnici imaju osjećaj da stranica reagira brže, a video im je dostupan kada ga žele  bez dugog “loading” ekrana.  Postoji još jedan trik: kombinirati lazy loading s pred učitavanjem za video koji je visoko na web stranici. To znači da se prvi video pripremi malo ranije, kako bi se izbjeglo kašnjenje kad korisnik poželi odmah pogledati sadržaj.

Prednosti koje ćete primijetiti odmah

Implementacija lazy loadinga donosi rezultate gotovo istog trenutka. Najvidljiviji efekt je skraćeno vrijeme učitavanja, no pravi učinak osjetit ćete ponašanje korisnika. Na primjer, stranice koje su se prije učitavale pet do šest sekundi sada se otvaraju za tri ili manje. To nije samo tehnički podatak to je razlika između korisnika koji ostaje i onoga koji odlazi.

Smanjenjem količine podataka koji se učitavaju na početku, server ima više resursa za obradu drugih zahtjeva. Ako vodite web trgovinu s velikim brojem posjetitelja, to može značiti stabilnije performanse tijekom “špice” prodaje. S druge strane, mobilni korisnici koji često imaju ograničen podatkovni promet – cijene što ne moraju nepotrebno trošiti megabajte.

Tu je i manje očit benefit: povećanje angažmana. Kad korisnik osjeti da stranica “teče” i ne mora čekati, vjerojatnije je da će istražiti više stranica, pogledati više proizvoda ili pročitati više članaka. Taj dodatni angažman šalje pozitivne signale Googleu i ostalim tražilicama, što opet može poboljšati pozicije u rezultatima pretrage.

Naposljetku, postoji i doza profesionalne reputacije. Brze, optimizirane stranice ostavljaju dojam da iza njih stoji tim koji zna što radi. Spore, tromo optimizirane stranice često se doživljavaju kao zastarjele ili zanemarene, bez obzira na kvalitetu sadržaja.

Sitnice na koje morate paziti

Iako lazy loading zvuči kao “instaliraj i zaboravi” rješenje, u praksi treba pripaziti na nekoliko detalja. Jedan od njih je indeksiranje od strane tražilica. Google je uvelike unaprijedio svoj rendering engine i razumije većinu lazy loading implementacija, no ako se oslanjate na JavaScript rješenja, važno je provjeriti da su ključni sadržaji i dalje dostupni za indeksiranje.

Druga stvar je pristupačnost. Elementi koji se učitavaju kasnije moraju i dalje biti čitljivi čitačima ekrana i ostalim pomoćnim tehnologijama. To znači da alt atributi za slike i odgovarajuće ARIA oznake ne smiju nedostajati. Ako zanemarite pristupačnost, riskirate isključivanje dijela publike i moguće pravne probleme.

Treća zamka je loše korisničko iskustvo ako se lazy loading implementira preagresivno. Ako korisnik skrola brzo, a sadržaj se učitava sporo ili s trzajima, to stvara frustraciju. Smanjivanje CLS (Cumulative Layout Shift) metrike treba biti prioritet * nitko ne voli kad im tekst “bježi” dok čitaju.

Postoji i pitanje dizajna. Neki vizualni elementi trebaju biti vidljivi odmah da bi stranica imala smisla. Primjerice, hero slika na vrhu početne stranice gotovo nikad ne bi trebala biti lazy loaded. Balans između optimizacije i iskustva je ono što čini razliku između dobro odrađenog i loše implementiranog lazy loadinga.

Kako ga uvesti lazy loading na svoju web stranicu

Integracija lazy loadinga može biti jednostavna ili složena, ovisno o Vašem okruženju. Ako radite s WordPressom, možda ćete otkriti da je od verzije 5.5 ova značajka uključena automatski za slike i iframeove. Međutim, to ne znači da ne možete dodatno optimizirati ili prilagoditi način na koji funkcionira.

Pluginovi poput WP Rocket, Smush ili a3 Lazy Load nude dodatne opcije od odgode učitavanja skripti do naprednog upravljanja kako i kada se sadržaj učitava. Kod prilagođenih rješenja u frameworkovima poput Reacta ili Vuea, možete koristiti gotove komponente koje rješavaju većinu posla, ali ih vrijedi prilagoditi vlastitim potrebama.

Jedna od dobrih praksi je kombinirati lazy loading s drugim tehnikama optimizacije. Primjerice, kompresija slika prije nego ih se uopće postavi na server, korištenje CDN-a kako bi se smanjila udaljenost između servera i korisnika, te preloading kritičnih resursa. Takva kombinacija rezultira u doživljaju “trenutnog” učitavanja, čak i kod stranica s puno sadržaja.

Važno je testirati. Lighthouse, GTmetrix ili WebPageTest mogu dati jasne podatke o tome koliko ste dobili na brzini, te ukazati na potencijalne probleme. Lazy loading je moćan, ali samo dio slagalice u optimizaciji performansi.

Kad lazy loading nije rješenje

Postoje situacije kada je bolje izbjegavati lazy loading. Jedan od najčešćih primjera su slike i videozapisi koji se nalaze “above the fold”  dakle, u prvom ekranu koji korisnik vidi. Ako ih učitate s odgodom, riskirate loš prvi dojam i loše ocjene u LCP metričkoj kategoriji.

Također, za sadržaje koji su ključni za razumijevanje konteksta stranice, bolje je osigurati njihovo trenutno učitavanje. Primjerice, infografike koje nose glavni dio informacije ne bi smjele čekati da korisnik skrola do njih.

Tu su i specifični slučajevi poput interaktivnih elemenata ili galerija koje se oslanjaju na instant reakciju. Ako se takav element pojavi tek nakon nekoliko stotinki kašnjenja, korisnik može pomisliti da nešto ne radi.

Zaključak – mala promjena, veliki učinak

Lazy loading nije samo tehnički trik, nego strategija optimizacije korisničkog iskustva. Njegova implementacija može biti brza, ali utjecaj dugoročan od boljeg SEO rezultata, preko nižeg bounce ratea, do veće stope konverzije.

Ono što ga čini posebno privlačnim jest činjenica da koristi i vlasnicima stranica i korisnicima. Posjetitelji dobivaju brže učitavanje i ugodnije iskustvo, dok vlasnici dobivaju bolje performanse i bolju vidljivost na tražilicama.

Ako želite da vaša web stranica ili trgovina funkcionira glatko i brzo, vrijedi razmisliti o lazy loadingu kao jednom od prvih koraka optimizacije. A ako ne znate odakle početi, naša agencija s više od 20 godina iskustva u izradi web stranica, može osigurati da ova tehnika bude implementirana na pravi način, bez kompromisa u kvaliteti i korisničkom dojmu.