U ovoj mini eknjizi možete pročitati ono što vam je dovoljno da razumete kako da započnete optimizaciju web stranica.
Potrudiću se da ne uđem previše u tehnologije koje ne morate da razumete ili na koje nemate previše uticaja i da se fokusiram na ono šta možete da promenite.
- Kompjuterski resursi i njihove performanse
- Mrežna komunikacija
- Dobijanje adrese servera
- Proces odabira protokola
- Proces parsiranja/renderovanja
Kada pričamo o samim resursima kojim pristupamo, osim brzine, treba znati i koliki je latency tog resursa, odnosno, koliko vremena se potrosi u fazama dobijanja informacija koje nisu sam transfer.
U ovom trenutku ćemo se prvenstveno fokusirati na mrežne resurse i na mrežnu komunikaciju.
RTT ili round-trip-time je vremenski period od trenutka kada pošaljete paket serveru i kada vam on odgovori na taj paket.
Vreme koje dobijate kada pingujete neku adresu je baš RTT.
Kao što ćemo posle videti, neki protokoli imaju čak i po nakoliko RTTova, samo da se konekcija uspostavi, tako da, treba uzeti u obzir i RTT, pored same brzine konekcije.
Dok ne zavrsim ovaj deo, mozete da istrazite sledece pojmove: HTTP pipelining, HTTP/2 push i spdy. (takodje i websokete, za realtime komunikaciju, a i webworker koji može da presretne komunikaciju i lokalno vrati rezultat)
Ispod aplikativnog lejera mrežne komunikacije koju uspostavljamo sa serverom, u slučaju web protokola, najčešće se koriste TCP i UDP protokoli.
Prednost TCP protokola je to što garantuje da će svi paketi stići na odredište i da će u slučaju greške biti ponovo poslani.
Sa druge strane, kada nam je bitno da pošaljemo paket sa što manjim latencyem, koristi se UDP.
On za razliku od TCPa nema uspostavljanje komunikacije kao ni proveru da li su svi paketi stigli i kojim redosledom već se paketi samo šalju, bez ikakvih provera.
Prva stvar koja se desi kada se trazi neki resurs je DNS resolve...
Dakle, ako ste ukucali google.com, ta domena se resolvuje.
Sledeca stvar koja se desava je, proverava se da li je domena u HSTS preload listi.
Ako jeste, prelazi se na HTTPS.
Ako sajt nije u HSTS preload listi, proverava se da li je HSTS sacuvan od pretodne posete.
Ako jeste i nije istekao, prelazi se na HTTPS.
Salje se request.
Sada server moze da uradi redirect na neku drugu adresu i ako se to desi, prethodni koraci se ponavljaju.
Ako nije bilo redirecta, pocinje parsiranje HTMLa.
Stranica se renderuje onoliko koliko treba da se vrati najduzi chain resursa. (s tim sto je moguce u samom HTMLu definisati da browser treba da pocne da ucitava ili unapred resolvuje neke resurse cak i pre nego sto su postali dependencie... kod SPA aplikacija je takodje moguce browseru reci da ucita dodatne resurse kada zavrsi sve ostale poslove - preload, prefetch)
https://www.keycdn.com/blog/resource-hints/
Kada se koristi HTTP/2, takodje je moguce da server odmah sam pushuje potrebne resurse iz sam HTML.
HTML se uvek parsira i renderuje od gore ka dole.
Vecina browsera cak i kada ne moze da nastavi da renderuje stranicu zato sto ceka neki od resursa nastavlja da parsira HTML i salje requestove za ostale resurse.
Jedno ogranicenje koje je bitno znati jeste to da browser salje samo odredjeni broj requestova paralelno, a ostale stavlja na queue.
Takodje, nemaju svi resursi isti prioritet i sam prioritet zavisi od tipa resursa i od toga kako je taj browser konfigurisan, koji prioritet da da kakvom resursu.
Na pocetku renderovanja, postoji mali delay u kom browser ne prikazuje stranicu i tu postoji razlika od browsera do browsera.
Razlog zasto se CSS obicno stavlja u head je da ne bi bilo flasha stranice bez CSSa pre nego sto se CSS primeni.
Da bi se dodatno ubrzalo prvobitno prikazivanje stranice, dobra praksa je da se u head inline stavi mala kolicina CSSa koja je dovoljna za renderovanje onoga sto user vidi kada se ucita stranica... Odnosno, ono sto staje u prozor browsera...
A ostatak CSSa se moze ucitati asinhrono, na dnu stranice...
Sto se tice JSa, on takodje potpuno blokira renderovanje stranice, ali, u vecini slucajeva stranica izgleda ok i bez njega, tako da, stavlja se na dno stranice.
Dobra praksa je da se JS ucitava asinhrono, ali, nekada to nije moguce uraditi tako jednostavno. (npr. kada je bitno osigurati da se skripte ucitavaju odredjenim redosledom)
Jos jedna tehnika koja se koristi za brzi initial load je serverside rendering koji u HTML ubacuje podatke koje bi trebalo JS da ucita, da bi stranica bila vizuelno funkcionalna pre nego sto se zavrsi ucitavanje JSa.