Rýchlosť webu sa rieši ako technická metrika. Vývojár ukáže skóre, marketing prikývne a nikto nevie, čo s tým.
Pritom je to jedna z mála vecí na webe, ktorú sa dá prepočítať priamo na peniaze. Každá sekunda navyše znamená ľudí, ktorí odídu skôr, než uvidia, čo ponúkate.
Tento text vysvetľuje, čo rýchlosť reálne ovplyvňuje, ktoré tri metriky sledovať a čo s tým urobiť, keď nie ste vývojár.
Čo rýchlosť ovplyvňuje
Hovorí sa hlavne o pozíciách vo vyhľadávaní, a to je paradoxne tá najmenšia časť. Google rýchlosť hodnotí, ale jej váha je nižšia, než sa traduje.
Väčšina straty je inde, a to pri ľuďoch, ktorí už na web prišli a nedočkali sa.
Konverzie. Najvýraznejší dopad. Pomalý web stráca ľudí medzi kliknutím a načítaním, teda vo chvíli, keď sú náklady na ich získanie už minuté.
Náklady na reklamu. Pri platených kampaniach platíte za preklik bez ohľadu na to, či sa stránka stihla načítať. Pomalá stránka tak predražuje každú objednávku.
Pozície vo vyhľadávaní. Reálny, ale menší vplyv. Rozdiel medzi rýchlym a priemerným webom zvyčajne nerozhoduje, medzi priemerným a veľmi pomalým už áno.
V praxi z toho vyplýva, že rýchlosť patrí do rozpočtu na konverzie, nie do rozpočtu na SEO. Tak sa aj vyhodnocuje.
Tri metriky, ktoré sa počítajú
Google meria rýchlosť sadou ukazovateľov Core Web Vitals. Sú tri a každý opisuje inú časť zážitku zo stránky.
Podstatné je, že sa merajú na reálnych návštevách, nie v laboratóriu.
LCP meria, za aký čas sa vykreslí najväčší prvok na obrazovke, zvyčajne hlavný obrázok alebo nadpis. Cieľom je do dva a pol sekundy.
INP meria, ako rýchlo stránka zareaguje na kliknutie alebo ťuknutie. Cieľom je do dvesto milisekúnd.
CLS meria, ako veľmi obsah poskakuje počas načítavania. Cieľom je menej ako jedna desatina.
Rozdiel medzi laboratórnym testom a reálnymi dátami býva veľký. Test sa robí na rýchlom pripojení a výkonnom počítači, Vaši návštevníci často nie.
Prečo rýchlosť ovplyvňuje správanie ľudí, rozoberá tím okolo web.dev v článku o význame rýchlosti. Kľúčová myšlienka je, že pomalosť neodháňa len časť návštevníkov, ale znižuje dôveru v celú značku.
Čo presne znamená page speed
Page speed označuje čas, za ktorý sa konkrétna stránka načíta a začne byť pre návštevníka použiteľná. Nejde o jedno číslo, ale o súhrn viacerých momentov od kliknutia až po chvíľu, keď sa dá so stránkou pracovať.
Treba odlíšiť rýchlosť jednej stránky od rýchlosti webu ako celku. Keď sa hovorí o website page speed, zvyčajne sa myslí súhrnný pohľad na všetky stránky. Domovská stránka pritom môže byť rýchla a detail produktu pomalý, pretože každá šablóna načítava iné obrázky a skripty.
Pomocné ukazovatele okrem Core Web Vitals
V nástrojoch na meranie uvidíte aj ďalšie čísla. Nie sú súčasťou hodnotenia Core Web Vitals, ale pomáhajú nájsť príčinu problému.
- TTFB (Time to First Byte) ukazuje, ako dlho trvá, kým server pošle prvú odpoveď. Vysoká hodnota ukazuje skôr na server alebo pomalé generovanie stránky.
- FCP (First Contentful Paint) meria, kedy sa na obrazovke objaví prvý obsah, napríklad text alebo logo. Keď je FCP v poriadku a LCP vysoké, problém býva v hlavnom obrázku.
- TBT (Total Blocking Time) v laboratórnom teste ukazuje, ako dlho skripty blokujú stránku. Súvisí s tým, ako rýchlo stránka reaguje na kliknutie.
Kde sa rýchlosť zvyčajne stráca
Príčiny sú pri českých weboch prekvapivo podobné. Vo väčšine prípadov ide o štyri veci a všetky sa dajú riešiť bez prestavby webu.
Sú zoradené podľa toho, ako často ich vidíme a koľko to zvyčajne prinesie.
Nekomprimované obrázky. Najčastejšia príčina vôbec. Fotka z fotoaparátu nahraná priamo do redakčného systému môže mať niekoľko megabajtov.
Skripty tretích strán. Chat, meracie kódy, widgety, hodnotenia. Každý pridá požiadavky, ktoré nemáte pod kontrolou.
Šablóna, ktorá načítava všetko. Mnohé hotové šablóny načítajú na každej stránke kód pre funkcie, ktoré tam nie sú.
Pomalý hosting. Najmenej častá príčina, ale pri zdieľanom hostingu za pár korún mesačne sa prejaví hlavne v špičke.
Ako prebieha načítanie stránky
Keď viete, čo sa deje medzi kliknutím a zobrazením, ľahšie pochopíte, prečo pomáhajú práve úpravy obrázkov, skriptov a šablón. Zjednodušene ide o tieto kroky.
- Prehliadač zistí adresu servera a nadviaže s ním spojenie.
- Server pripraví stránku a pošle HTML kód. Redakčné systémy ju často skladajú z databázy, čo bez vyrovnávacej pamäte trvá dlhšie.
- Prehliadač načíta štýly a skripty. Kým ich nespracuje, časť stránky nemusí zobraziť.
- Stiahnu sa obrázky, písma a ďalšie súbory. Tu sa najviac prejaví veľkosť fotografií.
- Spustia sa skripty tretích strán a stránka začne reagovať na kliknutia.
Jednotlivé kroky sa navzájom ovplyvňujú. Ťažký skript v hlavičke stránky napríklad oddiali zobrazenie obsahu, aj keď je server rýchly.
Čo urobiť, keď nie ste vývojár
Mnohé zlepšenia nevyžadujú programátora. Nasledujúce kroky zvládne marketér s prístupom do redakčného systému.
Poradie je podľa pomeru námahy a výsledku.
Zmenšite obrázky. Nahrávajte ich v rozumnom rozlíšení a v modernom formáte. Pri WordPresse to zvládne plugin, pri e-shopoch zvyčajne nastavenia.
Prejdite skripty. Vypíšte si, čo všetko sa na webe načítava, a pri každej položke sa opýtajte, či ju niekto používa. Zvyčajne nájdete dve až tri zbytočné.
Zapnite vyrovnávaciu pamäť. Cachovací plugin alebo nastavenie na serveri je jednorazová práca s okamžitým efektom.
Zistite, ktoré šablóny sú najpomalšie. Nemá zmysel riešiť web ako celok. Zamerajte sa na domovskú stránku, kategóriu a produkt alebo stránku služby.
To posledné je najdôležitejšie. Zadanie pre vývojára nemá znieť zrýchlite web, ale zrýchlite tieto tri šablóny a tu je dôvod.
Ako si to zmerať
Nástroje sú zadarmo a stačia dva. Rozdiel medzi nimi je v tom, či merajú laboratórne, alebo na reálnych ľuďoch.
Používajte oba a pozerajte sa hlavne na ten druhý typ dát.
PageSpeed Insights ukáže oboje naraz. Hore sú dáta z reálnych návštev za posledných dvadsaťosem dní, dole laboratórny test s odporúčaniami.
Search Console má vlastnú sekciu Core Web Vitals, ktorá ukazuje celý web naraz a rozdeľuje adresy do skupín podľa šablóny. Tam sa ukáže, ktoré typy stránok sú problém.
Ako sa v Search Console orientovať, opisujeme pri Search Console. Sekcia s rýchlosťou je jedna zo siedmich, ktoré sa oplatí sledovať.
Koľko do toho investovať
Rýchlosť má klesajúci výnos. Cesta z veľmi pomalého webu na priemerný je lacná a prinesie veľa, cesta z dobrého na výborný je drahá a prinesie málo.
Rozumný cieľ pre väčšinu firiem je dostať sa do zeleného pásma na mobile pri najnavštevovanejších šablónach.
Naháňať stovku vo všetkých testoch nedáva ekonomický zmysel. Posledné body stoja neporovnateľne viac než tie prvé a na tržbách sa neprejavia.
Praktický test, či má zmysel do rýchlosti ďalej investovať, je porovnať konverzný pomer na mobile a na počítači. Keď je rozdiel veľký, priestor tam je.
Čomu sa vyhnúť
Nasledujúce postupy vidíme často a všetky buď nefungujú, alebo naopak škodia.
Šetrí to čas aj peniaze.
Optimalizácia podľa skóre. Číslo v teste nie je cieľ. Cieľom je, aby ľudia nakupovali.
Agresívne cachovanie bez testu. Pri e-shope dokáže rozbiť košík alebo zobrazovať neplatné ceny.
Odkladanie skriptov naslepo. Odloženie meracieho kódu znamená, že prídete o dáta.
Riešenie webu ako celku. Zlepšenie stránky, na ktorú nikto nechodí, nikam nevedie.
Ako udržať page speed aj po úpravách
Zrýchlenie nie je jednorazová úloha. Weby sa časom spomaľujú, pretože pribúdajú nové obrázky, pluginy a meracie kódy.
- Pred pridaním nového skriptu si ujasnite, kto ho bude používať a kedy ho odstránite.
- Po väčšej aktualizácii šablóny alebo pluginov znova zmerajte najdôležitejšie stránky.
- Pri nových vstupných stránkach pre kampane skontrolujte rýchlosť ešte pred spustením reklamy.
- Pravidelne sa pozrite do prehľadu Core Web Vitals, či sa niektorá skupina stránok nezhoršila.
Pomáha aj jednoduché pravidlo pre redaktorov, napríklad maximálna šírka a veľkosť obrázka, ktorý môžu nahrať. Ušetrí Vám to neskoršie opravy.
Otázky, ktoré sa okolo rýchlosti objavujú
Päť otázok, ktoré najčastejšie dostávame od majiteľov webov aj od marketérov.
Odpovede platia všeobecne, pri konkrétnej platforme sa detaily líšia.
Zlepší rýchlosť moje pozície?
Trochu áno, ale menej, než sa traduje. Zásadný rozdiel to robí len pri naozaj pomalých weboch.
Berte ju ako investíciu do konverzií. Pozície sú príjemný vedľajší efekt.
Aké skóre stačí?
Dôležitejšie ako skóre je, či ste v zelenom pásme pri všetkých troch metrikách Core Web Vitals na mobile.
Skóre v PageSpeed Insights je vážený priemer, ktorý sa dá zlepšiť aj bez reálneho dopadu na používateľov.
Prečo mám zakaždým iné číslo?
Laboratórny test sa mení podľa zaťaženia servera a podmienok merania. Preto sa pozerajte na dáta z reálnych návštev, ktoré sú stabilnejšie.
Keď test výrazne kolíše, je to samo osebe signál, že web je pod záťažou nestabilný.
Pomôže prechod na lepší hosting?
Niekedy áno, ale býva to až tretie v poradí. Najprv obrázky a skripty, potom šablóna, až potom server.
Výnimkou je zdieľaný hosting za pár desiatok korún, kde sa limit prejaví hneď.
Koľko to stojí?
Základné úpravy zvládnete sami za pár hodín. Zásah do šablóny býva v jednotkách až nižších desiatkach tisíc CZK podľa zložitosti webu.
Prestavba webu kvôli rýchlosti sa oplatí len vtedy, keď je potrebná aj z iných dôvodov.
Kde začať u vás
Vložte svoju najnavštevovanejšiu stránku do PageSpeed Insights a pozrite sa na hornú časť s reálnymi dátami. Do minúty viete, či problém máte.
Potom porovnajte konverzný pomer na mobile a na počítači v Analytics. Keď je rozdiel výrazný, rýchlosť je najpravdepodobnejšia príčina.
Chcete konkrétne zadanie pre vývojára namiesto všeobecného zrýchlite to? Rýchlosť riešime pri tvorbe webov aj v rámci optimalizácie pre vyhľadávače.
Časté otázky o page speed
Čo je page speed?
Page speed je čas, za ktorý sa konkrétna stránka načíta a dá sa používať. Hodnotí sa viacerými metrikami, najmä tromi ukazovateľmi Core Web Vitals.
Aký je rozdiel medzi page speed a rýchlosťou celého webu?
Page speed sa týka jednej konkrétnej adresy, rýchlosť webu je súhrnný pohľad na všetky stránky. Jednotlivé šablóny sa môžu výrazne líšiť, preto je presnejšie merať ich samostatne.
Prečo je page speed na mobile horší ako na počítači?
Mobilný test v PageSpeed Insights simuluje pomalší telefón a slabšie pripojenie. Mobilné zariadenia majú aj menej výkonu na spracovanie skriptov. Preto sa oplatí zamerať najmä na mobilnú verziu.
Ako často kontrolovať page speed?
Stačí pravidelná kontrola raz za mesiac a vždy po väčšej zmene na webe. Dáta z reálnych návštev sa menia postupne, takže výsledok úprav uvidíte až po niekoľkých týždňoch.
