Zrychlujeme web – Co ovlivňuje rychlost?

Lukáš Ptošek   20. 11. 2019


Pomalý web je zabiják úspěšného byznysu. Všechno se dlouho načítá, zákazníci odchází před nákupem a Google ho penalizuje ve vyhledávání. Netýká se to náhodou i vašich stránek? Poradíme, jak si snadno rychlost změřit a vyřešit nejčastější problémy.

Každý web časem zestárne. Zatímco před lety bylo 10vteřinové načítání hlavní stránky poměrně časté, dnes si s tím rozhodně nevystačíte. Zákazníci jsou celkově čím dál náročnější, všechno chtějí hned a známé rčení, že „čas jsou peníze“ platí u webů dvojnásob. Stále také stoupá obliba nakupování přímo z telefonu, kde je rychlost ještě důležitější – mobil není tak výkonný a má pomalejší internet než pevné připojení. Stručně řečeno: pokud rychlost vašeho webu nejde s dobou, škodíte svému podnikání.

V igloonetu jsme nedávno dostali za úkol zrychlit web doktorkladivo.cz. Na jeho příkladu si v připravované sérii článků ukážeme, co všechno rychlost ovlivňuje a jak jednotlivé části vylepšit, když nechcete přepisovat celý e‑shop. Tento první díl se věnuje rychlosti obecně (proč je vlastně tak důležitá) a jejímu měření,  v dalších článcích se zaměříme na:

    • Datovou velikost obrázků a lazyloading;
    • Zrychlení webových fontů;
    • CSS a javascripty.

Proč řešit zrychlení webu

Lidská psychologie

Argumenty, že si lidé na načtení vašeho skvělého webu rádi počkají jsou nesmysl. Nikdo nerad čeká, a u zákazníků to platí dvojnásob – internet to jen podtrhl. Čím déle se stránka načítá, tím více roste riziko odchodu. Walmart třeba zjistil, že každá vteřina zrychlení zvýší konverzní poměr o 2 % (více příkladu naleznete na WPO stats).

  • Do 100 ms bereme reakci webu jako okamžitou;
  • Do 1 s vidíme prodlevu, ale nepřerušíme činnost;
  • Nad 10 s ztrácíme pozornost a máme tendenci začít dělat něco jiného.

Zdroj: Google/SOASTA Research, 2017

Google

Myslíte si, že rychlost ovlivňuje jen to, jak dlouho se stránka načítá? Chyba. S pomalým webem klesá šance, že vás zákazníci vůbec najdou. Většinu návštěvnosti k nám přivádí Google, a právě rychlost webu je jeden z klíčových parametrů, s kterým pracuje. Pokud na tom budete lépe než konkurence, tak:

Telefony a mobilní sítě

Rychlost mobilního internetu na 3G a 4G se stále zvyšuje, ale pořád nedosahuje kvalit domácího připojení. Důvodem je vysoká latence – čas mezi spojením serveru a klienta. Vždy proto testujte i mobilní 3G rychlost. Počítač s pevným připojením pomalý web nepocítí (alespoň ne tak razantně), mobilní uživatel na datech ano.

Jak rychlost měřit?

Uděláme si jednoduchý test. Otevřete si web městské části Brno Židenice. Přišlo vám načítání webu dlouhé? Mně taky. A takhle by to nemělo vypadat. Pokud chcete vědět, jak je váš web rychlý, použijte tyto dvě služby (pro laickou veřejnost doporučuji spíše tu první, ale zkusit můžete obě): PageSpeed InsightsWebPageTest. Měřte každou nejnavštěvovanější stránku podle vašich statistik. U Doktora Kladivo to byla domovská stránka, výpis produktů a detail produktu. Pokud jsou pro vás výsledky měření španělská vesnice, pojďme si je blíže vysvětlit.

PageSpeed Insights 

Test vám vypíše vše, co máte dobře a špatně. Neberte to dogmaticky, ale červené položky by bylo dobré opravit co nejdříve. Cílovou metou je celkové skóre kolem 80 bodů, o 100 se ani nesnažte, dlouhodobě není udržitelné. Zcela v pořádku jsou i nižší hodnocení (Doktor Kladivo se třeba pohybuje kolem 55), důležité je být rychlejší než konkurence.

