U prethodnom blogu u kojem smo pisali o izmenama SEO optimizacije kojima ćemo svi prisustvovati tokom 2019. godine pisali smo i o performansama sajta. Kada pominjemo performanse sajta najčešće mislimo na odziv stranice i njenju prezentaciju u svakom trenutku kada korisnik želi da otvori željenu stranicu sajta. Prilikom izrade i razvijanja sajtova koriste se mnoge tehnike, a neke od njih su minifikacija, konkatenacija i keširanje JS skripti i CSS stilova.
Korišćenje ovih tehnika je postalo standardna praksa u izradi sajtova, ipak ove standardne tehnike često nisu dovoljne da bi dale zadovoljavajuće rezultate. Postoje još neke tehnike, koje se još nazivaju prebrowsing tehnike i koje dodatno utiču na performans stranice. Cilj današnjeg bloga je da vam približnije pojasnimo neke od ovih tehnika.
Potrebno je napomenuti da prezentacija i brzina otvaranja stranice utiču na to koliko će se klijent zadržavati na vašem sajtu. Ne samo da morate imati zanimljiv i praktičan sadržaj, već je potrebno da sadržaj bude optimizovan u skladu sa najnovijim tehnikama i standardima UX-a, da bi se ubrajao u kvalitetne.
Šta je prebrowsing i čemu služi?
Prebrowsing predstavlja skup tehnika putem kojih poboljšavate performanse vašeg sajta. Funkcija prebrowsing tehnika je da predviđaju ponašanje korisnika i s tim u vezi šalju određene informacije browseru. Prebrowsing tehnike treba da nagoveste browseru šta korisnik želi na određenoj stranici koju posećuje ili konkretno na celom sajtu. Današnji browseri podržavaju ove tehnike, dok to nije slučaj sa starim browserima. Ovo ne znači da će stariji browseri pucati zbog navedenih tehnika, ovo znači da neće odreagovati na već postavljenu optimizaciju.
Tehnike koje browseri podržavaju su sledeće:
dns-prefetch, preconnect, prefetch, preload i prerender.
DNS-prefetch
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. DNS (Domain Name System) je nastao sa idejom da ljudi ne mogu da pamte duge nizove brojeva, kao što mogu mašine. Kada ukucate neki naziv sajta na primer, www.nekisajt.com, zahtev za pristup ovom sajtu se prosleđuje DNS-u, a koji vraća odgovarajuću IP adresu. IP adresu koriste i drugi računari i ruteri da bi što bolje odgovorili na zahtev korisnika. Rezultat ovog procesa je da korisnik vidi željene stranice koje je hteo da poseti.
Kada koristimo dns-prefetch tehniku, mi u stvari pretpostavljamo da će korisniku na nekoj stranici trebati određeni JS fajl ili možda slika, zato se browseru naređuje da odmah izvrši DNS look up ili pretragu, kako bi pomoću IP adrese mogao da dovuče resurs kada to bude zaista potrebno.
To se postiže dodavanjem sledećeg taga u <head> tag:
<link rel=”dns-prefetch” href=“//www.nekisajt.com”>
Preconnect tehnika
Kod ove tehnike je bitno da se upoznamo sa par pojmova. Najpre pojam TCP se odnosi na The Transmission Control Protocol ili protokol kontrole prenosa. Ovaj protokol je nastao u početnoj implementaciji mreže tokom koje je dopunio IP (internet protokol). Zato se često ova dva protokola koriste u jednom nazivu TCP/IP. TCP omogućava pouzdanu i uređenu isporuku bajtova među aplikacijama koje rade na hostovima (a koji komuniciraju putem IP mreže). World Wide Web (www), e-mail, kao i transfer fajlova se oslanjaju na TCP.
Aplikacije koje ne zahtevaju pouzdanu uslugu prenosa podataka mogu koristiti Protocol User Datagram (UDP). TLS (Transport Layer Security) i njegov prethodnik, Secure Sockets Layer (SSL), su kriptografski protokoli koji omogućuju sigurnu komunikaciju putem interneta za stvari kao što su internet bankarstvo (preko HTTP protokola), e-mail, internet fax, instant messaging i ostali načini prenosa podataka. Postoje neznatne razlike između SSL i TLS, ali u osnovi protokol je isti.
Ono što preconnect tehnika radi je da otvara TCP konekciju ka navedenom serveru, kao i pripremu za TLS komunikaciju, ako postoji potreba. Ovim se ostvaruje socket konekcija na željenom serveru kako bi se uštedelo vreme za postavljanjem te konekcije naknadno.
To se postiže dodavanjem sledećeg taga u <head> tag:
<link rel=”preconnect” href=“http://www.nekisajt.com”>
Prefetch tehnika
Prefetch tehnika se koristi kada pretpostavljamo da će korisnik sa jedne stranice otići na drugu. Na primer nalazi se na jednoj stranici sa koje treba da ode i pogleda sliku ili neki drugi sadržaj. Preko prefetch tehnike napominjemo brosweru da taj materijal dovuče i sačuva ga lokalno u cache-u, za buduće potrebe korisnika. Međutim, može se desiti da browser ignoriše ovu naredbu zato što već dovlači veliku količinu podataka ili ako detektuje da je konekcija veoma spora. Opet, ovu tehniku možemo da izvedemo na sledeći način, kao i prethodne, samo uz menjanje sadržaja taga. U <head> tagu unesemo:
<link rel=”prefetch” href=“http://www.nekisajt.com/slika.png”>
Preload tehnika
Preload tehnika je veoma slična prefetchu, s tim da se preload tumači više kao naredba koju browser ne odbija bez obzira na to da li je konekcija spora i koliku količinu podataka vuče. Browser sa ovom tehnikom sigurno dovlači željeni resurs bez obzira na okolnosti u kojima se nalazi. To se postiže dodavanjem sledećeg taga u <head> tag:
<link rel=”preload” href=“http://www.nekisajt.com/slika.png”>
Prerender tehnika
Prerender tehnika se kao i prethodne koriste kada predviđamo ponašanje korisnika i njegovog kretanja po sajtu. Ipak, sa ovom tehnikom treba biti oprezan, jer vuče mnogo resursa, i ne treba je koristiti osim ako nismo zaista sigurni da je sledeći korak koji će korisnik izvršiti upravo pretpostavljena stranica. Putem prerender tehnike mi šaljemo informaciju browseru da dovuče čitavu jednu stranicu sa svim slikama, stilovima, skriptama, a koje su dalje neophodne na toj stranici. Ono što se dešava je da browser u pozadini formira stranicu, kreirajući DOM (Document Object Model) i istovremeno primenjuje stilove i izvršava određene skripte.
Ovo znači da kada korisnik poželi da ode na sledeću stranicu (a koju smo predvideli kao sledeći korak) momentalno vidi stilove i skriptove koji su bili u pozadini samog zahteva. Prerender tehniku ne treba previše koristiti, samo u slučajevima kada je sajt jednostavnije građe i kada se pouzdano zna koji je sledeći korisnikov zahtev.
Primer upotrebe prerender tehnike se može prikazati putem <head> elementa i to na sledeći način:
<link rel=”prerender” href=“http://www.nekisajt.com/nekiresurs”>
Zaključna razmatranja
Kao što se može videti, ovo su veoma moćne tehnike koje uz potrebno znanje zahtevaju i iskustvo developera koji zna da predvidi ponašanje korisnika i njegov sledeći korak. Mnoge od ovih tehnika su sistemski jako zahtevne pa je potrebno koristiti ih oprezno i samo onda kada je to potrebno. Poznavajući funkcije i načine komunikacije sa samim browserom može se podići kvalitet iskustva korisnika sa našim sajtom, a samim tim doprineti optimizaciji i boljoj posećenosti sajta.
