Predstavljamo WordPress 5.4 “Adderley” novosti

WordPress nam od verzije 5.4 “Adderley” donosi neke zanimljive promjene. Kako to WordPress već radi po tradiciji, naziv je dan prema jazz glazbeniku, ovoga puta prema američkom saksofonistu Nat Adderleyu (1931. – 2000.).

Pogledajmo koju su najvažnije promjene u novoj verziji.

Lijeno učitavanje slika

Najvažnija promjena je da automatski ubacuje lazy-loading atribut na slike. Ovaj atribut omogućuje web preglednicima lijeno učitavanje slika kako bi se odgodilo prikazivanje slika sve dok ih preglednik ne zatraži. Vrlo je korisna stvar kod optimizacije brzine učitavanja stranica a pogotovo je od velikog značaja za korisnike mobilnih uređaja za koje se moramo jače potruditi zbog ograničenja veze s internetom.

Što je lijeno učitavanje slika?

Kako prolaze godine, slike koje ubacujemo na web stranice postaju sve teže jer su bolje rezolucije, oštrije i samim time kvalitetnije. Kvaliteta dolazi sa cijenom jer slike postaju postaju teže. Prije 10 godina prosječna težina slike bila je oko 100 kB, dok je danas ona višestruko veća, prilikom uploada može iznositi i nekoliko mB. Naravno, ovisi koje slike se ubacuju 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 preglednik prilikom učitavanja stranica preskoči slike koje se neće prikazati u početnom dijelu stranice, već se može usredotočiti na preuzimanje skripta i stilova koji su mu odmah potrebni za prikaz. Kako u tom trenutku ne brine o učitavanju samih slika, ima više slobodnih resursa za obaviti bitnije stvari. A kada korisnik dospije skrolanjem do dijela gdje se slike prikazuju, preglednik je već uspio riješiti njihovo učitavanje. Konačna prednost je veća brzina stranica a time i sveukupno kvalitetnije korisničko iskustvo.

Lazy-loading atribut

Lazy-loading nije nova stvar. Dosadašnjom praksom ovo smo ručno radili pomoću kodiranja u JavaScriptu no sada nam je znatno 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 unutar koda 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.

Primjer implementacije će biti ovakav:

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

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

Dodatna optimizacija slika

Da bi maksimalno iskoristili pogodnost lijenog učitavanja 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 slike, preglednik je primoran preoblikovati stranicu sukladno informacija koje zna o slici te se događa ponovno renderiranja elemenata na stranici  počevši od te slike prema niže. Ovo nije velika stvar već je više dio mikrooptimizacije, međutim dodatnim kodiranjem možemo nešto više optimizirati taj dio kako bi preglednik imao manje posla i sačuvao procersku snagu (a na mobitelu i bateriju).

Da bi spriječili ponovno renderiranje elemenata i izbjegli nepotrebno trošenje resursa uređaja, potrebno je postaviti veličinu i visinu kao vrijednost atributa width i height na samom elementu. Tako će konačan rezultat elementa u kodu biti ovakav:

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

Promjene u administraciji

Gutenberg nadogradnja

Ako vam web stranica koristi Gutenberg za izradu predloška i dodavanje sadržaja na stranicu, dobra stvar je da ćete pronaći mnoštvo novih značajki i poboljšanja u uređivaču blokova u odnosu na prije. Gutenberg je značajno optimiziran, brže se učitava i pogotovo ćete osjetiti razliku ako imate jako puno teksta u puno blokova.

Nekoliko je važnih poboljšanja u novoj verziji:

• novi blok za društvene ikone – omogućuje autorima brzo dodavanje ikona s linkovima na društvene profile, na odabiru je velik broj popularnih mreža (Facebook, Twitter, LinkedIn…). Dolazi s 3 unaprijed definirna stila
• novi blok za gumbe – korisnicima omogućuje dodavanje više pojedinačnih gumba unutar istog bloka, na odabiru su dva unparijed definira stila (ispunjeno pozadinskom bojom ili transparentno s obojanim rubom) i nekoliko opcija za dodatno fino uštimavanje izgleda (boja teksta, pozadinska boja, gradijent)
• dodatne opcije za boju u nekoliko blokova – određeni dio teksta u bloku možemo sada selektirati i označiti nekom drugom bojom, dok smo za to prije trebali mijenjati HTML
• bolji modul posljednjih objava – modul posljednjih objava omogućuje nam da odaberemo određenu kategoriju čije objave želimo prikazati, premda još ne omogućuje napredne postavke (npr. da se isključi određena objava). Također možemo odabrati istaknutu sliku i odabrati prikazivanje određene podržane veličine slike
• fullscreen mode – uređivač se po zadanim postavkama odmah otvara u načinu cijelog ekrana, za lakši rad bez ometanja
• krušne mrvice za navigaciju – traka krušnih mrvica prikazuje se u donjem lijevom kutu ekrana i ažurira se kako mijenjamo blokove i njihove unutrašnje elemente. Traka prikazuje koji element je trenutno aktivan i koliko duboko je ugniježđen
• uvodni prozor Gutenberga za dobrodošlicu – samo vrlo kratka prezentacija koja korisniku pruža osnovne informacije i kako se bolje upoznati s njima ali iskreno, ovo nam se ne čini nešto korisno

Ostalo

Izvan samog Gutenberga nam WordPress donosi još neke promjene, premda su one više-manje bez posebnog značenja prosječnom korisniku. Mogli bi spomenuti samo jednu:

• Site Health analiza – obavijesti o zdravlju i performansama web stranice WordPress sada prikazuje na nadzornoj ploči. Stranica i dalje postoji pod Tools (Alati) ali ovako jasnije dolazi do izražaja i autori web stranice  lakše mogu primijetiti ukoliko se pojave neki problemi

Sažetak

Dotakli smo se najvažnijih novosti koje nam WordPress donosi u verziji 5.4. Jeste li spremni na nadogradnju vaših web stranica?