Na PageSpeed Insight je skvělé, že vám v části Data pole ukážou reálné výsledky uživatelů Google Chrome. Nejspíš vám budou říkat, že jste pomalí, ale to se zobrazuje skoro všem :). Důležitější jsou barvičky u Prvního vykreslení obsahuProdlevy prvního vstupu – dobré skóre je více než 60 % zelené. Pokud má váš web malou návštěvnost, nemusíte mít výsledky Google Chrome uživatelů k dispozici.

V Laboratorních datech pak vidíte jednotlivé hodnoty, u každého problému je popsáno, jak jednotlivé chyby odstranit nebo alespoň zmírnit.

Jaké hodnoty měříme?

  1. První vykreslení obsahu: kdy se uživateli poprvé zobrazí nějaký text nebo obrázek;
  2. První smysluplné vykreslení: kdy začne být viditelný primární obsah stránky;
  3. Index rychlosti: kdy se zobrazí celá obrazovka nad zlomem stránky;
  4. První nečinnost procesoru: kdy přestane hlavni proces pracovat a začne zpracovávat požadavky uživatele? Nejčastěji zobrazení webu blokují javasripty;
  5. Doba do interaktivity: kdy začne být stránka plně interaktivní? Hodnota bude blízko předchozímu bodu, opět to často blokují javascripty;
  6. Odhadovaná latence vstupu: prodleva mezi vstupem a výstupem uživatele;
  7. První byte: doba, po které vám server odešle první byte. Záležitost backendu. Zobrazí se vám v detailech, jen když ho máte nad doporučenou velikost. Ideální je kolem 500 ms.

PageSpeed Insights se nedostanou do všech částí webu. Na zbytek doporučuju použít integrovaný nástroj v Google Chrome s názvem Lighthouse, vyvoláte ho klávesou F12 a kliknutím na poslední záložku Audits. Testujte v anonymní režimu, výsledek nebude ovlivněný vašimi pluginy.

WebPageTest

WebPageTest je mnohem pokročilejší, ale méně uživatelský přívětivý. Člověk už musí vědět, na co se dívat. Výhoda je, že web můžeme otestovat na různých prohlížečích a lokalitách, ale testy jsou mnohem pomalejší (záleží, jakou vlnu požadavku chytneme před sebou). Měřte nejlépe na rychlosti 3G Fast a emulováním mobilního prohlížeče – naleznete to v pokročilém nastavení v záložce Chromium, kde vyberte i nějaký starší telefon (například Nexus 5). Proč? Většina lidi má levnější a pomalejší telefony. Pokud zrychlíte pomalé telefony, automaticky tím zrychlíte i moderní iPhone. Problémy navíc více vyniknou, půlsekundová prodleva na PC může na telefonu znamenat i několik vteřin.

Po dokončení testu máte nahoře 6 barevných okýnek s hodnocením A až F. Nejlépe byste se měli držet samozřejmě A. My jich máme jen 5, protože nepoužíváme CDN.

Níže máte Performance results. Nejvíce vás zajímá speed index, což je zobrazení konkrétní stránky v daném prohlížeči, velikosti okna a rychlosti internetu. Čím je nižší, tím lépe. Dobré skóre je kolem 2 sekund.

Filmový pás (filmstrip view) je dobrý na ověření toho, jak probíhá vykreslování a kdy se uživateli zobrazí první snímek. Jde o mnohem lepší zdroj dat než strojově vypočítaný start render, který hodnotu často přežene nebo sníží.

Ve Waterfall pohledu vidíme, jak se načítají jednotlivé prvky. Snadno odhalíte ty, které vám celý proces zbytečně blokují.

Pozor si dejte i na markeťáky, kteří vám mohou zpomalit web pomocí Google Tag Manageru a bambilionu javascriptů třetích stran. Live Chat opravdu nepotřebujete spouštět v prvních 10 vteřinách.

Co (ne)zrychlí web

