Što web-stranicu čini sporom i kako to izmjeriti?

Modul 6: Brzina · Vrijeme čitanja: 9 minuta

Cilj učenja: Nakon ove lekcije moći ćete izmjeriti gdje se gubi vrijeme i prepoznati razliku između sporosti na poslužitelju i sporosti u pregledniku.

Ključni pojmovi: TTFB, Core Web Vitals (LCP, INP, CLS), laboratorijski podaci, terenski podaci, PageSpeed Insights, kartica Mreža, kompresija, vanjske skripte, ograničenja hosting paketa, 503

Prvo izmjerite, pa tek onda popravljajte

"Web-stranica je spora" može imati deset različitih uzroka. Tko bez mjerenja istovremeno uvede dodatak za predmemoriranje (cache), dodatak za optimizaciju slika i veći paket, poslije ne zna što je pomoglo, a ima tri dodatne stvari za pratiti. Zato uvijek počnite s tri pitanja (ista kao u priručniku Vašeg hostera):

1. Je li sve sporo, ili samo administracija? Spora administracija uz brzu prednju stranu ukazuje na dodatke koji u administraciji rade mnogo stvari, ili na botove koji napadaju stranicu za prijavu.
2. Uvijek, ili u određenim trenucima? Samo u prometnim razdobljima ili kada se izvršava planirani zadatak: tada Vaš paket dostiže svoje granice.
3. Kod svih, ili samo kod Vas? Isprobajte na svom telefonu putem 4G ili 5G mreže, ili zamolite nekog drugog. Ako je sporo samo kod Vas, uzrok je u Vašoj vezi ili VPN-u.

Dvije polovice: poslužitelj i preglednik

Vrijeme koje posjetitelj čeka sastoji se od dva dijela (lekcija 1.2):

1. Poslužitelj izrađuje HTML: web-poslužitelj, PHP, dodaci, baza podataka. To vidite kao TTFB (time to first byte), vrijeme do prvog bajta odgovora. web.dev kao okvirno pravilo navodi da bi većina web-stranica trebala težiti TTFB-u od 0,8 sekundi ili manje.
2. Preglednik čita taj HTML i zatim dohvaća sve što se u njemu nalazi: stilske tablice, skripte, fontove, slike, videozapise, kodove za praćenje, widgete za razgovor. Tek kada je dovoljno toga učitano, posjetitelj nešto vidi.

Visok TTFB rješava se na strani poslužitelja: predmemoriranje (cache) (lekcija 6.2), manje ili lakši dodaci, novija inačica PHP-a, pospremljena baza podataka (lekcija 6.3) ili više procesorske snage. Nizak TTFB uz ipak sporu stranicu ukazuje na stranu preglednika: prevelike slike, previše skripti, vanjske komponente.

Core Web Vitals

Google mjeri iskustvo posjetitelja pomoću tri pokazatelja, takozvanih Core Web Vitals:

INP je u ožujku 2024. zamijenio stariju metriku FID. Google ove pokazatelje između ostalog koristi pri rangiranju rezultata pretraživanja, no najvažniji razlog za njihovo poboljšanje jednostavan je: posjetitelji odustaju kod spore ili nestabilne stranice.

Laboratorijski i terenski podaci

Postoje dvije vrste mjerenja i daju različite brojke:

• Laboratorijski podaci: test u jednom trenutku, s jednog mjesta, sa simuliranim telefonom i vezom. Korisno za usporedbu (prije i poslije promjene), ali ne radi se o stvarnom posjetitelju.
• Terenski podaci: mjerenja kod stvarnih posjetitelja s preglednikom Chrome, tijekom posljednjih 28 dana. To je ono što posjetitelji stvarno doživljavaju. Male web-stranice često imaju premalo posjetitelja za terenske podatke.

PageSpeed Insights (pagespeed.web.dev) prikazuje oboje: na vrhu terenske podatke (ako postoje), ispod toga laboratorijski test s ocjenom i konkretnim savjetima. Ne gledajte slijepo na ocjenu od 0 do 100. Pogledajte komponente: je li LCP loš zato što je poslužitelj spor (TTFB) ili zato što je velika fotografija teška 3 MB?

Uvijek testirajte nekoliko puta (brojke se mijenjaju) i testirajte i običnu stranicu, ne samo naslovnu stranicu.

Sami provjerite putem preglednika

Razvojni alati Vašeg preglednika (F12) pokazuju što se zapravo događa:

• Kartica Mreža: osvježite stranicu s isključenom predmemorijom (kvačica "Onemogući predmemoriju"). Vidite svaku datoteku koja se učitava, koliko je velika i koliko je trajalo. Sortirajte po veličini: najveće datoteke su često slike. Sortirajte po domeni: koliko dolazi od drugih strana (fontovi, kodovi za praćenje, videozapisi)?
• Prvi zahtjev (sam HTML): kliknite na njega, kartica Timing. "Waiting for server response" je TTFB.
• Zaglavlja tog prvog zahtjeva: postoji li kompresija (content-encoding: br ili gzip) i je li stranica došla iz predmemorije (lekcija 6.2)?

Uobičajeni krivci

U praksi sporost kod WordPressa najčešće proizlazi iz jednog od ovoga:

1. Nema predmemorije stranica (page cache): svaka stranica se pri svakoj posjeti iznova izrađuje (lekcija 6.2).
2. Previše ili preteški dodaci, posebno dodaci koji pri svakom zahtjevu pozivaju vanjske usluge ili izvode teške upite u bazu podataka (lekcija 5.3).
3. Velike slike: fotografija od 5 MB s telefona na naslovnoj stranici (lekcija 4.4 i 6.3).
4. Teška tema ili alat za izradu stranica koji na svakoj stranici učitava mnogo skripti i stilskih tablica (lekcija 5.1).
5. Vanjske komponente: fontovi, videozapisi, widgeti za razgovor, kodovi za praćenje, gumbi društvenih mreža drugih strana. Svaki od njih predstavlja vezu prema drugom poslužitelju koji može biti spor.
6. Zastarjela inačica PHP-a (lekcija 8.4).
7. Zapuštena baza podataka: tisuće revizija, neželjeni sadržaj (spam), tablice zapisa (log) dodataka (lekcija 6.3).
8. Botovi: crawleri, AI crawleri i pokušaji prijave zauzimaju Vaš paket (lekcija 7.3).
9. Paket dostiže svoje granice: premalo procesorske snage (CPU), procesa ili memorije za promet.

Granice Vašeg paketa

Kod dijeljenog hostinga svaki paket dobiva fiksni dio poslužitelja: procesorsku snagu, memoriju, brzinu diska i određeni broj istovremenih procesa. Ako Vaša web-stranica koristi više od toga, usporava se ili posjetitelji dobivaju poruku o pogrešci 503 (Service Unavailable, kod nekih hostera "Resource Limit Is Reached"). U DirectAdminu s CloudLinuxom to vidite pod Resource Usage (s "faults" ako je Vaša web-stranica bila usporena), a pomoću X-Ray vidite po stranici koji dodatak ili upit troši vrijeme. Drugi hosteri imaju slične preglede, ponekad samo na zahtjev.

Veći paket pomaže ako Vašoj web-stranici stvarno treba više resursa (prometna web trgovina). Ne rješava loše postavljenu web-stranicu: problem se tada kasnije vraća. Prvo potražite uzrok.

Sažetak

• Prvo izmjerite: sve ili samo administracija, uvijek ili ponekad, svi ili samo Vi.
• TTFB je strana poslužitelja (ciljajte na 0,8 sekundi ili manje); ostalo je ono što učitava preglednik.
• Core Web Vitals: LCP (2,5 s), INP (200 ms) i CLS (0,1); INP je 2024. zamijenio FID.
• PageSpeed Insights prikazuje terenske i laboratorijske podatke; kartica Mreža pokazuje što se zapravo učitava.
• Najveći dio sporosti dolazi zbog nedostatka predmemorije, teških dodataka, velikih slika i vanjskih komponenti; veći paket je tek posljednji korak.

Kviz

Zadatak

Zadatak A6.1: Izmjerite svoj TTFB i kompresiju. Unesite adresu svoje web-stranice i, ako želite, jednu običnu stranicu (na primjer stranicu za kontakt). Program svaku stranicu dohvaća tri puta bez kolačića i daje srednji TTFB, veličinu HTML-a i informaciju šalje li poslužitelj HTML komprimirano (content-encoding gzip ili br). Usporedite rezultat s testom u PageSpeed Insightsu i zabilježite što Vam je upalo u oči.

Dodatno čitanje

Ovi članci opisuju korake u upravljačkim pločama WebOké; u drugim upravljačkim pločama rade na sličan način.

• DirectAdmin priručnik 18.3: Moja web stranica je spora
• DirectAdmin priručnik 17.3: Resource Usage: CPU, memorija i procesi
• DirectAdmin priručnik 17.4: X-Ray: otkrivanje sporih stranica
• DirectAdmin priručnik 17.5: 503 ili 'Resource Limit Is Reached': što sada?
• Moja web stranica je spora ili koristi previše CPU-a: ovako je možete ubrzati
• Core Web Vitals (web.dev, engleski): https://web.dev/articles/vitals
• PageSpeed Insights: https://pagespeed.web.dev/