O tom, že rychlost načtení webu je kritická pro dnešní webové stránky, se napsalo mnoho řádků textu. V současnosti je internet přeplněn obsahem, který bojuje o pozornost návštěvníka. Je jedno, zda se jedná o magazín nebo e-shop, důležité je neztratit jeho pozornost. Pravděpodobnost, že u Vás nakoupí nebo si přečte celý článek, je pak daleko vyšší. Když se Vaše stránka bude načítat nepřiměřeně dlouho, návštěvník odejde.
A tomu chceme zabránit tím, že se ty naše stránky načtou rychlostí blesku. Takže je vylepšujeme, upravujeme a zrychlujeme. V ideálním světě by stačilo udělat rychlou stránku hned při jejím vytváření, ale v ideálním světě nežijeme. Nejpoužívanější redakční systém na světě, WordPress, je na zpomalování velmi náchylný, a to hlavně v průběhu času. Necitlivé přidávání pluginů a redaktoři, kteří neoptimalizují obrázky, to vše přispívá ke zpomalování.
Proto je třeba rychlosti věnovat pozornost průběžně a v tom Vám může být nápomocen přímo prohlížeč Chrome. Nástrojů pro diagnostiku webů je mnoho, ale vzhledem k tomu, že Chrome používá mnoho lidí, můžete si zkontrolovat, jak je na tom Váš web, přímo v prohlížeči.
Chrome dev tools
Chrome dev tools je sada nástrojů, kterou prohlížeč obsahuje a vy je můžete bezplatně používat. Otevřít sadu můžete pomocí klávesových zkratek – command+shift+p(Mac), control+shift+j (Windows, Linux), nebo kliknutím pravým tlačítkem myši na web a volbou – prozkoumat. Otevře se Vám panel s nástroji dle nastavení buď u dolního okraje okna nebo na pravé straně. Vypadat bude jako na obrázku, kde v záložce elements je vpravo html kód stránky a vlevo příslušný css kód.
Nás zajímá záložka Network
Zatím tam nevidíme nic, ale stačí obnovit stránku s otevřenými dev tools a hned uvidíme seznam všeho, co se ve stránce načítá.
Záložka network přehledně ukazuje každý request, který musí stránka vykonat. Zde můžete vidět graficky zobrazený průběh načítání a zároveň můžeme vyfiltrovat seznam jen podle určitých typů.
To nejdůležitější:
- All – zobrazí všechny requesty – viz. obrázek
- XHR – zobrazí komunikaci se server, která probíhá na pozadí stránky (AJAX)
- JS – všechny soubory javascriptu
- CSS – soubory se styly
- Img – obrázky
- Font – soubory s fonty
Můžete se tak soustředit jen na některé typy requestů, třeba na javascript.
V samotné tabulce network logu pak vidíte jednotlivé requesty, kde jednotlivé sloupce jsou:
- Status – stav provedeného requestu
- Type – typ, viz. Výše
- Initiator – co vyvolalo provedení requestu
- Size – velikost přenosu dat
- Time – doba provedení requestu
- Waterfall – grafické znázornění provádění jednotlivých requestů v závislosti na čase
Díky tabulce tak zjistíte, zda Vaše stránka nenačítá zbytečně fonty, zda máte všechny soubory dostupné nebo zda používáte efektivně lazy loading.
Dostupnost souborů
Při stahování všech souborů, provádí prohlížeč komunikaci s místem, kde je zdroj uložen. Ta komunikace zabere nějaký čas, a proto si některé soubory prohlížeč ukládá do vlastní paměti.
V případě, že se je zdroj z nějakého důvodu nedostupný, snaží se Chrome místo stažení, nebo získání z mezipaměti, dát soubor stále získat, do té doby, než jej vyhodnotí, jako nedostupný. To nějakou dobu trvá, a pokud je takových requestů na stránce více, prodlouží to dobu načtení webové stránky.
Na obrázku můžete vidět, že v tomto případě jde o nedostupný soubor superpwa-sw.js a favikonu, která je načítána z http. Místo z https url. Těmito dvěma requesty se bude prohlížeč zdržovat každé načtení, neuloží si do paměti, že je nemůže stáhnout, ale bude se o to stále pokoušet.
Takto můžete jednoduše najít a určit, které soubory/requesty je třeba opravit, aby načítání nebrzdili.
Funkční lazyloading
Lazy loading (odložené načítání) se používá především u obrázků. Funguje tak, že javascriptová funkce vyhodnotí, které obrázky ze stránky nejsou vidět na aktuální obrazovce a nenačítá je. Což má velký smysl u magazínů a e-shopů, kde je řada článků/produktů skrytá pod dolním okrajem obrazovky. Na screenu vidíte načítání obrázků na mém blogu musilda.cz, kde soubory končí posledním – webinar-emaily.jpg. Také je vidět, že jeho načtení vyvolal script lazyload.js, což je script, jenž se stará na webu o lazyloading. Další screen ukazuje, jak se obrázky doplní v tu chvíli, kdy začnu scrollovat stránkou směrem dolů.
Pomocí záložky network tak zjistíte, zda Vám tato velmi důležitá funkce funguje správně. Rozdíl mezi stránkou používající lazyloading pak může vypadat takto:
Lazyloading
Bez lazyloadingu
Rychlost načítání webu – filmový pás
Chrome umí v této záložce ještě jednu super věc – zachytí načítání webové stránky na takzvaný filmový pás. Ukáže Vám tak, jak vypadá načítání Vaší stránky v čase. Po zaškrtnutí checkboxu Capture screenshots zobrazí to, co vidí návštěvník. Můžete tak zjistit, že Vám něco blokuje vykreslování, nebo Vám nefungují kritické css styly. Což může také odradit návštěvníka, když kouká několik vteřin na bílou stránku.
Jednotlivé obrázky si můžete zvětšit a listovat mezi nimi.
Lighthouse
Kdo by neznal tento obrázek a nástroj https://developers.google.com/speed/pagespeed/insights/. Asi nejpoužívanější nástroj pro měření rychlosti načítání stránek vůbec. Méně lidí však ví, že měření probíhá za pomocí nástroje Lighthouse, která je open source a je tak volně dostupný pro každého.
Dobrá zpráva je, že je integrován přímo v Chrome a audit rychlosti si tak můžete udělat přímo v prohlížeči na záložce Audits.
V nastavení vidíte, že si můžete vybrat, zda budete hodnotit výsledky pro mobil nebo pro desktop, a jaké kategorie audit pokrývá. Jsou to:
- Rychlost načítání
- Progresívní webové aplikace
- Zavedené postupy
- Přístupnost
- SEO
Nezapomeňte kliknout na levé straně na ozubené kolečko, aby Vám Lighthouse nabídnul další dvě volby:
- Clear storage – pokud je zaškrtnuto, budou se stahovat všechny zdroje a nebude se používat uložené v prohlížeči
- Simulated throttling – aktuálně je toto nastaveno ponecháno v auditu pro uživatele používající tlačítko Live Trace. Ponechte tedy zaškrtnuté.
Výsledky auditu
Chrome Vám vykreslí pro každou oblast výsledné skóre. Je třeba říci, že audit berte jako doporučení co zlepšit, nelpěte slepě na tom, co Vám Lighthouse napíše, někdy je velmi problematické dosáhnout stoprocentních výsledků, především u WordPress šablon, do kterých nemůžete zcela zasahovat.
Performance
V první části se hodnotí rychlost načítání. Zeleně se zobrazí části testu, kterými web prošel, žlutě jsou výsledky běžné a červeně jsou označeny problémy.
Pokud nevíte, co které hodnoty znamenají, můžete absolvovat můj webinář, kde se vše naučíte https://musilda.com/cs/zrychlete-si-wordpress/.
Pod výsledky je pak vidět známý filmový pás, který ukazuje, jak návštěvník vidí načítání Vašeho webu.
Pod filmový pásem Vám vykreslí audit návrhy na úpravy, které byste měli udělat, abyste co nejvíce zlepšili rychlost a uživatelský prožitek při používání webu. Některé věci je možné ovlivnit snadno – preconnect, odstranění nepoužívaných css nebo odstranění zdrojů blokující vykreslování. Pokud však nejste kodéři, s velikostí DOMu toho moc neuděláte. Jak jsem psal, k výsledkům chce přistupovat s chladnou hlavou.
Přístupnost
Přístupnost je oblast, na kterou se při vytváření stránek dost zapomíná. V případě, že se ucházíte o nějakou státní nebo obecní zakázku, s požadavkem na přístupnost se setkáte, ale u firemních webů spíše ne.
Audit vám ukáže, kde máte problematická místa, a i když vás nebude trápit, že uživatelé používající čtečky webů, nezjistí, co je tlačítko, protože tak není správně označeno, mohly by Vás zajímat takové základní věci, jako že je v kódu více elementů se stejným id. Což už může způsobit problém js scriptům.
Best practicess
Část označená jako „zavedené“, nebo „nejlepší“ postupy Vám ukáže, kde máte ve webu slabá místa obecnějšího rázu. Ve výsledku můžete vidět že:
- Jeden request je volán na url s http a je považován na insecure
- Cross-origin odkazy jsou považovány za nebezpečné – měli by jste k nim přidat noopener, nebo noreferrer atribut
- Chrome zjistil dvě zranitelnost, obě se týkají knihovny jQuery
- Zmíněné dva error v consoli se týkají již zmíněného souboru favicony, která je načítána z http url
To jsou vše věci, které Vám mohou uniknout, a některé z nich můžete (a jiné musíte) opravit. Úprava insecure request zabere několik málo minut pro přepsání http na https.
SEO
Většinou ze SEO auditu jsem prošel, dokument má meta viewport, značku title, meta description odkazy mají title, obrázky alty, stránka není blokovaná pro indexaci a má validní robots.txt soubor.
100% stránka nedostala, protože Google doporučuje, aby na mobilu byly aktivní prvky velké alespoň 48 x 48 pixelů, což některé ikony nesplňují. Ale s tím se dá smířit.
Progresivní webové aplikace
PWA nebo také progresivní webové aplikace jsou weby, které přebírají některé funkce mobilních aplikací. Například umí běžet offline. Když spustíte Lighthouse pro mobilní zařízení, můžete vidět, že se během testovaní dostane web do offline režimu.
Tady se přiznám, že PWA jsem moc neřešil, blog mám na WordPressu a vyřešil jsem to instalací pluginu https://cs.wordpress.org/plugins/super-progressive-web-apps/. Skóre v auditu se vylepšilo, ale nemyslím si, že by to mělo nějaký reálný užitek u webů, které nejsou masivně navštěvované.
Hodnoty použité pro testování
Až zcela dole najdete poslední část testu a to hodnoty, které byly nastavené pro samotný audit.
Pro test byl nastaven Nexus 5X a CPU byl 4x Zpomalen, aby bylo dosaženo prokazatelnějších výsledků.
Závěr
Rychlost webu je důležitá. Dá se říci, že důležitější než jeho vzhled. S tím, jak se zvyšuje rychlost připojení, jsou návštěvníci stále více zmlsaní, a jestliže chcete obstát v konkurenci, musíte se načítání Vašeho webu věnovat. V Chrome jsou tyto nástroje zcela zdarma, a tak není důvod, proč je nepoužívat.