Kolem zrychlení webu koluje celá řada fám. Vypsal jsem „tipy“, o kterých si spousta lidí myslí, že vše vyřeší. Neudělají přitom skoro nic.

  1. Zrychlím čas načtení (kompletní load time) – pro Google jde o málo podstatný údaj. Důležitější je, jak se web načítá v průběhu načítání.
  2. Můj server je pomalý, tak zrychlím backend – backend se na rychlosti webu samozřejmě podílí, ale větší paseku na webu vám udělá frontend a jeho javascripty.
  3. Z Analytics mám hezká čísla načtení webu a dalších údajů, vše je tedy v pořádku – pěkná čísla máte, ale nereflektují kompletní web. Jedná se pouze o backend a načtení skriptů.
  4. Zmenším datově velikost stránky – pomůžete si, ale jen trošku.
  5. Čím méně dotazů na server, tím přece lépe – to platilo u protokolu HTTP/1. Přejděte na HTTP/2, kde získáte možnost paralelního zpracování a další čáry. Mé řešení v dalších článcích HTTP/2 vyžadují, na HTTP/1 byste si moc nepomohli a možná si i dost ublížili.
  6. Mám e‑shop a hodně obrázku, stačí je zmenšit – ano i ne. Obrázky nejsou prioritní, tudíž neblokují stahování a jejich zmenšením si pomůžete až v pozdější části načítání. Nasaďte lazyloading, tím si pomůžete nejvíce a hned. Pak vyřešte zbytek.

Výsledky zrychlování

Dostáváme se k závěru prvního dílu. Pro úplnost přidávám naše statistiky z Doktora Kladivo. Všeobecně jsme desktopovou verzi zrychlili o 83 % a snížili index rychlosti se  z 11,4 sekund na 1,3 sekund. Mobilní verzi jsme zrychlili všeobecně o 40 % a index rychlosti snížili z 8,1 sekundy na 4,8 sekundy. Pokud se v tabulkách ztrácíte, pošlete náš článek svému frontend vývojáři.

Níže uvedené výsledky jsou vždy průměrem tří měření.

Desktop – homepage

Měřená statistika Před Po Zrychlení
První vykreslení obsahu 3,4 s 0,4 s o 88 %
Index rychlosti 11,4 s 1,3 s o 88 %
Doba do interaktivity 15,1 s 2,7 s  o 82 %
První smysluplné vykreslení 5,6 s 0,4 s o 93 %
První nečinnost procesoru 14,4 s 1,9 s o 87 %
Maximální potenciální prodleva prvního vstupu  0,9 s 0,1 s o 87 %
První byte 0,6 s 0,1 s o 76 %

 

Mobil – homepage

Měřená statistika Před Po Zrychlení
První vykreslení obsahu 2,4 s 1,3 s o 46 %
Index rychlosti 8,1 s 4,8 s o 60 %
Doba do interaktivity 11,6 s 11,1 s o 5 %
První smysluplné vykreslení 3,4 s 1,3 s  o 62 %
První nečinnost procesoru 10,6 s 9,0 s o 15 %
Maximální potenciální prodleva prvního vstupu 0,6 s 0,5 s o 24 %
První byte 0,6 s 0,1 s o 76 %

Desktop – list produktů

Měřená statistika Před Po Zrychlení
První vykreslení obsahu 2,3 s 0,4 s o 82 %
Index rychlosti 11,2 s 1,4 s o 88 %
Doba do interaktivity 15,6 s 1,8 s o 88 %
První smysluplné vykreslení 5,2 s 0,4 s o 92 %
První nečinnost procesoru 15,0 s 1,9 s o 87 %
Maximální potenciální prodleva prvního vstupu 1,2 s 0,2 s o 85 %
První byte 1,3 s 0,5 s o 60 %

 

Mobil – list produktů

Měřená statistika Před Po Zrychlení
První vykreslení obsahu 2,4 s 1,2 s o 50 %
Index rychlosti 8,1 s 4,5 s o 45 %
Doba do interaktivity 12,6 s 11,4 s o 10 %
První smysluplné vykreslení 3,4 s 1,2 s o 65 %
První nečinnost procesoru 11,1 s 9,5 s o 15 %
Maximální potenciální prodleva prvního vstupu 0,6 s 0,5 s o 15 %
První byte 1,3 s 0,5 s o 60 %

 

Desktop – detail produktu

Měřená statistika Před Po Zrychlení
První vykreslení obsahu 3,1 s 0,3 s o 90 %
Index rychlosti 24,1 s 1,3 s o 95 %
Doba do interaktivity 18,6 s 1,8 s o 90 %
První smysluplné vykreslení 4,5 s 0,3 s o 93 %
První nečinnost procesoru 18,0 s 1,9 s o 89 %
Maximální potenciální prodleva prvního vstupu 1,3 s 0,1 s o 92 %
První byte 1,3 s 0,5 s o 60 %

 

Mobil – detail produktu 

