Kada govorimo o web dizajnu, najčešće razmišljamo o bojama, fontovima, slikama, animacijama i rasporedu elemenata. Međutim, dobar dizajn nije samo ono što lepo izgleda. Sajt mora da bude brz, funkcionalan i prijatan za korišćenje.
Možemo napraviti vizuelno odličan sajt, ali ako korisnik čeka nekoliko sekundi da se sadržaj učita, postoji velika šansa da će napustiti stranicu.
Zato performanse treba posmatrati kao deo web dizajna, a ne kao problem koji se rešava tek na kraju projekta.
Slike – najčešći problem
Velike fotografije često su jedan od glavnih razloga sporog učitavanja stranice.
Ako je slika prikazana u dimenziji 800×500 piksela, nema mnogo smisla učitavati fotografiju od 5000×3000 piksela.
Pre postavljanja slike na sajt potrebno je:
promeniti dimenzije slike, kompresovati fajl, koristiti moderne formate kao što su WebP ili AVIF, koristiti responsive slike kada je potrebno.
Lazy loading može dodatno pomoći tako što se slike van vidljivog dela stranice učitavaju tek kada postanu potrebne.
Fontovi takođe utiču na brzinu
Jedan font možda neće predstavljati problem, ali nekoliko porodica fontova sa više različitih težina može brzo povećati broj fajlova koje browser mora da učita.
Ako koristimo regular, medium, semibold, bold i italic verziju nekoliko fontova, stranica može nepotrebno da učitava veliki broj resursa.
Zato je bolje koristiti manji broj fontova i samo težine koje su zaista potrebne.
Variable fontovi mogu biti praktično rešenje kada želimo veću fleksibilnost uz manje zasebnih fajlova.
Animacije – manje je često više
Animacije mogu učiniti sajt modernijim, ali previše animacija može imati suprotan efekat.
Veliki video background, parallax efekti i kompleksne JavaScript animacije mogu povećati opterećenje browsera.
Za većinu interfejsa dovoljne su jednostavne CSS animacije:
transform, opacity i transition
Na primer, blagi hover efekat na dugmetu može izgledati odlično bez značajnog opterećenja.
Važno je obratiti pažnju i na korisnike koji imaju uključenu opciju smanjenja animacija kroz prefers-reduced-motion.
JavaScript nije uvek potreban
JavaScript omogućava veliki broj funkcija, ali ne treba koristiti JavaScript tamo gde CSS ili HTML mogu da završe posao.
Velike biblioteke, nepotrebni pluginovi i skripte trećih strana mogu značajno povećati vreme učitavanja stranice.
Pre dodavanja nove skripte dobro je postaviti jednostavno pitanje:
Da li mi je ova funkcionalnost zaista potrebna?
Ako nije – bolje je ne dodavati je.
Core Web Vitals
Google koristi Core Web Vitals kao skup metrika koje pomažu u proceni korisničkog iskustva.
Najpoznatije metrike su:
LCP – koliko brzo se učitava glavni sadržaj stranice,
INP – koliko brzo stranica reaguje na interakciju korisnika,
CLS – koliko se sadržaj neočekivano pomera tokom učitavanja.
Ove metrike nisu zamena za dobar dizajn, ali mogu pomoći da pronađemo probleme koji nisu odmah vidljivi.
Performance-first dizajn
Najbolji pristup je da o performansama razmišljamo već tokom dizajniranja.
Umesto da napravimo komplikovan dizajn pa kasnije pokušavamo da ga ubrzamo, možemo od početka birati optimizovane slike, ograničen broj fontova, jednostavne animacije i samo neophodan JavaScript.
Zaključak
Brz sajt nije samo tehnički bolji sajt – brzina je deo korisničkog iskustva.
Dobar web dizajner zato ne razmišlja samo o tome kako će stranica izgledati, već i kako će se ponašati kada je korisnik otvori na telefonu, sporijoj internet vezi ili slabijem računaru.
Lep dizajn privlači korisnika, ali ga brzina i dobro iskustvo zadržavaju.