Test webové stránky: Zkrotit testovací monstrum a analyzovat výkon vašich webových stránek

Jan Hornung Naposledy aktualizováno na Prosinec 3, 2020
14 min.
Webpagetest
Naposledy aktualizováno na Prosinec 3, 2020

Webpagetest.org je pravděpodobně nejlepším a nejkomplexnějším bezplatným nástrojem pro měření doby načítání stránky. Bohužel poskytuje mnoho velmi složitých a velmi složitých dat. Dnes vám ukážu, co musíte nastavit, jak přinášíte pořádek do dat a jaké metriky potřebujete pro profesionální analýzu. Protože pouze pokud víte, jak načíst své zákaznické projekty a vlastní stránky, můžete je optimalizovat nahoře.

Určitě by vaše vlastní stránka měla být. A rychle. Samozřejmě, protože hodně závisí na době načítání: konverzní poměr, bezpečnostní pocit vašich návštěvníků a hodnocení Vaší nabídky Google. Mnoho WordPress - Uživatelé se nedostane do bodu, kdy mohou správně určit dobu načítání své vlastní stránky.

Někteří provozovatelé webů například ani nevědí, které nástroje mohou použít ke správné analýze stránky. Nebo nevědí, jaká nastavení musí provést, aby získali opravdu dobré výsledky. Abyste neudělali stejné chyby, ukážu vám dnes, jak získat rychlý a smysluplný přehled o vašem webu pomocí (podle našeho názoru) nejlepšího bezplatného měřicího nástroje. Takže přesně víte, jak rychle se vaše stránka načítá a zda a kde potřebujete optimalizovat.

Chcete-li přesně pochopit, jak každý krok analýzy funguje, doporučuji vám podívat se na datové sady propojené v důležitých bodech nebo analyzovat svou vlastní stránku paralelně. Koneckonců, není tak snadné dát objednávku do dat, která chcete. Jako odměnu za toto úsilí však z toho dostanete ta nejlepší data, která jste kdy na svých stránkách shromáždili. A to zejména v případě, že pracujete jménem svého zákazníka nebo pracujete se svým WP WordPress - Projekty vydělávají vaše peníze, úsilí vždy stojí za to.

Test webových stránek je nejlepší nástroj, který známe

Je pravda, že v tomto článku webpagetest.org chválíme. Možná příliš bujaré, ale ne příliš špatné. Vzhledem k tomu, že Webpagetest je jediný nástroj, který známe, který vám umožní spolehlivě určit absolutní a pociťovanou dobu načítání stránky. A pro nic za nic. Žádná platební bariéra, žádný model předplatného, jednoduše cenná data a ROZHRANÍ API,které vám umožní celou věc automatizovat: tak by to mělo být.

Pro úplnost budete mít také pěkné výsledky měření s Pingdomem a GTmetrixem. Ale ne tak krásná jako u testu webových stránek. To samozřejmě neznamená, že nemůžete a neměli byste zálohovat své výsledky několika testy v různých nástrojích. A to neznamená, že byste neměli měřit s Pingdomem nebo GTmetrixem. Ale mohu vám doporučit, abyste alespoň jednou sledovali test webových stránek.

Téměř se pro nás stala mantrou: Chcete-li měřit dobu načítání vašeho webu, nástroje, jako jsou Google PageSpeed Insights ne vypnuté. Protože určují pouze výkonnostní potenciál vašeho webu. Tato data jsou samozřejmě stále cenná – z hlediska výkonu a SEO – ale jednoduše vám neumožňují vyvodit závěry o tom, co se skutečně stane, když návštěvník zavolá na váš web.

Ale to je to, co chceš vědět. A to je přesně to, co potřebujete vědět, abyste zjistili, zda je optimalizační opatření účinné.

Test webových stránek bohužel poskytuje nejen přesně pěkně připravená data, ale také velmi rozsáhlé výsledky testů. Takže dnes vám ukážu, jak používat test webové stránky a jak interpretovat výsledky zásadně.

V další části stručně prodiskutujem několik pozadí nástroje. Pokud vás to nezajímá, přeskočte tu roli.

