Test webových stránek: Zkrotit testovací monstrum & analyzovat vaše webové stránky

Jan Hornung Naposledy aktualizováno Jan 23, 2020
14 min.
Webpagetest
Naposledy aktualizováno Jan 23, 2020

Test webové stránky je pravděpodobně nejlepší a nejkomplexnější bezplatný nástroj 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řinesete 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.

Jistě vaše vlastní stránka by 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í Google vaší nabídky. Mnoho WordPress -Uživatelé se nedostanou 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í potřebují, aby získali opravdu dobré výsledky. Takže neděláte stejné chyby, ukážu vám dnes, jak získat rychlý a smysluplný přehled o vašich stránkách s (podle našeho názoru) nejlepší bezplatný nástroj pro měření. Takže přesně víte, jak rychle se vaše stránka načte a zda a kde je třeba 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 vlastní stránku paralelně. Koneckonců, to není tak snadné, aby pořadí v datech, které chcete. Nicméně, jako odměnu za úsilí, dostanete nejlepší údaje, které jste kdy shromáždili prostřednictvím svých stránek. 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í své peníze, úsilí je vždy stojí za to.

Webová stránka test je nejlepší nástroj, který známe

Je pravda, že chválíme webpagetest.org bujný v tomto článku. Možná až příliš bujný, ale ne příliš špatný. Vzhledem k tomu, Webpagetest je jediný nástroj, který víme, že vám umožní spolehlivě určit absolutní a cítil dobu načítání vaší 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í automatizovat celou věc: tak by to mělo být.

Pro úplnost můžete také Pingdom a GTmetrix krásné výsledky měření. Ale ne tak krásná jako u webových stránek test. Samozřejmě to neznamená, že nemůžete a neměli byste zálohovat výsledky pomocí několika testů v různých nástrojích. A to neznamená, že byste neměli měřit s Pingdom nebo GTmetrix. Ale mohu vám doporučit sledovat webové stránky test alespoň jednou.

To se téměř stalo mantra pro nás: Chcete-li měřit dobu načítání vašich stránek, nástroje, jako jsou Google PageSpeed Insights není vypnuto. Protože určují pouze výkonový potenciál vašeho webu. Samozřejmě, že tato data jsou stále cenné - z hlediska výkonu a SEO - ale prostě neumožňuje vyvodit závěry o tom, co se skutečně stane, když návštěvník zavolá vaše stránky.

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é.

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

V další části, budu stručně diskutovat o několik pozadí na nástroj. Jestli tě to nezajímá, Přeskočit část je snadná.

Test webových stránek: Google je velký bratr 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 spravuje a dále rozvíjí společnost Google. Veškerou dokumentaci Webpagetest naleznete na Github a může také Stažené a používány místně.

Během PageSpeed Insights který ukazuje, kde optimalizační potenciál y vaší stránky leží, může být test webových stránek mnohem více. Protože to nejen ukazuje, jak zlepšit vaši 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ý chce prodat placenou službu (ok, s výjimkou Google, ale alespoň služba není prodávápřímo). Spíše by se dalo říci, že testování webových stránek je součástí plánu společnosti Google, aby se síť celkově urychlila. V této souvislosti však chcete vyhodnocovat ambice společnosti Google.

Ve 4 krocích ke skutečně smysluplnému načítání dat o době načítání

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

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

Krok 1: Nastavení testovacích parametrů

Krok 2: Získejte přehled

Krok 3: Podrobná analýza

Krok 4: Analýza plstěné doby nabíjení

Krok 1: Nastavení testovacích parametrů

Webpagetest poskytuje velmi jemné nastavení pro testování vašich webových stránek. Č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í s (1)
  • prohlížeč k testování s (2)
  • pokročilé nastavení testu, které půjdu do podrobněji (3)
Domovská stránka Webpagetest
Takto vypadá domovská stránka. Je tedy 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ýstup pro zobrazení stránky z Texasu. Ve většině případů však to není nutně to, co chcete. Proto je toto nastavení velmi důležité. Je to proto, že může masivně narušit celkový výsledek a musí být odpovídajícím způsobem upravenv závislosti na aplikaci.

