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.

Najvažnija novost nove verzije je da WordPress sada automatski dodaje lazy-loading atribut na svaku sliku. 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 sve optimizirati zbog ograničene veze s internetom.

Kako prolaze godine, slike koje ubacujemo na web stranice su sve veće i veće rezolucije, samim time su kvalitetnije i oštrije. Međutim, ta 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, a prilikom uploada može iznositi čak i nekoliko mB. Naravno, puno toga ovisi koje slike se ubacuju i kakvih su dimenzija, no povećanje njihovih težina je očigledno.

Atribut lijenog učitavanja je od velike pomoće za brže učitavanje stranica jer će preglednik prilikom otvaranja stranice preskočiti slike koje se neće prikazati u početnom, gornjem dijelu stranice i zato se može usredotočiti na preuzimanje skripta i stilova koji su mu odmah potrebni za prikaz. Kako u tom trenutku ne mora brinuti još i o učitavanju samih slika, pregledniku ostaje na raspoloaganju više slobodnih resursa koje može preusmjeriti i bolje iskoristiti za obaviti radnje koje su mu bitne u tom trenutku. A kada korisnik dospije skrolanjem do dijela gdje se slike prikazuju, preglednik je već uspio riješiti njihovo učitavanje.

Sve su to radnje koje se odvijaju u milisekundama. U konačnici, ono što postignemo je veća brzina stranica a time i cjelokupno kvalitetnije korisničko iskustvo. I još jedna bitna stvar, s obzirom na to da je tražilicama jedan od značajnih faktora brzina same stranice koja je važna za visoko rangiranje, utoliko smo i u tom segmentu uspješniji i možemo zadovoljno trljati ruke.

Lazy-loading atribut nije posve novo tehnološko otkriće. Dosadašnjom praksom smo teradnje ručno radili pomoću kodiranja funkcionalnosti u JavaScriptu no sada nam je znatno olakšan posao. Potrebno je imati na umu da automatsko dodavanje lazy-loading atributa važi samo za one slike koje su ubačene kroz WordPress sustav i ne odnosi se na slike unutar datoteka teme koje se tako generiraju na web stranici.

Atribut ima dvije moguće vrijednosti:

• eager – zadana (defaultna) vrijednost koja kaže pregledniku da krene preuzimati sliku čim primijeti element <img>
• lazy – vrijednost koja pregledniku kaže da odgodi preuzimanje slike sve do trenutka kada se ona 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.

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 širinu 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">

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 sada značajno optimiziraniji, 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…). Blok dolazi s 3 unaprijed definirana stila
• novi blok za gumbe – korisnicima omogućuje dodavanje više pojedinačnih gumba unutar istog bloka, na odabiru su dva unaprijed definirana 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 – prilikom prvog prikazivanja pojavi se vrlo kratka prezentacija koja korisniku pruža osnovne informacije kako se bolje upoznati s Gutenbergom

Izvan samog Gutenberga, WordPress nam donosi još neke promjene iako 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 sekcijom alata (Tools u izborniku) ali ovako jasnije dolazi do izražaja i autori web stranice lakše mogu primijetiti ukoliko se pojave neki problemi.

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