Test webových stránek: Velký bratr Společnosti Google PageSpeed Insights

Webpagetest byl původně projekt AOL a byl určen pouze pro interní použití. V roce 2008 se však program stal open source softwarem a nyní je udržován a vyvíjen hlavně společností Google. Veškerou dokumentaci k testování webových stránek najdete na GitHubu a lze ji také stáhnout a použít místně.

Během PageSpeed Insights ukazuje, kde leží potenciál optimalizace vaší stránky, test webové stránky může být mnohem více. Protože vám nejen ukáže, jak vylepšit stránku, ale také přímo, jak vaše optimalizační opatření ovlivňují dobu načítání vašeho webu.

Na rozdíl od Pingdom a GTmetrix neexistuje žádná společnost za Webpagetest, která by chtěla prodat placenou službu (ok, s výjimkou Googlu, ale alespoň se služba neprodává přímo). Spíše by se mohlo říci, že testování webových stránek je součástí plánu Společnosti Google na celkové zrychlit síť. V této souvislosti však chcete vyhodnotit ambice Společnosti Google.

Ve 4 krocích ke skutečně smysluplným datům doby načítání

Ano, test webové stránky je složitější než jiné nástroje. Ale nenechte se tím ýt! V tomto případě je složitost dobrá. Protože to znamená, že prostřednictvím svých webových stránek dostanete skvělá data. A také jako první uživatel získáte příslušné informace poměrně rychle.

A to s následujícími čtyřmi kroky:

Krok 1: Nastavení zkušebních parametrů

Krok 2: Získání přehledu

Krok 3: Podrobná analýza

Krok 4: Analýza doby zátěže plsti

Krok 1: Nastavení zkušebních parametrů

Webová stránkatest poskytuje velmi jemné nastavení pro testování vašeho webu. Čtyři z těchto nastavení jsou obzvláště důležitá pro získání dobrých výsledků měření:

  • Server k testování (1)
  • prohlížeč, se který chcete testovat (2)
  • pokročilé nastavení testu, do kterého půjdu podrobněji (3)
Domovská stránka webu Webpagetest
Takhle vypadá domovská stránka testu domovské stránky. Je proto poněkud složitější než Pingdom nebo GTmetrix.

Server, který zvolíte pro test, simuluje uživatele, který odtud volá stránku. Pokud vyberete výchozí server v USA, výsledek testu bude výstupem pro zobrazení stránky z Texasu. Ve většině případů to však nemusí být nutně to, co chcete. Proto je toto nastavení velmi důležité. Je to proto, že může masivně deformovat celkový výsledek a musí být odpovídajícím způsobem upraven v závislosti na aplikaci.

Dva nejčastější případy použití jsou:

  1. Určení doby načítání uživatele z cílové skupiny
  2. Porovnání doby nabíjení po optimalizaci

Pokud chcete vědět, jak vaši návštěvníci vnímají dobu načítání webu, musí umístění serveru co nejvíce odpovídat umístění typického uživatele. Pro blog s převážně německými čtenáři to znamená, že byste si měli vybrat server v Německu, například ve Frankfurtu.

Pokud chcete vědět, jaké optimalizační opatření potřebujete, pak v podstatě nezáleží na tom, které umístění serveru používáte. Jediná důležitá věc je, že pro test před a po optimalizaci musíte použít stejné umístění serveru. V opačném případě nelze správně porovnat naměřená data. Samozřejmě zde doporučuji také německý testovací server. To jednoduše poskytuje nejrealističtější výsledky.

Test webové stránky: Mapa pro výběr testovacího serveru na Webpagetest.org
Kromě výběru seznamu máte také možnost vybrat testovací server z mapy. Přehled všech testovacích serverů si můžete pro zobrazit také zde.

Použitý prohlížeč

Test webové stránky poskytuje mnoho nastavení pro simulaci konkrétních technik přenosu a prohlížečů. Můžete například definovat, že stránka by měla být načtena přes připojení 3G a Firefox. Pro začátek však stačí volba prohlížeče, který vaše cílové publikum nejčastěji používá.