Dva nejběžnější případy použití jsou:

  1. Určení doby načítání uživatele z vaší cílové skupiny
  2. Porovnání doby nabíjení po optimalizačním opatření

Pokud chcete vědět, jak vaši návštěvníci vnímají dobu načítání webu, pak umístění serveru musí 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 měli zvolit server v Německu, například ve Frankfurtu.

Pokud chcete vědět, co optimalizační opatření potřebuje, pak v podstatě nezáleží na tom, které umístění serveru používáte. Jediná důležitá věc je, že musíte použít stejné umístění serveru pro test před a po optimalizaci. V opačném případě nelze správně porovnat naměřená data. Samozřejmě, doporučuji německý testovací server i zde. 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. Můžete také vidět přehled všech testovacích serverů zde.

Použitý prohlížeč

Test webové stránky poskytuje mnoho nastavení pro simulaci specifických technik přenosu a prohlížečů. Můžete například definovat, že stránka by měla být načtena přes 3G připojení a Firefox. Pro začátek je však dostačování volby prohlížeče, který váš cílový okruh uživatelů používá nejčastěji.

Informace o tom můžete zobrazit například ve službě Google Analytics nebo Piwik. RAIDBOXES například je většinou navštěvován přes Chrome.

Výňatek z prohlížečů používaných návštěvníky k raidboxes.de. Slouží jako šablona pro nastavení v testu webových stránek.
Nejpoužívanější prohlížeče na raidboxes.de. Takže pro analýzu v Webpagetest, já bych hlavně test Chrome. Výsledky pro Firefox a Safari, na druhé straně, jsou samozřejmě také zajímavé.

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 by měl test výstup na konci. Například v upřesňujících nastaveních můžete definovat, že výstupem by měly být pouze určité hodnoty nebo že by se měření mělo automaticky zastavit po určité době. A tady 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í".

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

Kromě toho byste měli vždy pamatovat na měření karátové verze vaší stránky. Můžete to provést pomocí možnosti Opakovat zobrazení.

Test webových stránek upřesňující nastavení
V pokročilém nastavení Webpagetest leží skutečné kouzlo nástroje. Pouze pokud zde vyberete alespoň 3 testy a také zahrnuje opakované zobrazení, data, která získáte, budou opravdu zajímavá.

Máte adresu URL - např. https://raidboxes.de – zadali a nastavili parametry testu (tj. německý server, prohlížeč, alespoň 3 opakování a opakované zobrazení), můžete spustit test. 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, která je přístupná na adrese URL, nikoli na celou přítomnost webu. To znamená, že byste měli otestovat svou domovskou stránku, všechny vstupní stránky a případně přehled produktů jednotlivě.

V této příručce pracuji s údaji 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 k jednomu v webpagetest.org. Stačí kliknout zde a výsledky analýzy obdržíte ke konci prosince 2016.

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

První věc, kterou vidíte, je přehled času 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)
Výsledky přehledu testu webové stránky
Přehled prvotních výsledků webpagetest.org

(1) Čím více zeleně, tím lépe

V prvním podokně jsou parametry testu uvedeny znovu pro kontrolu. Pokud zde stále najdete chybu, opakujte test. Můžete také zobrazit výsledek potenciální analýzy. Webpagetest také vám výsledky Google PageSpeed Insights Z. Takže pokud se vyrovnáváte se sparťanskou reprezentací Webpagetest, můžete kliknout na PageSpeed Insights zříci.

Webpagetest používá školní třídy a barevný kód. A je nejlepší, F je nejhorší hodnocení. Zelená označuje dobrý stupeň optimalizace, oranžová označuje využitelný optimalizační potenciál a červená označuje naléhavou potřebu akce.

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

