Čo spôsobuje pomalosť webovej stránky a ako ju merať?

Modul 6: Rýchlosť · Čas čítania: 9 minút

Cieľ lekcie: Po tejto lekcii dokážete zmerať, kde sa stráca čas, a rozpoznáte rozdiel medzi pomalosťou na strane servera a pomalosťou v prehliadači.

Kľúčové pojmy: TTFB, Core Web Vitals (LCP, INP, CLS), labdáta, poľné dáta, PageSpeed Insights, karta Sieť, kompresia, externé skripty, limity hostingového balíka, 503

Najprv merať, potom riešiť

"Stránka je pomalá" môže mať desať rôznych príčin. Kto bez merania naraz nasadí cache plugin, plugin na optimalizáciu obrázkov a väčší balík, potom nevie, čo vlastne pomohlo, a navyše má o tri veci viac na starosti. Preto vždy začnite tromi otázkami (rovnakými ako v návode vášho hostera):

1. Je pomalé všetko, alebo len administrácia? Pomalá administrácia s rýchlou verejnou časťou naznačuje pluginy, ktoré v administrácii robia veľa vecí, alebo boty útočiace na prihlasovaciu stránku.
2. Vždy, alebo len v určitých momentoch? Len v rušných časoch alebo keď beží naplánovaná úloha: vtedy váš balík naráža na svoje limity.
3. U každého, alebo len u vás? Vyskúšajte to na telefóne cez 4G alebo 5G, alebo požiadajte niekoho iného. Ak je pomalé len u vás, príčinou je vaše pripojenie alebo VPN.

Dve polovice: server a prehliadač

Čas, počas ktorého návštevník čaká, sa skladá z dvoch častí (lekcia 1.2):

1. Server vytvára HTML: webový server, PHP, pluginy, databáza. Vidíte to ako TTFB (time to first byte), čas do prijatia prvého bajtu odpovede. web.dev uvádza ako základné pravidlo, že väčšina stránok by mala smerovať k TTFB 0,8 sekundy alebo menej.
2. Prehliadač načíta tento HTML a potom stiahne všetko, čo je v ňom uvedené: štýly, skripty, písma, obrázky, video, meracie kódy, chatovacie widgety. Až keď je dostatok z toho stiahnuté, návštevník niečo uvidí.

Vysoký TTFB riešite na strane servera: caching (lekcia 6.2), menej alebo ľahšie pluginy, novšia verzia PHP, uprataná databáza (lekcia 6.3) alebo viac výkonu. Nízky TTFB a napriek tomu pomalá stránka poukazuje na stranu prehliadača: príliš veľké obrázky, príliš veľa skriptov, externé súčasti.

Core Web Vitals

Google meria skúsenosť návštevníkov tromi hodnotami, Core Web Vitals:

INP nahradil v marci 2024 staršie meranie FID. Google tieto hodnoty používa okrem iného pri zoraďovaní výsledkov vyhľadávania, ale najdôležitejší dôvod na ich zlepšenie je jednoduchý: návštevníci odchádzajú z pomalej alebo poskakujúcej stránky.

Labdáta a poľné dáta

Existujú dva druhy meraní a dávajú odlišné čísla:

• Labdáta: test v jednom okamihu, z jedného miesta, so simulovaným telefónom a pripojením. Užitočné na porovnanie (pred a po zmene), ale nejde o skutočného návštevníka.
• Poľné dáta: merania u skutočných návštevníkov s Chrome, za posledných 28 dní. To je to, čo návštevníci naozaj zažívajú. Malé stránky majú často príliš málo návštevníkov na poľné dáta.

PageSpeed Insights (pagespeed.web.dev) zobrazuje oboje: hore poľné dáta (ak existujú), pod nimi labtest so skóre a konkrétnymi odporúčaniami. Nepozerajte sa slepo na skóre od 0 do 100. Pozrite sa na jednotlivé časti: je LCP zlé preto, že je server pomalý (TTFB), alebo preto, že veľká fotka má 3 MB?

Testujte vždy niekoľkokrát (čísla sa menia) a otestujte aj bežnú stránku, nielen domovskú.

Pozrite sa sami pomocou prehliadača

Vývojárske nástroje vášho prehliadača (F12) ukazujú, čo sa naozaj deje:

