Ostatní

Analýza rychlosti načítání stránky a vodopádový graf

audi
Autor příspěvku Tomáš Cirkl

Na rychlost načítání stránky je kladen stále větší a větší důraz. V dnešním článku se detailněji podíváme na populární nástroj pro testování rychlosti načítání stránek Pingdom. Můžete jej použít k analýze webové stránky za pomocí vodopádového modelu. Ten pomůže lépe diagnostikovat problémovou část stránky, na kterou se pak můžete zaměřit.

Pingdom je společnost sídlící ve Švédsku, která nabízí monitorování dostupnosti a výkonu webových stránek. Ve světě se proslavila především pomocí zmiňovaného nástroje zdarma pro testování webových stránek, který je oblíbený nejen mezi WordPress komunitou, ale i ostatními vývojáři.

pingdom

pingdom

Pingdom umožňuje testovat webové stránky z pěti různých lokalit:

  • Dallas, Texas, USA
  • Melbourne, Australia
  • New York City, New York, USA
  • San Jose, California, USA
  • Stockholm, Sweden

Výběr nejbližší lokality je velmi důležitý, protože pokud si vyberete vzdálený server, mohou být získaná data zkreslená.

Provádění vodopádové analýzy s Pingdom

Webové stránky jsou vytvořeny pomocí různých prvků, mezi které patří například HTML, JavaScript, CSS, obrázky… Všechny tyto prvky jsou použity na základě požadavku. V zásadě by se dalo říci, že čím více požadavků stránka má, tím pomaleji se načítá. Dále si popíšeme, jak Pingdom zobrazuje nasbíraná data a jak analýzu využít k optimalizaci webové stránky.

Pingdom zprávu o testování stránky zobrazí v několika blocích:

  • Shrnutí
  • Statistika výkonu
  • Stavové kódy
  • Velikost obsahu a požadavky podle typu obsahu
  • Velikost obsahu a požadavky podle domény
  • Vodopádový graf

Shrnutí

První, co uvidíte po testování stránky, je celkové shrnutí. Najdete zde výslednou známku, celkový čas potřebný k načtení stránky, velikost stránky a počet požadavků na stránce.

V ukázce jsem použil doménu wplama.cz, která je hostováná v České republice u Českého hostingu. Testovací server jsem vybral Stockholm, Sweden.

Shrnutí

Shrnutí

Celková známka webu byla A se ziskem 96 bodů ze 100. Rychlost načítání stránky byla 549 ms a velikost 740,8 kB. Kdybych chtěl dosáhnout na 100 bodů, musel bych si ještě pohrát s použitým písmem a některými JS. Nicméně s výsledkem jsem poměrně spokojený.

Statistika výkonu

Sekce se statistikou výkonu je také velmi důležitá a je založena na Google PageSpeed Insight pravidlech. Obecně platí, že když odstraníte tyto problémy, zlepšíte rychlost načítání stránky.

Statistika výkonu

Statistika výkonu

Leverage Browser Caching

Velice častý problém, s kterým lidé zápasí. Je to způsobeno nesprávnou hlavičkou cache HTTP na serveru.

Remove Query Strings

Další častý problém. CSS a JS soubory mají obvykle na konci URL zobrazenou verzi, například https://domena.cz/soubor.min.css?ver=4.5.4. Některé servery a proxy servery je pak nejsou schopny cachovat. Jejich odstraněním si můžete pomoci. Vhodný na to je například plugin Query Strings Remover.

Serve static content from a cookieless domain

S využitím nových protokolů jako HTTP/2 to není zas až tak důležité. Nicméně lze vyřešit například používáním CDN nebo rekonfigurací WordPress stránky, kdy se statické prvky načítají z jiné domény nebo subdomény.

Stavové kódy

Další sekce, stavové kódy, odkazuje na HTTP stavové kódy, které vlastně znamenají krátkou zprávu o tom, jak probíhá načítání webové stránky.

Stavové kódy

Stavové kódy

Často zobrazované jsou:

  • 200 OK – Standardní odpověď pro úspěšný HTTP požadavek.
  • 301 Moved Permanently “Tento a všechny budoucí požadavky by měly být směrovány na dané URI” – zobrazuje se, když je některý prvek přesměrován na jinou URL adresu.
  • 404 Not Found “Požadovaný dokument nebyl nalezen, ale v budoucnosti může být dostupný” –  velice časté, zobrazuje se, když na stránce máte odkaz na prvek, který neexistuje.