Ve druhé části výsledků získáte všechny relevantní klíčové údaje o době načítání stránky prezentované pro ochutnávanou a nedokončenou verzi vaší stránky. Důležité je, že test webové stránky pouze výstupy hodnoty pro jeden ze tří testů v přehledu. Který z nich je, přehled vedle Lables první zobrazení a opakovat zobrazení vám ukáže. Spustit 2 je například výsledek pro druhý test spustit.

Vysvětlení jednotlivých výsledků webpagetestu
Tento přehled je bohužel k dispozici pouze pro jednotlivé výsledky měření, tj. Pro opravdu cenné hodnoty, musíte jít o úroveň hlouběji. Vysvětlím ti, jak se to dělá.

Zde je obzvláště důležité pět hodnot:

  • Doba načítání: Čas potřebný k tomu, aby vaše stránky cítily, že stránka je plně načtena. Doba načítání odpovídá celkové době načítání stránky.
  • První bajt: Čas odeslání prvního datového bajtu 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 vykreslení: 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 co nejnižší. Spolu s dobou načítání (nebo dokument complete) je tato hodnota měřítkem pro vnímanou rychlost webu. Start Render označuje začátek viditelného načítání stránky, Dokument Dokončit konec.
  • Dokument dokončen: Tato hodnota je stejná jako doba načítání.
  • Plně načteno: Tato hodnota označuje, kdy je stránka plná, načtena se všemi skripty a prvky. Popisuje celkovou dobu technického načítání stránky. To je obvykle irelevantní pro návštěvníka. Nejrozhodnější je plstění.

Pro všechny tyto hodnoty, čím menší, tím lépe. Jako vodítko si můžete zapamatovat:

  • doba do prvního bajtu by měla být kratší než 200 milisekund
  • Počáteční vykreslení by nemělo být větší než 2,5 sekundy
  • Dokument dokončen by neměl být větší než pět sekund.

Samozřejmě, že tyto hodnoty jsou jen pravidla palce. Vždy záleží na vaší stránce: Stránka obchodu s 50 produkty – tj. 50 nebo více obrázky a popisnými texty – se načítá pomaleji než stránka s potiskem, která se skládá pouze z textu.

Proto mohu jen poradit: Otestujte strany přímé soutěže a vaše vzory. To je, jak se dostanete průmysl-interní měřítka.

Tvorba průměrů - Nyní je čas dostat se na správné místo

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

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

Vykreslení výsledků webových stránek
Kliknutím na možnost vykreslení vytvoří webpagetest průměrné hodnoty výsledků měření.

Nyní získáte zpočátku matoucí množství dat z takzvaných pozemků. A to jsou přesně ty 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, ale matoucí.

Zobrazení vykreslení Test webových stránek
Tyto obrázky 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ž měřicí bod 1. Vytvoření prostředků je proto nezbytné pro profesionální analýzu výkonnosti.

Jak můžete vidět, všechny tři hodnoty (1-3) jsou zde nakresleny v diagramu (pozoruhodný je zde rozdíl mezi měřicím bodem 1 a měřicím bodem 3!). Nad zkusnou parcelou je hodnota, na kterou graf odkazuje (4). V tomto případě je plstěná doba zatížení (Dokument dokončennebo Doba načítání). Číslo ve sloupci Střední 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 získat ze stránky.

Mimochodem: Pomocí anticken opakování pole, můžete také mít hodnoty pro dobu načítání s a bez ukládání do mezipaměti výstupu. A pokud chcete najít výsledky pro ostatní hodnoty: stačí vyhledat "První byte" a "Start Render" prostřednictvím vyhledávání v prohlížeči (CTRL + F pro PC a cmd + f pro Mac).

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

Ok, to bylo hodně vstupů. A tam bylo mnoho kroků k práci. Zvláště ve srovnání s jednoduchými zkušební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 vzdáleny celou sekundu. Takže náhoda může rozhodnout, zda budete investovat čas a peníze do další optimalizace vašich stránek. A právě když jste WordPress Vydělávat své peníze, ať už s vlastním obchodem, web design kancelář nebo agentura, 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čte a zda stále existuje optimalizační potenciál, ale ještě nevíte, kde přesně lze stránku zlepšit. A to je přesně to, co podrobná analýza je určena pro.