• Karta Sieť: obnovte stránku s vypnutou cache (zaškrtnutie "Vypnúť cache"). Uvidíte každý súbor, ktorý sa načítava, akú má veľkosť a ako dlho to trvalo. Zoraďte podľa veľkosti: najväčšie súbory sú často obrázky. Zoraďte podľa domény: koľko toho pochádza od iných strán (písma, meracie kódy, videá)?
• Prvá požiadavka (samotný HTML): kliknite na ňu, karta Časovanie. "Waiting for server response" je TTFB.
• Hlavičky tejto prvej požiadavky: je prítomná kompresia (content-encoding: br alebo gzip) a pochádzala stránka z cache (lekcia 6.2)?

Obvyklí vinníci

V praxi pomalosť pri WordPresse zvyčajne spôsobuje jedna z týchto vecí:

1. Žiadna stránková cache: každá stránka sa pri každej návšteve vytvára znova (lekcia 6.2).
2. Príliš veľa alebo ťažké pluginy, najmä pluginy, ktoré pri každej požiadavke volajú externé služby alebo vykonávajú náročné dotazy (lekcia 5.3).
3. Veľké obrázky: fotka s veľkosťou 5 MB z telefónu na domovskej stránke (lekcia 4.4 a 6.3).
4. Ťažká téma alebo stránkový builder, ktorý na každej stránke načítava veľa skriptov a štýlov (lekcia 5.1).
5. Externé súčasti: písma, videá, chatovacie widgety, meracie kódy, tlačidlá sociálnych sietí od iných strán. Každé z nich je spojenie na iný server, ktorý môže byť pomalý.
6. Stará verzia PHP (lekcia 8.4).
7. Neupratná databáza: tisíce revízií, spam, logovacie tabuľky pluginov (lekcia 6.3).
8. Boty: crawlery, AI crawlery a pokusy o prihlásenie zaťažujú váš balík (lekcia 7.3).
9. Balík naráža na svoje limity: málo výkonu (CPU), procesov alebo pamäte na dané množstvo návštevnosti.

Limity vášho balíka

Pri zdieľanom hostingu dostane každý balík pevnú časť servera: výkon, pamäť, rýchlosť disku a určitý počet súbežných procesov. Ak vaša stránka spotrebuje viac, spomalí sa, alebo návštevníci dostanú chybové hlásenie 503 (Service Unavailable, u niektorých hosterov "Resource Limit Is Reached"). V DirectAdmin s CloudLinux to vidíte v časti Resource Usage (s "faults", ak bola vaša stránka spomalená) a pomocou X-Ray vidíte pri jednotlivých stránkach, ktorý plugin alebo dotaz zaberá čas. Iní hosteri majú podobné prehľady, niekedy len na vyžiadanie.

Väčší balík pomôže, ak vaša stránka naozaj potrebuje viac (rušný e-shop). Zle nastavenú stránku tým nevyriešite: problém sa neskôr vráti. Najprv nájdite príčinu.

Zhrnutie

• Najprv merajte: všetko alebo len administrácia, vždy alebo len niekedy, u každého alebo len u vás.
• TTFB je strana servera (smerujte k 0,8 sekundy alebo menej); zvyšok je to, čo načítava prehliadač.
• Core Web Vitals: LCP (2,5 s), INP (200 ms) a CLS (0,1); INP nahradil FID v roku 2024.
• PageSpeed Insights zobrazuje poľné dáta aj labdáta; karta Sieť ukazuje, čo sa naozaj načítava.
• Väčšinu pomalosti spôsobuje chýbajúca cache, ťažké pluginy, veľké obrázky a externé súčasti; väčší balík je až posledný krok.

Kvíz

Úloha

Úloha A6.1: Zmerajte svoj TTFB a kompresiu. Zadajte adresu svojej stránky a, ak chcete, aj jednu bežnú stránku (napríklad vašu kontaktnú stránku). Program požiada o každú stránku trikrát bez cookies a vypíše stredný TTFB, veľkosť HTML a to, či server posiela HTML komprimovaný (content-encoding gzip alebo br). Porovnajte výsledok s testom v PageSpeed Insights a zapíšte si, čo vás zaujalo.

Ďalšie čítanie

Tieto články popisujú kroky v paneloch WebOké; v iných paneloch fungujú podobne.

• Návod na DirectAdmin 18.3: Moja webová stránka je pomalá
• Návod na DirectAdmin 17.3: Resource Usage: CPU, pamäť a procesy
• Návod na DirectAdmin 17.4: X-Ray: odhaľovanie pomalých stránok
• Návod na DirectAdmin 17.5: 503 alebo „Resource Limit Is Reached“: čo teraz?
• Moja webová stránka je pomalá alebo využíva príliš veľa CPU: takto ju zrýchlite
• Core Web Vitals (web.dev, Angličtina): https://web.dev/articles/vitals
• PageSpeed Insights: https://pagespeed.web.dev/