Svaki put kad posjetite neku web stranicu u pozadini se događa mnogo toga. Dok se tekst i fotografije učitavaju na ekranu, u pozadini vaš pretraživač šalje zahtjeve serveru i prima sadržaj web stranice koju treba prikazati. Ti HTTP zahtjevi utječu na vrijeme učitavanja stranice, a time i na korisničko iskustvo posjetitelja web stranice. Što manje HTTP zahtjeva vaša stranica šalje serveru to će vrijeme učitavanja stranice biti brže.

I dalje vam nije posve jasno što su HTTP zahtjevi i što možete učiniti da smanjite njihov broj? Saznajmo onda što su HTTP zahtjevi, kako funkcioniraju i kako saznati koliko HTTP zahtjeva vaša stranica šalje. Na kraju, naučit ćemo kako smanjiti broj HTTP zahtjeva i povećati brzinu web stranice.

Što je HTTP zahtjev?

Kad netko želi otvoriti bilo koju stranicu vašeg web site-a, njihov preglednik (Chrome, Opera, Microsoft Edge…) šalje zahtjev serveru na kojem je smještena vaša stranica i traži datoteke nužne za generiranje web stranice. Te datoteke uključuju HTML, CSS, JavaScript, slike i druge datoteke.

Zahtjev koji se šalje od preglednika do servera zove se HTTP zahtjev, a skraćenica HTTP znači: Hypertext Transfer Protocol.

Kad server zaprimi HTTP zahtjev s korisničkog preglednika, odgovara slanjem zatraženih datoteka, a preglednik zatim otvara zaprimljene datoteke i generira web stranicu.

Zašto je važno smanjiti broj HTTP zahtjeva?

Zato što svaki put kad korisnik otvara stranicu, njihov preglednik šalje odvojene HTTP zahtjeve da bi prikazao web stranicu. Ako imate web stranicu minimalističkog dizajna, koja ne sadrži velik broj datoteka, učitavanje web stranice je brzo zbog male količine HTTP zahtjeva. Nažalost, to nije slučaj za većinu web stranica, pogotovo za one koje sadrže puno fotografija, animacija i drugog dinamičkog sadržaja.

Smanjivanjem broja HTTP zahtjeva možete smanjiti vrijeme potrebno za učitavanje web stranice, ali prvo morate saznati koliko HTTP zahtjeva vaša stranica šalje.

Koliko HTTP zahtjeva šalje vaša web stranica?

Ako koristite preglednik Chrome, poslužite se njime i saznajte koliko HTTP zahtjeva vaša stranica šalje prilikom svakog učitavanja.

Da biste to učinili, kliknite desnim klikom bilo gdje na svojoj stranici i odaberite na dnu „Inspect“,a zatim „Network“ u gornjoj navigaciji.

Network panel prikazat će sve zahtjeve, a da biste vidjeli što se sa servera preuzima u stvarnom vremenu, osvježite stranicu s otvorenim Network panelom.

Chrome Developer Tools pruža sve informacije o stranici, uključujući HTTP zahtjeve

Chrome developer tools – network panel

Stupac lijevo sadrži popis svih datoteka nužnih za prikazivanje, odnosno učitavanje web stranice. U stupcu „Size“ možete vidjeti veličinu pojedine datoteke, a u stupcu „Time“ koliko vremena je potrebno datotekama da se učitaju.

Broj koji nas ovdje zaista zanima jest broj HTTP zahtjeva, a njega možete vidjeti u donjem lijevom kutu.

Online alati kao što je GT Metrics ili Pingdom također vam mogu pomoći u praćenju HTTP zahtjeva.

Kako smanjiti broj HTTP zahtjeva?

Optimiziranje stranice i umanjivanje datoteka potrebnih za generiranje stranice može ubrzati vrijeme učitavanja.

Umanjivanje i kombiniranje HTML, CSS i JavaScript datoteka

Svaki HTML, CSS i JavaScript dokument, koji zahtjeva vaša stranica da bi se prikazala u pregledniku, dodaje određenu težinu stranici, odnosno utječe na vrijeme učitavanja. Kombiniranjem datoteka i njihovim umanjivanjem moguće je smanjiti vrijeme učitavanja i veličinu web stranice.

„Umanjivanje“ dokumenata znači uklanjanje nepotrebnih znakova, „komentara“ ili praznog prostora i formatiranja iz HTML, CSS i JavaScript datoteka, koji nisu potrebni da bi se kod pravilno izvršio.

Kombiniranje datoteka objasnit ćemo na primjeru. Ako vaša web stranica ima 5 vanjskih CSS datoteka i 5 vanjskih JavaScript datoteka, kombiniranjem tih pet u jednu datoteku umanjuje se broj HTTP zahtjeva. U tom slučaju, vaša web stranica će, ako kombiniramo datoteke, poslati samo 2 HTTP zahtjeva umjesto 10 i tako ubrzati učitavanje stranice.

Važno je napomenuti da umanjivanje datoteka ima manji efekt ako stranica koristi HTTP/2 protokol. U tom slučaju učitavanje datoteka koje utječu na vrijeme učitavanja automatski je optimizirano te se datoteke šalju tek nakon generiranja web stranice.

Uklonite CSS i Javasript datoteke koje blokiraju generiranje stranice

Ako se na vašoj web stranici nalaze datoteke koje blokiraju generiranje stranice, potrebno ih je asinkronizirati ili odgoditi njihovo učitavanje.

Zašto? Kad korisnikov preglednik učitava vašu stranicu, to čini odozgo prema dolje. Kad preglednik dođe do CSS ili JavaScript datoteke koja nije asinkronizirana, staje s generiranjem stranice dok se datoteka u potpunosti ne učita.

Kad se datoteke šalju asinkrono, korisnikov preglednik učitava sve datoteke u isto vrijeme i nastavlja učitavanje drugih elemenata stranice bez zastoja.

Odgađanje učitavanja datoteka znači njihovo premještanje na drugo mjesto u stranici. Na primjer: ako maknemo JavaSript datoteku iz headera () odmah prije zatvarajućeg HTML taga omogućit ćemo stranici učitavanje bez čekanja na kompletno učitavanje JavaScript-a.

Zaključak

Web stranice možemo učiniti brzima, a količina HTTP zahtjeva i njihovo smanjivanje samo je jedan mali korak koji trebamo poduzeti.

Iako ne postoji optimalan broj HTTP zahtjeva jer mnogo toga čak ne ovisi o nama, idealan broj HTTP zahtjeva prema izjavama nekih SEO stručnjaka bio bi od 10 do 30 datoteka. Međutim, do ovog broja HTTP zahtjeva gotovo je nemoguće doći ako se radi o malo većoj stranici, a sigurno nemoguće ako se radi o web stranici koja sadrži kvalitetne video materijale, fotografije i drugi dinamički sadržaj.

Realan i optimalan broj HTTP zahtjeva, stoga možemo zaokružiti na 100 zahtjeva po stranici. Manje bi bilo bolje, ali ako je i više svejedno možemo ubrzati stranicu dovoljno da vrijeme učitavanja ne predstavlja prepreku između Vas i klijenta.