Ako zrýchliť web a prečo na tom záleží
Pomalý web stráca návštevníkov skôr, než uvidia vašu ponuku, a v Googli mu to nepomáha. Ukážeme, ako rýchlosť zmerať a čo ju v praxi zlepší najviac.
Rýchlosť webu nie je technická drobnosť pre programátorov. Rozhoduje o tom, či sa návštevník vôbec dostane k vašej ponuke, a patrí aj medzi signály, ktoré Google pri hodnotení stránok zohľadňuje.
Dobrá správa je, že najväčšie zlepšenie zvyčajne prinesie pár jednoduchých krokov. Nemusíte kvôli tomu stavať nový web.
Prečo na rýchlosti webu záleží
- Návštevníci neodchádzajú. Podľa údajov Google z roku 2016 ľudia opustia 53 % návštev mobilného webu, ktorý sa načítava dlhšie ako tri sekundy.
- Google to zohľadňuje. Skúsenosť používateľov so stránkou hodnotí aj cez metriky Core Web Vitals. Rýchlosť neprebije kvalitný obsah, ale medzi podobnými stránkami môže rozhodnúť.
- Viac dopytov. Čím menej čakania, tým viac ľudí sa dostane k formuláru alebo tlačidlu na telefón.
- Lacnejšia reklama. Ak platíte za kliknutia, každý návštevník, ktorý odíde počas načítavania, sú vyhodené peniaze.
Ako zmerať rýchlosť webu
Skôr než začnete opravovať, zmerajte východiskový stav. Stačia bezplatné nástroje:
- PageSpeed Insights (pagespeed.web.dev) ukáže skóre, metriky Core Web Vitals a konkrétne odporúčania. Sledujte hlavne výsledky pre mobil.
- Google Search Console v prehľade Core Web Vitals ukáže, ktoré skupiny stránok majú problém podľa údajov od skutočných návštevníkov.
- Bezplatný audit Webscore popri rýchlosti skontroluje aj SEO, mobilnú verziu a bezpečnosť a pri každom náleze ukáže nameranú hodnotu. Spustíte ho na úvodnej stránke.
Core Web Vitals jednoducho
- LCP (Largest Contentful Paint): za ako dlho sa zobrazí hlavný obsah. Dobrá hodnota je do 2,5 sekundy.
- INP (Interaction to Next Paint): ako rýchlo stránka zareaguje na kliknutie. Dobrá hodnota je do 200 milisekúnd.
- CLS (Cumulative Layout Shift): či obsah počas načítania neposkakuje. Dobrá hodnota je do 0,1.
1. Zmenšite a zmodernizujte obrázky
Obrázky bývajú najväčšou časťou stránky. Fotka priamo z fotoaparátu môže mať päť megabajtov, pričom na webe stačí niekoľko stoviek kilobajtov a často aj menej.
- Zmenšite rozmery na veľkosť, v akej sa fotka naozaj zobrazuje.
- Používajte moderné formáty WebP alebo AVIF. Pri rovnakej kvalite sú výrazne menšie ako JPEG.
- Obrázkom pod prvou obrazovkou pridajte atribút
loading="lazy", aby sa načítali až pri posúvaní. - Uvádzajte šírku a výšku (
widthaheight), aby obsah pri načítaní neposkakoval.
Na WordPresse to zvládnu pluginy na optimalizáciu obrázkov. Pri webe na mieru to má riešiť vývojár už pri nahrávaní obsahu.
2. Obmedzte skripty, pluginy a externé služby
Každý chat, vyskakovacie okno, sledovací kód, slider či plugin pridáva súbory, ktoré musí prehliadač stiahnuť a spustiť. Na mobile to citeľne spomaľuje reakcie stránky.
- Prejdite si zoznam pluginov a vypnite tie, ktoré nepoužívate.
- Ťažký slider nahraďte jednou dobrou fotkou. Ľudia ho aj tak zriedka preklikávajú.
- Nekritické skripty načítavajte s atribútom
deferalebo až po interakcii. - Z externých služieb nechajte len tie, ktoré naozaj využívate.
3. Odstráňte oneskorené reakcie a poskakovanie obsahu
Metrika INP meria, ako rýchlo stránka zareaguje, keď na niečo kliknete. Zlé hodnoty spôsobuje najčastejšie JavaScript, ktorý zamestnáva prehliadač: ťažké slidery, animácie spúšťané pri posúvaní, chaty a nástroje tretích strán.
- Skúste na mobile otvoriť menu a kliknúť na tlačidlá. Ak reagujú s oneskorením, hľadajte príčinu v skriptoch.
- Na WordPresse sa pozrite na page buildery. Pridávajú veľa kódu aj na stránky, kde ho netreba.
- Vyskakovacie okná a lišty nespúšťajte hneď pri načítaní stránky.
Poskakovanie obsahu (CLS) vzniká, keď sa neskôr načíta obrázok bez rozmerov, reklama, banner alebo písmo s inou veľkosťou a posunie text, ktorý už človek čítal. Rezervujte miesto pre obrázky a bannery a lištu so súhlasom s cookies zobrazujte ako prekrytie, nie posunutím celej stránky.
4. Načítajte písma rozumne
Vlastné písma dodajú webu charakter, ale každý rez je ďalší súbor. Použite najviac dve rodiny písma, len potrebné hrúbky a nastavte font-display: swap, aby sa text zobrazil hneď. Hlavné písmo nadpisov môžete prednačítať cez rel="preload".
5. Zapnite kompresiu, cache a kvalitný hosting
- Kompresia gzip alebo Brotli zmenší textové súbory (HTML, CSS, JavaScript) často na menej ako polovicu.
- Cache v prehliadači zabezpečí, že súbory, ktoré sa nemenia, si prehliadač uloží a pri ďalšej návšteve ich nesťahuje znova.
- Cache na serveri znamená, že hotové stránky sa neskladajú pri každej návšteve odznova. Na WordPresse to riešia cache pluginy.
- Hosting za pár eur býva preťažený. Keď server odpovedá pomaly, nepomôže ani dokonale optimalizovaná stránka.
- CDN sa oplatí, ak máte zákazníkov vo viacerých krajinách. Sieť serverov doručí súbory z miesta bližšie k nim.
6. Testujte na skutočnom mobile
Na výkonnom počítači s rýchlym internetom pôsobí takmer každý web svižne. Zákazník však stránku často otvára na staršom telefóne cez mobilné dáta. Pri meraní preto sledujte výsledky pre mobil a web si otvorte aj na vlastnom telefóne mimo Wi-Fi.
V akom poradí web zrýchľovať
- Zmerajte stav v PageSpeed Insights a poznačte si LCP, INP a CLS.
- Optimalizujte obrázky. Zvyčajne prinesú najväčší efekt za najmenej práce.
- Vypnite nepotrebné pluginy a externé skripty.
- Zapnite kompresiu a cache.
- Zmerajte znova a porovnajte s pôvodným stavom.
Ak ani potom web nie je rýchly, problém býva v samotnom riešení, napríklad v ťažkej šablóne alebo zastaranom systéme. Vtedy sa oplatí zvážiť nový web. Naše weby staviame s cieľom načítania pod dve sekundy, viac na stránke tvorba webu na mieru.
Rýchlosť je len jedna časť hodnotenia. Ako si skontrolovať aj ostatné, píšeme v článku Čo je SEO audit a ako si ho spraviť zadarmo.
Časté otázky
Aká rýchlosť webu je dobrá?
Hlavný obsah by sa mal zobraziť do 2,5 sekundy (LCP), stránka by mala zareagovať na kliknutie do 200 milisekúnd (INP) a obsah by nemal poskakovať (CLS do 0,1). Tieto hranice Google označuje ako dobré.
Ovplyvňuje rýchlosť webu pozície v Googli?
Áno, skúsenosť so stránkou vrátane Core Web Vitals patrí medzi signály hodnotenia. Najdôležitejší je však stále relevantný obsah, rýchlosť rozhoduje hlavne medzi podobne kvalitnými stránkami.
Prečo mi PageSpeed Insights ukazuje pri každom meraní iné skóre?
Laboratórne meranie závisí od aktuálneho zaťaženia servera a siete, preto sa výsledok mierne mení. Porovnávajte niekoľko meraní a sledujte aj údaje od skutočných návštevníkov v Google Search Console.
Zrýchli web lepší hosting?
Ak server odpovedá pomaly, áno. Keď je však stránka pomalá kvôli veľkým obrázkom alebo množstvu skriptov, samotný hosting to nevyrieši a treba optimalizovať aj stránku.
