Rychlost webu – díl I.

Vysvětlovat, proč je rychlost webu důležitá, by podle mě bylo pouhým marněním času. Tak jen ve zkratce, je důležitá pro lidi a pro vyhledávače. Jednoduchým selským rozumem a vlastní zkušeností lze vypozorovat, že stránky, která se načítají bleskově, nebo alespoň dostatečně rychle, se nám lépe a radostněji prochází, neb se nebojíme, že na další načtení stránky budeme muset čekat půl minuty. Vyhledávačům se pak dobře indexuje, protože za stejný čas projde více stránek než na pomalejších webech.

V několikadílném seriálu (ikdyž, znáte mě… nebo alespoň já se znám) se pokusím vysvětlit a praktikovat několik metod, které, ať už víc nebo míň, k rychlejšímu webu dopomůžou. Jenže! Jak získat nějaké ty údaje?

Doplňky pro prohlížeč Firefox

Page Speed od společnosti Google a YSlow od Yahoo jsou základními měřícími doplňky, bez kterých se nikdy nikam nevydávejte. Pokud si chcete zachovat i přehlednou historii o zvyšování rychlosti vašeho webu, doporučím web ShowSlow.com, nově lze přidat URL do seznamu a ty se budou pravidelně testovat (právě pomocí Page Speed a YSlow). Lze i krásně porovnávat a nebo se nechat vypsat detailní informace.

Pro Google Chrome můžete zkusit relativně nový doplněk – Speed Tracer – ale konkrétní zkušenosti zatím nemám.

Měření v Google Webmaster Tools

Pokud už váš web má nějakou historii ve Webmaster Tools a alespoň nějakou návštěvnost, je možné, že vám Google ukáže podobný rychlostní graf i s informací o průměrné době načítání a přesnosti. Dokáže i porovnat s ostatními weby, takže vám může říct: „Načítání je rychlejší než u 73% ostatních webů.“

Page Speed (Google)

Tento nástroj se od svého bratra dost liší v metodice měření, ikdyž bodová stupnice je stejná, 0 až 100, přičemž 100 je ideální výsledek a dosáhnout ho nemusí být taková sranda, jak se na první pohled může zdát (pokud nemluvíme o jednodstránkovém textovém webu).

Přikládám první příklad, zapracovali jsme na optimalizaci homepage fotobanky Pixmac. Posledním doporučením je „Use efficient CSS selectors“ (používejte efektivní CSS selektory). A rovnou přiloží i příklady. Třeba „#categoriespage .categorypage_box ul li a“ není dobrý selektor.

Takovýchto bodů a doporučení je tu přes 20 a postupně je všechny projdu a popíšu, jak je vyřešit.

YSlow (Yahoo)

Měřící nástroj od Yahoo je daleko přísnější ;) Tam kde Google Page Speed dává 96/100, tam YSlow jen 81/100, takže prostor pro vylepšení tu stále je. A co, že YSlow na webu Pixmac.com nejvíc trápí? Počet HTTP requestů (21 obrázků v CSS) a Expire Headers u statických souborů.

YSlow dává jednotlivým bodů i přesnější hodnocení, jako ve škole. A až F, takže přesně víte, kde je prostor pro zlepšení. A nezapomeňte, 80% výkonu ušetříte uděláním 20% optimalizací (Paretův princip). Takže příště už o jednotlivých bodech (i prakticky), těch nejdůležitejších. Pro pokročilé pak třeba Data URIs nebo Link prefetching z HTML 5. Takže, změřte si stránky ;)