IT Industrija
🔥 Najčitanije
🔥 Najčitanije
Brz odziv stranice, kao i brza prezentacija celokupnog sadržaja stranice, već dugo je jedan od osnovnih preduslova dobrog UX-a pri razvoju web aplikacija. Mnoge tehnike, poput minifikacija, konkatenacija i keširanja JS skripti i CSS stilova su već standardne prakse pri razvoju sajtova, međutim, ove standardne tehnike često nisu dovoljne i ne dovode do potpuno zadovoljavajućih rezultata.
Prebrowsing je ime skupa tehnika za poboljšanje performansi veb sajta. Za sve tehnike iz tog skupa je zajedničko to da se oslanjaju na predviđanje potreba korisnika sajta. Princip po kojem one funkcionišu bi se najjednostavnije mogao opisati kao nagoveštavanje browseru koji resursi će biti potrebni korisniku na trenutnoj, ili na stranici na koju očekujemo da će korisnik sledeće otići. Ove tehnike su podržane od strane browsera već nekoliko godina (a čak i stariji browseri koji ih ne podržavaju neće pucati zbog toga, već jednostavno neće ispoštovati optimizacije).
Tehnike koje su trenutno podržane od strane browsera su: dns-prefetch, preconnect, prefetch, preload i prerender.
dns-prefetch je tehnika koja se koristi kako bi se browseru omogućilo da unapred odradi DNS look up ka sajtovima sa kojih će biti dovučeni neki dodatni resursi. Recimo, ako znamo da će pri upotrebi određene stranice korisniku trebati neki resursi (npr. JS fajl, ili slika) sa sajta www.example.com, mi možemo na ovaj način da kažemo browseru da odmah izvrši DNS look up, kako bi mogao direktno pomoću IP adrese servera da dovuče resurs kada zaista bude zatrebao. To se postiže dodavanjem sledećeg taga u <head> tag:
<link rel=”dns-prefetch” href=“//www.example.com”>
preconnect se koristi slično kao i dns-prefetch, s tom razlikom što, osim što se browseru sugeriše da izvrši DNS look up ka nekom sajtu, preconnect ostvaruje i TCP handshake i otvara TCP konekciju ka navedenom serveru, kao i pripremu za TLS komunikaciju, ako postoji potreba. Ovim se, u stvari, rano uspostavlja socket konekcija ka željenom serveru, kad znamo da će postojati potreba na stranici za tim, kako bi se uštedelo vreme uspostavljanja te konekcije naknadno. Primera radi, možemo pretpostaviti da će našoj stranici trebati web socket konekcija ka www.example.com stranici u nekom trenutku, i zato u <head> elementu naše stranice postavljamo sledeći tag (kako bismo tu konekciju imali pripremljenu kad zaista zatreba):
<link rel=”preconnect” href=“http://www.example.com”>
prefetch tehnika se koristi kad znamo da će određeni resurs biti potreban korisniku na stranici na koju očekujemo da će korisnik sledeće otići. Pomoću nje napominjemo browseru da treba da dovuče taj resurs i sačuva ga lokalno u cache-u za potrebu korisnika na narednoj stranici. Međutim, valjalo bi napomenuti da browser može da ignoriše ovu preporuku, ukoliko detektuje da je konekcija spora ili ukoliko već dovlači veliku količinu podataka asinhrono. Primera radi, ako očekujemo da će korisnik otići na sledeću stranicu na kojoj će mu biti potrebna slika www.example.com/image1.jpg, možemo to naznačiti na trenutnoj stranici, tako što ćemo u <head> elementu dodati sledeći tag:
<link rel=”prefetch” href=“http://www.example.com/image.png”>
preload je tehnika veoma slična prefetchu, s tom razlikom što se preload tumači kao naredba browseru, tako da će on sigurno dovući navedeni resurs, bez obzira na okolnosti u kojima se browser nalazi. Primer korišćenja u okviru <head> elementa trenutne stranice bi bio:
<link rel=”preload” href=“http://www.example.com/image.png”>
prerender nam omogućava da kažemo browseru da dovuče celu jednu stranicu sa svim resursima (slikama, skriptama, stilovima…) koji su neophodni toj stranici. Celokupnu stranicu browser formira u pozadini, kreirajući DOM, primenjujući stilove i izvršavajući skripte, tako da kad korisnik zaista zatraži pristup toj stranici, ona će biti prikazana korisniku momentalno. Ovo je veoma zgodno u situacijama u kojima smo sigurni koja je sledeća stranica na koju će korisnik da ode. S obzirom na to da je ovo veoma zahtevna operacija koja uzima puno sistemskih resursa, treba je koristiti s oprezom, isključivo u situacijama kada smo stopostotno sigurni da će korisnik zatražiti pristup baš toj stranici u narednom koraku. Primer upotrebe ove tehnike u <head> elementu trenutne stranice bi bio:
<link rel=”prerender” href=“http://www.example.com/something”>
Na kraju, može se zaključiti da prebrowsing tehnike omogućavaju poboljšanje performansi sajtova, prvenstveno kod onih kod kojih se može predvideti dalje korisnikovo ponašanje na sajtu. S obzirom na sistemsko opterećenje nekih od tih tehnika, treba ih koristiti sa oprezom, samo u slučajevima gde sa sigurnošću možemo vršiti prethodno pomenuto predviđanje. Sva odgovornost za efekte upotrebe prebrowsinga se samim tim svodi na znanje i umeće samog developera pri predviđanju ponašanja korisnika sajta.
Ekipa iz Vivify Ideas ima u planu i dodatno širenje, a trenutno zapošljavaju PHP i JS developera.