
Wireframe je jednostavna skica web stranice ili korisničkog sučelja kako bi se brzo prezentirale ideje, funkcionalnosti ili interaktivnost.
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 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.
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 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:
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 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">
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:
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:
Dotakli smo se najvažnijih novosti koje nam WordPress donosi u verziji 5.4. Jeste li spremni na nadogradnju vaših web stranica?