Velikost obsahu a požadavky podle typu obsahu

Tabulka rozdělená na typ obsahu. Rychle zde zjistíte, co zabírá největší velikost na stránce. Podle HTTP Archive jsou obvykle největší obrázky, které tvoří až 64% z celkové velikosti stránky. Pokud by vás zajímalo co se skrývá pod Other, tak to je například písmo použité na stránce.

Velikost obsahu a požadavky podle typu obsahu

Velikost obsahu a požadavky podle typu obsahu

Jak upravit, zlepšit velikost obrázků na stránce jsme psali například v článcích Optimalizace obrázků ve WordPressOptimalizace obrázků pomocí WP Smush.it.

Velikost obsahu a požadavky podle domény

V tabulkách v této sekci najdete velikost obsahu a počet požadavků rozdělených podle domény. Zde rychle zjistíte, které externí servery a skripty na stránce máte. V mém příkladě je to například využívání Google Fonts, Google Analytics nebo napojení pluginu JetPack. Můžete zde ale také často vidět služby jako Facebook, Twitter, Hotjar, SumoMe, AdRoll, atd.

Obecně se dá říci, že čím méně toho načítáte z externích zdrojů, tím lépe. Je to především proto, že externí služby zvyšují prodlevu načítání stránky, kdy se k nim web musí připojit.

Velikost obsahu a požadavky podle domény

Velikost obsahu a požadavky podle domény

Vodopádový graf

Pingdom vytváří při testování webové stránky také vodopádový graf složený ze všech požadavků na webovou stránku. Můžete zde analyzovat jednotlivé požadavky a zjistit, co způsobuje prodlevu při načítání.

Vodopádový graf

Vodopádový graf

Detail načítání požadavku si zobrazíte při najetí myši na něj.

Detail načítání požadavku

Detail načítání požadavku

Pojďme se podívat, co jednotlivé barvy znamenají:

DNS (růžová)

DNS je jako telefonní seznam. Speciální servery obsahují informace o tom, na jakou IP adresu má být určitá doména směrovaná. V praxi je to tak, že když zadáte doménu do prohlížeče, tak se nejprve u Domain Name Serverů zjistí její IP adresa a až poté se k ní připojíte. Tento proces může trvat nějakou dobu.

Pokud se k dané doméně připojujete znovu, tak se již její IP adresa nezjišťuje, protože ji již znáte. Z toho důvodu bude opakovaný test rychlejší, protože server pro testování již tuto informaci zná.

SSL (fialová)

Fialová barva značí čas, který byl u prohlížeče potřebný pro ověření SSL/TLS. Když provozujete stránku přes HTTPS, tak SSL certifikát způsobuje časovou prodlevu. S tím se nedá nic dělat, určitě je stále lepší SSL certifikát používat.

Připojení (modrá)

Odkazuje na čas potřebný k TCP připojení nebo k celkovému času potřebnému pro vytvoření TCP připojení. Jedná se o komunikační metodu mezi klientem/hostem a serverem.

Čekání (žlutá)

Čas čekání zobrazuje čas potřební k získání prvního bytu. Někdy se lze také setkat se zkratkou z angličtiny TTFB. Obecně platí, že cokoliv pod 100ms je dobré.

Posílání (oranžová) a Přijímání (šedivá)

Tady asi není moc co vysvětlovat. Jedná se o čas potřebný k odeslání a příjímání dat ze serveru. Oba času by při testu měli být velmi malé nebo prakticky žádné.

HTTP Response Headers

Když kliknete na jednotlivý prvek ve vodopádovém grafu, tak se zobrazí detailní informace o načtení. Můžete tam snadno najít, zda je prvek poskytován z cache, jakou má expiraci, zda je gzip aktivovaný a spoustu dalšího.

Response headers

Response headers

Závěrem

Rychlost načítání stránek je velmi důležitá a neměli byste jí podcenit. Pokud jste se jí na vašem webu ještě nevěnovali, tak to určitě napravte. Dobrým startem může být návod Optimalizace rychlosti načítání webu na WordPress bez znalosti programování, který vám poskytne základ a výrazné vylepšení.

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

2 komentáře

  • Hezký den.
    Byl by možný detailní článek s návodem o “Serve static content from a cookieless domain” a jak správně nakonfigurovat WordPress stránky, aby se statické prvky načítali z jiné domény nebo subdomény?
    Předem děkuji za odpověď.

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 3 roky. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.