Informace o tom můžete zobrazit například v Google Analytics nebo Piwiku. RAIDBOXES například je většinou navštěvovaný přes Chrome.

Výňatek z prohlížečů používaných návštěvníky raidboxes.de. Slouží jako šablona pro nastavení v testu webové stránky.
Nejužádanější prohlížeče na raidboxes.de. Takže pro analýzu v Webpagetestu bych hlavně otestoval Chrome. Zajímavé jsou samozřejmě i výsledky firefoxu a Safari.

Velmi důležité: Pokročilá nastavení určují, jak dobře se vaše naměřená data nakonec stanou!

Kromě dvou parametrů, které určují, jak testovat – umístění serveru a použitý prohlížeč – test webové stránky také poskytuje možnost nastavit, co má test na konci vysát. V upřesňujících nastaveních můžete například definovat, že výstupem by měly být pouze určité hodnoty nebo že měření by se mělo po určité době automaticky zastavit. A zde jsou dvě nastavení, která jsou obzvláště důležitá pro získání přiměřeně komplexních a spolehlivých dat: "Počet testů ke spuštění" a "Opakované zobrazení".

Při měření doby nabíjení byste v zásadě měli měřit více než jednou. V opačném případě riskujete měření odlehčů a možná hledáte problém, který neexistuje. A věřte mi, už jsme to párkrát viděli. Doporučuji alespoň tři po sobě jdoucí testy.

Kromě toho byste měli vždy pamatovat na měření carated verze vaší stránky. To lze udělat pomocí možnosti Opakovat zobrazení.

Upřesňující nastavení testu webové stránky
V pokročilém nastavení webpagetestu leží skutečná magie nástroje. Pouze pokud zde vyberete alespoň 3 testy a také zatážete opakované zobrazení, budou data, která dostanete, opravdu zajímavá.

Pokud jste zadali adresu URL , tj. https://raidboxes.de – a nastavili testovací parametry (tj. německý server, prohlížeč, alespoň 3 opakování a opakované zobrazení), můžete test spustit. V závislosti na tom, kolik dalších uživatelů testuje své stránky, může analýza trvat několik minut.

Důležité je, že Webpagetest testuje pouze stránku, ke které lze dosáhnout na adrese URL, nikoli celou vaši webovou prezentaci. To znamená, že byste měli otestovat svou domovskou stránku, všechny vstupní stránky a případně přehled produktu jednotlivě.

V této příručce pracuji s daty z analýzy naší domovské stránky, raidboxes.de. To znamená, že můžete znovu vytvořit vše, co je zde vysvětleno, jeden na jednoho webpagetest.org. Stačí kliknout sem a dostanete výsledky analýzy.

Krok 2: Získání přehledu

První věc, kterou vidíte, je přehled doby načítání stránky. To je rozděleno do tří oblastí:

  • parametry zkoušky a výsledky potenciálních analýz (1)
  • rozdělení nejdůležitějších charakteristických hodnot (2)
  • přehled struktury stránky (3)
Přehled výsledků testu webové stránky
Přehled počátečních výsledků webpagetest.org

(1) Čím zelenější, tím lepší

V prvním podokně jsou zkušební parametry znovu uvedeny pro kontrolu. Pokud zde stále najdete chybu, stačí test zopakovat. Můžete také vidět výsledek potenciální analýzy. Webová stránkatest vám také poskytuje výsledky Google PageSpeed Insights Z. Pokud se tedy vyrovnáváte se spartánským zastoupením webových stránek, můžete kliknout na PageSpeed Insights zřeknou se.

Webová stránkatest používá školní známku a barevný kód. A je nejlepší, F je nejhorší hodnocení. Zelená označuje dobrý stupeň optimalizace, oranžová označuje použitelný optimalizační potenciál a červená označuje naléhavou potřebu jednat.

(2) Čím rychleji, tím lépe

Ve druhé části výsledků se zobrazí všechna relevantní klíčová data doby načítání stránky pro ochutnanou a nedokončenou verzi stránky. Důležité je, že test webové stránky vysídlí pouze hodnoty pro jeden ze tří testů v přehledu. Který z nich je, přehled vedle zobrazení Lables First View a Repeat View vám ukáže. Spuštění 2 je tedy například výsledkem druhého zkušebního běhu.

