Ako otestovať rýchlosť webu a nájsť príčinu pomalého načítania

Čo znamená pomalý web v praxi

Pomalý web sa nemusí prejaviť iba dlhým čakaním na úplné načítanie. Návštevník môže vidieť prázdnu obrazovku, neskoro sa zobrazujúci hlavný obsah, poskakujúce prvky alebo pomalú reakciu po kliknutí. Takéto správanie zvyšuje mieru odchodov a môže zhoršiť viditeľnosť vo vyhľadávačoch.

Pri hodnotení nestačí sledovať jednu hodnotu v sekundách. Dôležité je, kedy sa zobrazí prvý obsah, kedy je viditeľný hlavný prvok stránky a ako rýchlo web reaguje na interakciu. Výsledok treba porovnať zvlášť pre mobilné a desktopové pripojenie.

Ako otestovať rýchlosť webu správne

Test vykonajte vo viacerých nástrojoch a opakujte ho aspoň trikrát. Výsledky môže ovplyvniť poloha testovacieho servera, aktuálna záťaž hostingu, prehliadač aj kvalita pripojenia. Pre bežnú kontrolu sú vhodné nástroje PageSpeed Insights, Lighthouse vo vývojárskych nástrojoch prehliadača a WebPageTest.

Vyberte meranie pre mobil aj počítač. Pri mobilnom teste sa simuluje pomalší procesor a obmedzenejšie pripojenie, preto bývajú výsledky horšie než na optike alebo káblovom internete v kancelárii. Sledujte najmä čas odozvy servera, LCP, INP, CLS, veľkosť prenesených dát a počet požiadaviek.

Príčina: pomalá odozva hostingu alebo servera

Ak prehliadač dlho čaká, kým server odošle prvý bajt dát, problém býva v hostingu, databáze, aplikačnej logike alebo nedostatočnej kapacite servera. Častým príznakom je vysoký čas TTFB aj na jednoduchej stránke bez veľkých obrázkov. Situácia sa môže zhoršovať v špičke, keď web navštevuje viac ľudí naraz.

Overte si čas odozvy na viacerých URL adresách vrátane stránky bez prihlásenia. Skontrolujte chybové logy, využitie CPU a pamäte, pomalé databázové dopyty a dobu generovania stránky. Pomôcť môže serverová cache, optimalizácia databázy, aktualizácia PHP alebo presun na výkonnejší hosting. Pri publiku mimo Slovenska zvážte CDN s cache na okraji siete.

Príčina: neoptimalizované obrázky a video

Veľké fotografie, bannery a automaticky prehrávané video patria medzi najčastejšie dôvody dlhého načítania. Problém vzniká najmä vtedy, keď sa do mobilu posiela obrázok určený pre veľký monitor alebo keď súbory používajú zbytočne ťažký formát. Takýto obsah zvyšuje objem dát a môže spomaliť načítanie aj používateľom s rýchlym downloadom.

V reporte testu skontrolujte veľkosť obrázkov, nepoužité pixely a odporúčania na moderné formáty. Obrázky prevádzajte do WebP alebo AVIF, pripravte viac rozmerov cez responzívne obrázky a načítavajte obsah mimo prvej obrazovky odložene. Hlavný obrázok nad ohybom stránky však nenačítavajte lenivým spôsobom, pretože môže zhoršiť LCP.

Príčina: príliš veľa JavaScriptu a externých skriptov

Rozsiahly JavaScript dokáže blokovať vykreslenie stránky a zaťažiť procesor, najmä na lacnejších mobiloch. Často ide o kombináciu šablóny, doplnkov, analytiky, reklamných systémov, chatov, mapových služieb a sociálnych widgetov. Web môže mať dobrú rýchlosť pripojenia, ale stále reagovať pomaly, pretože prehliadač spracúva príliš veľa kódu.

V Lighthouse sledujte nepoužitý JavaScript, dlhé úlohy a skripty blokujúce hlavné vlákno. Každú externú službu posúďte podľa prínosu a načítajte ju až po súhlase používateľa alebo po interakcii, ak to funkcia umožňuje. Rozdeľte veľké balíky kódu, odstráňte nepotrebné doplnky a skripty, ktoré nie sú nutné pre prvé zobrazenie stránky.

Príčina: blokujúce CSS a neefektívne fonty

Štýly a webové fonty môžu oddialiť zobrazenie obsahu, ak ich prehliadač musí stiahnuť pred vykreslením stránky. Problém býva viditeľný ako biela obrazovka, neskoré zobrazenie textu alebo zmena rozloženia po načítaní písma. Príliš veľa rezov fontu a veľké CSS súbory zvyšujú počet požiadaviek aj celkový objem dát.

Odstráňte nepoužité CSS, kritické štýly pre prvú obrazovku doručte prednostne a zvyšok načítajte neskôr. Používajte len potrebné rezy písma, nastavte vhodné správanie načítania fontov a obmedzte počet externých zdrojov. Po úprave porovnajte CLS a čas prvého vykreslenia pred zmenou a po nej.

Príčina: slabá cache a zbytočné opakované prenosy

Ak návštevník pri každej návšteve opakovane sťahuje rovnaké obrázky, štýly a skripty, web zbytočne spotrebúva prenos. Pri domácom Wi-Fi môže mať používateľ kolísavú latenciu, jitter alebo packet loss, no správne nastavená cache aj tak zníži počet dát, ktoré musí opäť preniesť. Bez cache sa problém prejaví výraznejšie na mobilných dátach a DSL pripojení.

Skontrolujte HTTP hlavičky pre statické súbory a nastavte dlhšiu cache pre verziované CSS, JavaScript, obrázky a fonty. Používajte kompresiu Brotli alebo Gzip, HTTP/2 alebo HTTP/3 podľa podpory hostingu a cache na CDN. Po nasadení overte druhé načítanie stránky v čistom aj opakovanom teste.

Ako rozlíšiť problém webu od problému pripojenia

Rýchlosť webu nie je totožná s výsledkom testu internetového pripojenia. Test linky meria download, upload, latenciu, jitter a stratu paketov medzi zariadením a meracím serverom. Test webu meria aj výkon servera, množstvo prenesených súborov a spracovanie stránky v prehliadači.

Ak je web pomalý iba na jednom zariadení alebo v jednej sieti, otestujte router alebo modem, Wi-Fi signál a pripojenie cez kábel. Pri problémoch na všetkých zariadeniach a v rôznych sieťach je pravdepodobnejšia chyba priamo na webe alebo hostingu. Porovnajte výsledky cez Wi-Fi, mobilné dáta a inú lokalitu, aby ste vylúčili lokálny problém u operátora alebo v domácej sieti.

Priorita optimalizácie po teste

1. Najprv riešte čas odozvy servera a hlavný obsah. Tieto faktory majú priamy vplyv na pocit rýchlosti pri prvej návšteve.
2. Potom znížte veľkosť obrázkov, videí a skriptov. Zamerajte sa na prvú obrazovku a zdroje s najväčším objemom dát.
3. Následne odstráňte blokovanie vykreslenia. Optimalizujte CSS, fonty a JavaScript, ktorý brzdí interakciu.
4. Napokon nastavte cache a opakujte meranie. Každú významnú úpravu merajte samostatne, aby bolo jasné, čo prinieslo zlepšenie.

Rýchly web nevznikne jednou úpravou. Spoľahlivý postup je merať, určiť najväčšie úzke miesto, opraviť ho a výsledok overiť na mobilných aj desktopových podmienkach.