Krok 3: Podrobná analýza

Přehled vám již hodně o vaší stránce. Můžete zjistit, zda je stále prostor pro zlepšení v určitých oblastech, 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. Najdete je však v podrobných zprávách:

Vodopádové diagramy uvádějí každý požadavek http, který umístí prohlížeč 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ádu grafu s jedním pohledem. Zde vám ukážeme, jak správně číst vodopádové grafy a jak je používat k další optimalizaci stránky.

V podstatě, rychlá stránka má krátký vodopád 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 nástroji Performance Review naleznete podrobné informace o tom, jak dobře je výkon vašeho webu již optimalizován. Tento podrobný přehled zase obsahuje tři prvky:

  • Kontrolní seznam optimalizace
  • Podrobný rozpis zkoušky užitosti
  • glosář

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

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

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

Výňatek z kontrolního seznamu výkonu WebpageTest.
Pomocí kontrolního seznamu optimalizace můžete například přesně vidět, které obrázky vaší stránky mají stále optimalizační potenciál, 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 varování a chybějících optimalizačních opatření v sekci podrobnosti. 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ějakým časem, 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ě stejné informace, které PageSpeed Insights vyplivnout, samozřejmě můžete také jednoduše spustit pagespeed analýzu paralelně. Protože tento test je mnohem hezčí a lépe připravený.

Krok 4: Analýza doby plstěného zatížení

Na rozdíl od všech ostatních testů, které známe, webpagetest je jediný, který zobrazuje plstěnou dobu načítání vašich stránek zdarma. Můžete sledovat video ze struktury stránky přes Filmstripview. Tímto způsobem můžete vidět přesně to, co vaši návštěvníci vidí a mohou vyhodnotit ještě lépe, zda a jak by měla být vaše stránka optimalizována.

Najít Webpagetest Filmstripview
Filmový stripview najdete v přehledu výsledků měření zcela vpravo. 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í plstěného je pravděpodobně nejdůležitější charakteristikou doby načítání stránky. Ovlivňuje to, zda návštěvníci opustí web předčasně, pravděpodobnost konverze a celkový zážitek z vašeho webu. Zejména pro obchody je proto vnímaná rychlost webových stránek důležitým vodítkem. Samozřejmě, plstěná doba nabíjení by 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á celková doba zatížení, která se cítila, by měla být co nejnižší. Současně je důležité, aby vzdálenost mezi T0 a Start Render je co nejmenší. Vzhledem k tomu, pak uživatel dostane dojem velmi brzy na to, že stránka je plně naloženo, i když je daleko od něj.

Zobrazení Filstrip vám ukáže desetiny sekundy přesně to, co vaše stránka vypadá a které procesy jsou prováděny v příslušném čase. Pokud se budete test s těmito údaji, pak si uvědomíte, že se na stránce nic neděje déle než tři sekundy. Ale pak strana vypadá téměř stejně v jednom úderu jako v konečném stavu. Uživatel získá dojem, že stránka je plně načtena během 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.

Zvláště při stanovení priority viditelného obsahu stránky je zobrazení Filmstrip velmi cenným nástrojem.

Závěr: S těmito základy a trochou praxe získáte velmi dobrý přehled o vašich stránkách

Ok, po přečtení článku, měli byste nyní být schopni zvolit správné nastavení pro test webové stránky, vědět, jaké metriky je třeba interpretovat a jak zabránit nesprávné interpretace kvůli odlehlé hodnoty. Také víte, kde najít podrobné informace o vaší stránce a jak určit pocit načítání času vaší stránky a jak ji můžete zobrazit.

To vám dává důležité základy, abyste získali skutečně komplexní přehled o vaší 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 přiměřené měření skutečného stavu Na stránce nelze hodnotit, jak se stránka právě načítá. A na druhou stranu vám chybí informace pro Optimalizace doby nabíjení.

Máte tip pro použití Webpagetest? Perfektní, pak napsat 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 * .