Vysvětlení jednotlivých výsledků webového serveru
Tento přehled je bohužel k dispozici pouze pro individuální výsledky měření, tj. jednotlivé zkušební jízdy. Pro opravdu cenné hodnoty musíte jít o jednu úroveň hlouběji. Vysvětlím ti, jak se to udělá.

Obzvláště důležité je zde pět hodnot:

  • Doba načítání: Čas, který trvá, než váš web pocítí, že je stránka plně načtena. Doba načítání odpovídá plstěné celkové době načítání stránky.
  • První bajt: Čas odeslat první bajt dat mezi klientem a webovým serverem. Tato hodnota by měla být menší než 200 milisekund, pokud je to možné, a je důležitým ukazatelem výkonu vašeho hostingu.
  • Spustit vykreslování: Tato hodnota popisuje čas, kdy se stránka načte, dokud se návštěvníkovi poprvé nezobrazí obsah. Do tohoto okamžiku zůstane stránka pro uživatele zcela bílá. Tato hodnota by samozřejmě měla být také co nejnižší. Spolu s časem načítání (nebo dokončeným dokumentem) je tato hodnota měřítkem hodnocení pro vnímanou rychlost webu. Úvodní vykreslení označuje začátek viditelného načítání stránky, Dokument dokončete konec.
  • Dokument dokončen: Tato hodnota je stejná jako doba načítání.
  • Plně naloženo: Tato hodnota označuje, kdy je stránka plná, načtená se všemi skripty a prvky. Popisuje celkovou dobu technického zatížení stránky. To je pro návštěvníka obvykle irelevantní. Rozhodující je doba nabíjení plsti.

Pro všechny tyto hodnoty, čím menší, tím lepší. Jako vodítko si můžete pamatovat:

  • doba do prvního bajtu by měla být kratší než 200 milisekund
  • Počáteční vykreslování by nemělo být delší než 2,5 sekundy
  • Dokončení dokumentu by nemělo být delší než pět sekund.

Tyto hodnoty jsou samozřejmě jen základními pravidly. Vždy záleží na vaší stránce: Stránka obchodu s 50 produkty – tj. 50 nebo více obrázků a popisných textů – se načítá pomaleji než stránka s otiskem, která se skládá pouze z textu.

Proto mohu jen poradit: Otestujte strany přímé konkurence a vaše vzory. Tímto způsobem můžete získat interní měřítka v oboru.

Průměrování - Nyní je čas dostat se na správné místo

Bohužel výše uvedený přehled zobrazuje pouze výsledky jednoho měřicího průchodu. A pamatujte si: individuální, izolované hodnoty vás mohou uvést v omyl. To je důvod, proč jste pro testování svého webu udělali alespoň tři po sobě jdoucí měření. A průměry těchto tří měření jsou nejlepší aproximace, které můžete získat za dobu načítání stránky.

A nebojte se: Vytvoření průměrů vyžaduje pouze stisknutí tlačítka:

Vykreslování výsledků testu webové stránky
Kliknutím na možnost vykreslení vytvoří webová stránka průměrné hodnoty výsledků měření.

Nyní dostanete zpočátku matoucí množství dat z takzvaných grafů. A to jsou přesně výsledky, které chcete. Tento nový přehled je v zásadě stejný pro všechny hodnoty. Takže jakmile pochopíte, jak je číst, jsou všechno, jen ne matoucí.

Zobrazení vykreslování přitažení webové stránky
Tyto grafy skvěle ilustrují, proč byste měli vždy provádět více měření: Bod měření 3 je téměř o sekundu horší než bod měření 1. Tvorba prostředků je proto nezbytná pro profesionální analýzu výkonnosti.

