Lijeno učitavanje slika omogućeno je od verzije 5.4

Počevši od verzije 5.4 WordPress ubacuje lazy-loading atribute na slike. Ovaj atribut omogućuje web preglednicima lijeno učitavanje slika kako bi se odgodilo njihovo prikazivanje sve dok nije potrebno. Korisna je stvar kod optimizacije brzine učitavanja stranica a pogotovo je od velikog značaja za korisnike mobilnih uređaja.

Lazy-loading atribut

Kako prolaze godine, slike koje ubacujemo na stranice postaju sve teže jer su kvalitetnije, jače oštrine i bolje rezolucije. Sve to dolazi sa cijenom jer one postaju teže. Prije 10 godina prosječna težina slike bila je oko 100 kB, dok je danas ona višestruko veća. Naravno, ovisi koje slike i kakvih dimenzija, no povećanje njihovih težina je očigledno. Atribut lijenog učitavanja pomaže u bržem učitavanju stranica jer se preglednik može usredotočiti na preuzimanje skripta i stilova koji su mu odmah potrebni. Kako u tom trenutku ne brine o učitavanju samih slika, ima više slobodnih resursa za bitnije stvari. Konačna prednost je bolja brzina stranica a time i korisničko iskustvo.

Lazy-loading je atribut koji se postavlja na HTML element a web pregledniku kaže da pričeka sa preuzimanjem slike dok nije potrebna. Slika je potrebna tek kada korisnik skrola neposredno do njezine lokacije na stranici. Dosadašnjom praksom ovo smo ručno radili pomoću JavaScripta a sada nam je malo olakšan posao. Naravno, ovo važi samo za one slike koje su ubačene kroz sam WordPress sustav, ne odnosi se na slike unutar datoteka teme.

Dvije su moguće vrijednosti atributa:

  • eager – zadana vrijednost koja kaže pregledniku da krene preuzimati sliku čim primijeti element <img>
  • lazy – vrijednost koja pregledniku kaže da odgodi preuzimanje sve do trenutka kada se slika mora prikazati, dakle obično nakon interakcije korisnika sa stranicom.

<img src = “slika.jpg” loading=”lazy” alt=”Opis slike”>

Dodatna optimizacija

Da bi maksimalno iskoristili ovu pogodnost korisno je napraviti još nešto. Kada se slika konačno učita preglednik je treba i prikazati. Širinu i dužinu slike preglednik određuje na temelju same veličine slike ali i na temelju stilova stranice. U trenutku prikazivanja dokument preoblikuje sukladno tim informacija i događa se ponovno renderiranja elemenata na stranici. Da bi spriječili ovo i izbjegli nepotrebno trošenje resursa uređaja, potrebno je postaviti veličinu i visinu kao vrijednost atributa width i height na samom elementu.

<img src = “slika.jpg” loading=”lazy” alt=”Opis slike” width=”600″ height=”400″>

Atribut lazy-loading podržava većina modernih uređaja. Za detaljnije informacije pogledajte tablicu kompatibilnosti preglednika.