Nástroje pro analýzu rychlosti načtení stránky

Začněte s Google PageSpeed Insights, pokračujte na WebPageTest.org. Budou se vám také hodit vývojářské nástroje v Chrome nebo jiných prohlížečích.

Google PageSpeed Insights

Validátor základních technických problémů, které komplikují rychlost webu. Zde začněte. Otestujte si tady všechny důležité vstupní šablony.

Reklama: Vzhůru do lepší práce

PageSpeed Insights (PSI) se dá instalovat i jako rozšíření do prohlížečů nebo testování zautomatizovat pomocí API.

Dokud v PSI nedosáhnete skóre dejme tomu kolem 80 bodů na desktopu i mobilu, nemá smysl se učit se další nástroje.

developers.google.com/speed/pagespeed/insights

WebPagetest.org

Pro mě nástroj číslo jedna. Dělá pokročilou analýzu, testuje jinak než Page Speed Insights. Na druhou stranu – WebPagetest nelze používat průběžně, testy nějakou dobu trvají. WebPagetest také nevede za ruku jako PSI, je potřeba se s ním trochu zkamarádit.

Umožňuje testování z jiné lokality, testování pomalého připojení a v prohlížečích, ve kterých nemáte pokročilé vývojářské nástroje. Třeba v těch mobilních nebo ve starých Internet Explorerech.

Má také API, ve verzi zdarma je omezené na pár stovek dotazů týdně.

Co z výsledků WebPagetest mě zajímá?

WebPagetest.org stránka s výsledkem testu

1) Speed Index

Speed Index je průměrný čas zobrazení konkrétní stránky v daném prohlížeči, viewportu a rychlosti internetu. Čím menší Speed Index, tím lépe. Nejrychlejší weby dosahují čísel kolem tisícovky. Průměr je mezi pěti a desíti tisíci.

Speed Index je esence rychlosti načítání. Číslo, které můžete porovnávat s konkurenty nebo před a po optimalizaci. Takový „pagerank“ pro odborníky na zrychlování webu.

2) Vysvědčení

Hodnocení v parametrech, které připadají autorům WebPagetest důležité. First Byte, takže jak rychlý je backend, nastavení kešování na serveru, komprese obrázků a využití CDN.

3) Vodopád načítání

Jak se stahují komponenty stránky? Které z nich blokují parsování? Velmi užitečné a velmi detailní.

4) Filmový pás

Jak přesně vizuálně probíhalo načítání stránky? Velmi důležité. Dívám se jak dlouho trvalo, než se uživateli zobrazil obsah. Je to užitečnější než strojově vypočtený Start Render, který vidíte v tabulce.

Dívám se samozřejmě i na další čísla. WebpageTest má mnoho zákoutí k prozkoumání, tohle byl jen začátek.

webpagetest.org

Chrome DevTools

Pokročilá analýza a detailní testování procesů načítání v Chrome. Velmi podobný nástroj mají i ostatní moderní prohlížeče.

Chrome DevTools a analýza rychlosti

Vše podstatné je v záložce Network:

  1. Zapněte nahrávání
  2. Zapněte snímání filmový pásu s průběhem zobrazování webu
  3. Omezte rychlost připojení
  4. Modrá je událost DOMContentLoaded. Ta je spuštěná ve chvíli kdy bylo HTML načteno a rozparsováno. Červená událost Load se spustí jakmile prohlížeč stáhl úplně vše, včetně obrázků.

Mohou se vám hodit i další tipy pro DevTools.

Video: Chrome DevTools: analýza načítání stránky

Praktická demonstrace analýzy rychlosti načítání ve vývojářských nástrojích Chrome.

GTmetrix

Používám jen jako doplněk, ale někteří mu dávají přednost před PageSpeed Insights. Obsahuje totiž analýzu z tohoto nástroje a zároveň ještě YSlow metodiku v jednom reportu.

Umí toho hodně. Ukáže timeline, zvládne emulaci pomalého připojení. Testovací lokality má GTmetrix ale pro ČR horší než WebpageTest.org a s méně možnostmi nastavení. Hezké je monitorování a nastavení připomínek do mailu.

gtmetrix.com

Google Analytics

U statistik z Google Analytics se mi líbí jak jsou po ruce markeťákům. Mají ale velmi zajímavé využití i pro vývojáře, hlavně když se rozšíří o Trackomatic a Technical Performace Dashboard.

Mrkněte se do Chování > Rychlost > Přehled. Je potřeba měřit pomocí verze Universal Analytics. Analytics ukazují Časování stránek (Page Timings), ale napříč různými kontexty - prohlížeče, regiony.

V Časování uživatelů (User Timings) mohou být vaše vlastní měření - např. jak rychle se načetl konkrétní obrázek. Je to potřeba nastavit.

Standardně se prý pro měření rychlost používá jednoprocentní vzorek vašich shlédnutí stránky. Pokud to chcete jinak, je potřeba měřit s nastavením ‘siteSpeedSampleRate’: 50.

Video: Chrome DevTools: analýza načítání stránky

Praktická demonstrace analýzy rychlosti načítání ve vývojářských nástrojích Chrome.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategoriích Nástroje, Rychlost načítání, Netechnické.

Výsledky dotazníku: Jak se my, webaři a webařky, vzděláváme?

19. 2. 2017 na blogu

Nejvíce pomocí krátkých textů a videí. Fyzické knížky ani prezenční kurzy zatím jejich elektronické alternativy neporazily. Vzdělávání si účastníci většinou objednávají i platí sami.

PostCSS jako jednoduchá náhrada preprocesoru

16. 2. 2017 v příručce

Jak PostCSS využít jako jednoduchý a rychlý preprocesor, který vám na spoustu projektů výborně poslouží. A proč ne CSSnext?

Veřejná školení

Optimalizace rychlosti načítání

Optimalizace rychlosti načítání

Většina responzivních webů má problém. Umí se sice dobře přizpůsobit různě velkým obrazovkám, ale na mobilech se načítá pomalu. Příští termín: 23. března.

23. února Dnešní webová kodéřina
9. března Responzivní design
4. dubna SVG
20. dubna Bootstrap
11. května Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč

Školení
zrychlení webu

Naučte se nedělat
chyby a zrychlit weby.
na kurzu v Praze.