Jak můžete vidět, všechny tři údaje (1-3) jsou nakresleny zde v diagramu (pozoruhodný je zde rozdíl mezi měřicím bodem 1 a měřicím bodem 3!). Nad grafem je hodnota, na kterou graf odkazuje (4). V tomto případě doba načítání plsti (Doba dokončení dokumentu nebo Doba načítání). Číslo ve sloupci Průměr nyní popisuje průměrnou hodnotu doby načítání ve všech třech měřeních (5). Tento průměr je nejcennější informace, které můžete ze své stránky získat.

Mimochodem: Pomocí antickenu Box Repeat můžete mít také hodnoty pro dobu načítání s výstupem ukládání do mezipaměti a bez něj. A pokud chcete najít výsledky pro další hodnoty: stačí vyhledat "First Byte" a "Start Render" prostřednictvím vyhledávání v prohlížeči (CTRL +F pro počítače PC a cmd +f pro Macy).

Prozatímní závěr: Spousta práce pro obzvláště cenné údaje

Ok, to bylo hodně vstupů. A bylo mnoho kroků k práci. Zvláště ve srovnání s jednoduchými testovacími metodami. Ale úsilí stojí za to, protože jste to viděli z čísel diagramů: Dva testy se stejným nastavením mohou být někdy od sebe celé sekundy. Náhoda se tak může rozhodnout, zda investujete čas a peníze do další optimalizace svých stránek. A právě když jsi WordPress Vydělávejte své peníze, ať už s vlastním obchodem, webovou kanceláří nebo agenturou, měli byste mít nejlepší datový základ pro takové rozhodnutí.

Ve skutečnosti ještě nejsme na konci. Protože nyní znáte nejdůležitější metriky výkonu vašeho webu, takže víte, jak rychle se vaše stránka načítá a zda stále existuje potenciál optimalizace, ale ještě nevíte, kde přesně lze stránku vylepšit. A to je přesně to, k čemu je podrobná analýza navržena.

Krok 3: Podrobná analýza

Přehled vám již hodně řekne o vaší stránce. Můžete zjistit, zda je v určitých oblastech stále prostor pro zlepšení, jak rychle se vaše stránka skutečně načte a zda se nemohla načíst o něco rychleji. Příčiny problémů však ještě neznáte. V podrobných zprávách však najdete tyto:

  • vodopádové diagramy
  • potenciální analýza

Vodopádové diagramy uvádí každý požadavek http, který prohlížeč umístí na webový server. Na první pohled se tyto diagramy zdají být velmi složité a matoucí. Ale pokud víte jak, můžete nakreslit spoustu detailů přes stránku z vodopádového grafu jedním pohledem. Zde vám ukážeme, jak správně číst vodopádové grafy a jak je použít k další optimalizaci stránky.

V podstatě má rychlá stránka krátký vodopádový diagram s několika krátkými požadavky. To znamená, že délka grafu a délka pruhů v každém řádku jsou obzvláště důležité.

V přehledu výkonu najdete podrobné informace o tom, jak dobře je výkon vašeho webu již optimalizován. Tato podrobná recenze zase obsahuje tři prvky:

  • kontrolní seznam optimalizace
  • Podrobný rozpis zkoušky výkonnosti
  • glosář

Měli byste se nejprve podívat na glosář, když analyzujete stránku webpagetest.org a poprvé. Zde jsou vysvětleny všechny důležité podmínky kontroly výkonnosti.

Výňatek z glosáře webových stránek.
Bohužel v angličtině, ale test webových stránek ve skutečnosti podrobně vysvětluje každý technický termín.

V kontrolním seznamu optimalizace najdete jednotlivá hodnotící kritéria, která jsou použita pro každý z požadavků HTTP. Zelené zaškrtnutí znamená, že požadavek je splněn, žluté trojúhelníkové značky je třeba zlepšit, červený kříž označuje absenci navrhovaného optimalizačního opatření.

Výňatek ze seznamu kontroly výkonu webpagetestu.
Pomocí kontrolního seznamu optimalizace můžete například vidět, které obrázky stránky mají stále potenciál optimalizace, které požadavky by měly být dále komprimovány a zda ukládání do mezipaměti funguje správně.