Měřená statistika Před Po Zrychlení
První vykreslení obsahu 2,2 s 1,9 s o 14 %
Index rychlosti 7,6 s 3,3 s o 57 %
Doba do interaktivity 11,9 s 11,0 s o 8 %
První smysluplné vykreslení 3,0 s 1,9 s o 37 %
První nečinnost procesoru 10,1 s 9,2 s o 9 %
Maximální potenciální prodleva prvního vstupu 0,52 s 0,49 s o 6 %
První byte 1,3 s 0,3 s o 77 %

Proč má mobilní verze všeobecně menší zrychlení? Klient mobilní web už v minulosti nějakým způsobem optimalizoval a několik námi vylepšených prvků z desktopové verze v něm vůbec není. Dalším důvodem je, že v době psaní ještě nemáme vše hotové – chybí některé optimalizační prvky ze strany backendu (např. WebP) a přepsání našich javascriptů. V dalších dílech si povíme, jak jsme jednotlivé změny provedli.

Zařazeno v Vývoj

5 komentáře

  1. Ivo Kylián

    Myslím si, že by bylo korektní v úvodu napsat, že tento web je poměrně nový a z dílny Igloonetu. A museli jste ho zrychlit o nějakých 90%, aby se dostal na aktuální čísla.

    A ještě chybí informace, že zásadní zrychlení pro vybrané metriky bylo po přesunu na nový hardware.

    A jedna důležitá metrika pro crawling webů vyhledávači se nepodařila stále uspokojivě vyřešit.

    Jen pro úplnost této případovky.

    1. Autor Lukáš Ptošek

      Dobrý den,

      děkuji za komentář. Předem bych chtěl upozornit (možná to na první pohled není zřejmé), že se v článku zaměřuji pouze na frontendovou část webu. S backendem jsem vůbec nefiguroval a ani nefiguruji – nejen proto bych tomu vůbec neříkal případovka. Jde spíš o obecný článek ohledně toho, co se dá na webu a e-shopu zrychlit a vylepšit. Na číslech Kladiva chci hlavně ukázat, jak může takové zrychlení reálně vypadat.

      Web je z dílny igloonetu, ale vznikal v době, kdy jsem tu ještě nepracoval (práce začaly někdy v roce 2017), tudíž netuším, jak vývoj v té době probíhal.

      Zrychlení pro vybrané metriky bylo po přesunu na nový hardware. Rychlost backendu má na rychlost web určitě vliv, ale není to hlavní problém, kvůli čemu jsou weby pomalé. Metrika, která to ukazuje, je první bajt (first byte, TTFB), a tam došlo ke zrychlení průměrně z 1,3 na 0,5 sekundy. A jak už jsem psal výše, článek se primárně touhle metrikou nezabýval a nebyla jeho smyslem.

      Ohledně crawlingu webů – jedná se o TTFB hodnotu, kterou úpravou frontendu vůbec neovlivním. To už byla práce kolegů, ve které se vůbec neorientuji.

      Díky za přečtení
      Lukáš Ptošek

      1. Ivo Kylián

        Vůbec bych se už nad tím nepozastavoval, kdyby tento článek nevznikl. Píšu za sebe, ne v zastoupení a s vědomím klienta.

        Tak to vypadá ze článku, že nějaký jouza udělal tragicky pomalý e-shop a vy jste jej dali do formy. Vím, co okolo všechno bylo, ale to bych nechtěl raději rozebírat veřejně.

        Určitě nechci rozporovat, že došlo k výraznému zlepšení a až na tu jednu metriku (chci vás opravit TTFB to přímo není, je to jen její podmnožina) je to výborný stav.

        Nicméně ty záležitosti okolo zrychlení mi nedávají dohromady takový smysl, abyste se prezentovali případovkou k tomuto e-shopu a navíc bez vědomí klienta. Součástí případovek bývá obvykle vyjádření klienta, jaký to mělo pro ně význam a jak to proběhlo. Tady mi to chybí.

        Tím to za sebe uzavírám a děkuji za vyjádření se k mému komentáři.

        Ivo Kylián

    1. Autor Lukáš Ptošek

      Zdravím,

      určitě oboje, ale hlavně mobil. Když vylepšíte skóre na mobilu, tak s největší pravděpodobnosti vylepšíte skóre i na desktopu. Samozřejmě více je lepší, ale netřeba to tlačit úplně na krev do maxima kdy na tom spálíte hromadu hodin kvůli pár bodům.

      Většinou mám zkušenost, že dosáhnout skóre 80 na desktopu nemusí být zase tak obtížné jako na mobilu.

      Doufám, že touhle odpovědi jsem vám pomohl 🙂


Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *