Užitečné nástroje na měření rychlosti a kvality webových stránek

Pracovník klientova eshopu se zeptal zákazníků, kteří nakoupili přes spolupracující eshop, proč si nakonec vybrali zboží právě od konkurence a nenakoupili přímo u klienta, když cena byla stejná. Odpověď byla překvapivá - ačkoliv se nám nezdálo, že by náš eshop byl nějak výrazně pomalý, zákazníci uvedli, že se jim stránky konkurence načetly rychleji. A to rozhodlo.

Uplynulý měsíc jsem proto strávila neustálým měřením a porovnáváním a testováním různých rozšíření pro redakční systém Joomla! a jeho komponentu Virtuemart, které slibovaly výrazné zrychlení načítání webových stránek. O výsledky testů se s Vámi podělím v příštím článku. Tentokrát bych Vám chtěla představit nástroje, díky kterým můžete změřit rychlost načítání vašeho webu nebo internetového obchodu, a některé z nich dokonce přidají i doporučení, jak web nebo eshop zoptimalizovat.

Ačkoliv své články většinou soustředím na rozšíření pro redakční systém Joomla!, tentokrát si přijdou na své i příznivci Drupalu a ostatních nástrojů pro tvorbu webů. Nástroje k měření rychlosti webu, o kterých budu psát jsou totiž určené uplně všem.

Pro srovnání přikládám screenshoty z testování úvodní stránky mého webu stawebnice.com různými nástroji, abyste si mohli udělat obrázek, jaké informace jednotlivé nástroje nabízejí.

Google Developers - Pagespeed Insights

Nástroj Pagespeed Insights patří k těm, které nejen změří rychlost načítání webu, ale zároveň odhalí i příčiny a rovnou formuluje doporučení, jak web optimalizovat. A to včetně nápovědy, jak toho dosáhnout. Pagespeed Insights přidělí každé stránce uvnitř webu své vlastní PageSpeed Score v maximální hodnotě 100. Nalezené problémy rozdělí podle stupňů priority do 3 kategorií: vysoká, střední a nízká. Plus přidá několik experimentálních tipů. Může vám tak např. doporučit, abyste využili načítání do mezipaměti prohlížeče, aktivovali kompresi, spojili obrázky do obrázků CSS sprite atd.

Přes odkaz Critical Path Explorer si můžete prohlédnout diagram, co konkrétně na Vašem webu zabírá nejvíce času při načítání.

Pokud nejste programátor, nemusí vám to nic říct, ale můžete se alespoň poohlédnout po rozšířeních, které tyto úpravy umí udělat za vás.

Co mě trochu znepokojilo je fakt, že pro stejnou stránku se může skóre výrazně lišit i během jednoho dne (aniž byste provedli jakékoliv změny). Také není zcela jasné, odkud je rychlost měřena. Pokud vás zajímá, jak rychle se Váš web načte uživatelům v ČR, pak mohou být data měřená z USA dost zavádějící. Proto doporučuji vyzkoušet nástrojů více a výsledky srovnat.

Pingdom

Online měřič rychlosti webu Pingdom má oproti PageSpeed Insights tu výhodu, že aspoň vidíte, odkud je rychlost měřena. Nabídka ovšem není široká, a tak pro české weby připadá v úvahu jen Amsterodam.

I Pingdom přiřadí webové stránce skóre v max. hodnotě 100, a zároveň přidá i informaci, zda je rychlejší nebo pomalejší než určité procento testovaných webů. A nejen to. Zjistíte i kolik requestů bylo odesláno, jaká je doba načítání v sekundách a jaká je velikost stránky v kB.

Níže na první záložce Waterfall je pak podrobný "vodopád", tedy graf, na kterém opět vidíte, jaký vliv mají na načítání stránky její jednotlivé součásti (javascripty, obrázky atd.).

Záložka Performance Grade pak nabízí hodnocení jednotlivých faktorů, které mají vliv na načítání webové stránky.

Záložka Page Analysis obsahuje podrobnější data, např. konkrétní množství dat, které připadá na obrázky, skripty, CSS a HTML, ale třeba i o kolik zpomalí Váš web přidání Google Analytics. Dále zobrazí počet případných chyb, ke kterým došlo při načítání stránky.

Na poslední záložce History naleznete nejen historii testů pro danou stránku, ale i vysvětlivky k jednotlivým ukazatelům i z předchozích záložek.

Webpagetest.org

Online nástroj Webpagetest.org má oproti předchozím dvěma nástrojům výhodu, že si můžete vybrat z mnohem širší palety míst, ale i prohlížečů. Umožňuje i celou řadu různých dalších pokročilých nastavení testu.

Navíc Vám během průběhu testů zobrazuje užitečné tipy, např. nástroje pro různé redakční systémy, které slouží ke zrychlení načítání webových stránek.

Samotný výsledek testu obsahuje nejen údaje pro první načtení stránek, ale i pro opakované prohlížení, může tak zohlednit cache atd.

I zde na záložce Summary najdete již známý vodopád a grafy znázorňující, jaký vliv mají na načítání webu jednotlivé součásti.

Jak již název záložky "Details" napovídá, najdete v ní podrobnosti k jednotlivým elementům na stránkách. A to zdaleka nejdetailnější ze všech nástrojů, které jsme si dnes představili.

Tabulka Performance Review vám napoví, např. které obrázky jsou příliš velké, které elementy představují největší problém, a které jsou naopak v pořádku.

Záložka Page Speed pak obsahuje nejen skóre jako předchozí nástroje, ale i konkrétní doporučení k vylepšení výkonu, např. zapnutí cachování atd.

Záložka Content Breakdown nabízí detailní analýzu jednotlivých součástí webu a jejich dopadu na rychlost načítání webu.

Záložka Domains obsahuje údaje pro jednotlivé domény, které mají vztah k webové stránce (např. Google Analytics nebo Getrank.org).

V záložce Screenshot zjistíte, jak dlouho trvá načítání screenshotu a jak se postupně načítají obrázky.

A co vy? Používáte nějaký osvědčený nástroj pro optimalizaci rychlosti načítání webu? Podělte se o své zkušenosti v diskusi pod článkem!