Nakonec najdete popis upozornění a chybějících optimalizačních opatření v sekci podrobností. Test webové stránky popisuje optimalizace, které jsou stále možné pro každý prostředek. Obrázky například ukazují, kolik objemu dat lze uložit.

S těmito podrobnými hodnoceními se musíte vypořádat s nějakou dobu, ale s jejich pomocí můžete získat podrobný obrázek o vaší stránce a jejím optimalizačním potenciálu.

A protože je to v podstatě ta samá informace, která PageSpeed Insights vyplivnout, samozřejmě můžete také jednoduše spustit analýzu PageSpeed paralelně. Protože tento test je mnohem hezčí a lépe připravený.

Krok 4: Analýza doby zátěže plsti

Na rozdíl od všech ostatních testů, které známe, je Webpagetest jediný, který zobrazuje dobu načítání vašeho webu zdarma. Video o struktuře stránky můžete sledovat prostřednictvím Filmstripview. Tímto způsobem můžete přesně vidět, co vaši návštěvníci vidí, a ještě lépe vyhodnotit, zda a jak by měla být vaše stránka optimalizována.

Najít webovou stránkutest Filmstripview
Pohled na film najdete v přehledu výsledků měření z krajní pravice. Upozornění: Tato možnost není vždy zobrazena. Proč mi to není úplně jasné? Opakování testu však vždy zpřístupnilo tuto možnost.

Doba načítání plsti je pravděpodobně nejdůležitější charakteristikou doby načítání stránky. Ovlivňuje, zda návštěvníci opustí web dříve, pravděpodobnost konverze a celkové zkušenosti s vaším webem. Zejména pro obchody je proto vnímaná rychlost webových stránek důležitým vodítkem. Doba nabíjení plsti by samozřejmě měla být vždy co nejnižší.

Kromě filmového stripview byste si měli pamatovat následující:

Schematická reprezentace doby načítání stránky
Celková doba načítání by měla být co nejnižší. Zároveň je důležité, aby vzdálenost mezi T0 a počátečním vykreslováním byla co největší. Protože pak uživatel získá velmi brzy dojem, že stránka je plně načtena, i když je od toho daleko.

Zobrazení Filstrip view zobrazuje desetiny sekundy přesně podle toho, jak vaše stránka vypadá a které procesy se provádějí v příslušném čase. Pokud se podíváte na test s tímto datem,uvidíte, že se na stránce neděje nic déle než tři sekundy. Ale pak strana vypadá téměř stejně v jednom okamžiku jako v konečném stavu. Uživatel získá dojem, že stránka je plně načtena do 3,5 sekundy. V souvislosti s tím má návštěvník již po 3,5 sekundách pocit, že může s webem komunikovat.

Zejména při upřednostňování viditelného obsahu stránky je zobrazení Filmového pásu velmi cenným nástrojem.

Závěr: S těmito základy a trochou praxe dostanete velmi dobrý přehled o svém webu

Ok, po přečtení článku byste nyní měli mít možnost zvolit správné nastavení pro test webové stránky, vědět, jaké metriky je třeba interpretovat a jak zabránit nesprávným interpretacím kvůli odlehlosti. Víte také, kde najít podrobné informace o stránce a jak určit dobu načítání stránky a jak ji můžete zobrazit.

To vám dává důležité základy pro získání skutečně komplexního přehledu o vlastní stránce, stránkách vašich zákazníků a jakémkoli jiném webovém projektu. A víte, kde získat informace, které vám umožní přivést výsledky měření k životu a vyvodit smysluplné závěry pro vaše stránky.

Ale proč to bylo zase důležité? Jednoduše řečeno: Bez rozumného měření skutečného stavu stránky nemůžete správně hodnotit, jak se vaše stránka právě načítá. Na druhou stranu vám chybí informace pro optimalizaci doby načítání.

Máte tip pro použití webpagetestu? Perfektní, pak napište komentář k tomuto příspěvku!

Jeden z prvních členů u RAIDBOXES a vedoucí podpory. Na Bar a WordCamps, preferuje mluvit o PageSpeed a výkonnosti webových stránek. Nejlepší způsob, jak ho podplatit, je espresso – nebo bavorský preclík.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.