Jak zkontrolovat rychlost webu

Rychlá cesta: spusťte test ve skutečném prohlížeči

Zadejte URL do testu rychlosti stránky a nechte ho načíst stránku ve skutečném prohlížeči, místo aby cokoli jen odhadoval. Dobrá zpráva vám dá snímek toho, co se vykreslilo, celkové časy a rozpis po jednotlivých požadavcích ukazující, který obrázek, skript nebo volání třetí strany bylo pomalé. Tento rozpis je to, co promění "stránka je pomalá" na "tento jeden soubor s fontem blokuje vykreslení na 1,8 sekundy".

Spusťte ho hned po nasazení, po aktualizaci pluginu nebo šablony a před tím, než se zavážete ke změně hostingu nebo CDN. Přesně v takových okamžicích se rychlost mění a nikdo si toho nevšimne.

Jak si to změřit sami z příkazové řádky

Pro serverovou stránku příběhu nepotřebujete prohlížeč vůbec. curl umí vypsat vlastní rozpis časování:

curl -o /dev/null -sS -w   "dns:%{time_namelookup}s connect:%{time_connect}s tls:%{time_appconnect}s ttfb:%{time_starttransfer}s total:%{time_total}s\n"   https://example.com/

Toto měří jen jediný požadavek na samotný dokument HTML, takže to vždy bude vypadat rychleji než skutečná stránka. Přesně proto je to užitečné: izoluje to server od prohlížeče. Pokud je zde ttfb vysoké, žádná optimalizace obrázků nepomůže. Pokud je ttfb nízké a stránka přesto působí pomalu, problém je v tom, co musí prohlížeč udělat poté, co HTML dorazí.

Co znamená TTFB, LCP a celkové načtení

• Doba do prvního bajtu (TTFB). Jak dlouho serveru trvalo, než začal odpovídat, včetně DNS, navázání spojení, TLS a vlastního zpracování serveru. Vysoké TTFB ukazuje na hosting, databázové dotazy nebo backendový kód, ne na zdroje stránky.
• Největší vykreslení obsahu (LCP). Kdy dokončil vykreslení největší viditelný prvek ve viewportu, obvykle hlavní obrázek, náhled videa nebo velký blok textu. Toto je číslo nejbližší tomu, čemu návštěvník říká "kdy se stránka objevila". Google považuje 2,5 sekundy nebo méně za dobré.
• Doba načtení / úplné načtení. Kdy prohlížeč dokončil načítání dokumentu a jeho blokujících zdrojů. Vše, co návštěvník vidí, je normálně hotové dávno předtím.
• Celková doba do usazení. Doba načtení plus cokoli, co ještě běží poté, například skripty, které si stáhnou data, jakmile stránka vypadá hotová. Stránka může vypadat dokončená, a přesto být zaneprázdněná, a tato práce si konkuruje s prvním scrollem nebo kliknutím návštěvníka.
• Požadavky a přenesené bajty. Kolik souborů stránka stáhla a kolik dat se přeneslo. Toto jsou páky za téměř každým číslem výše.

Čtěte je dohromady. Nízké TTFB s vysokým LCP znamená, že prohlížeč dělá příliš mnoho: příliš mnoho požadavků, skripty blokující vykreslení, nebo obrovský hlavní obrázek. Vysoké TTFB se vším ostatním normálním znamená, že úzkým hrdlem je server, ještě než se prohlížeč vůbec zapojí.

Proč jeden test z jednoho místa klame

Je normální otestovat stejnou URL dvakrát a dostat dva různé výsledky, a ani jeden není špatně. Za většinou rozptylu stojí tři věci:

• Vzdálenost. Test spuštěný blízko serveru má kratší síťovou cestu než ten spuštěný na jiném kontinentu. Pokud jsou vaši návštěvníci v Evropě a vy testujete ze stejného města jako váš server, měříte nejlepší možný případ, ne ten typický.
• Profil zařízení. Test umí emulovat mobilní zařízení s menším viewportem, jiným user agentem a omezeným připojením. Stránka optimalizovaná pro desktop dopadne v mobilní emulaci úmyslně velmi odlišně.
• Cachování a zahřátí. První požadavek může narazit na studenou cache na CDN nebo v aplikaci; druhý je obsloužen za tepla. Otestujte stránku dva nebo třikrát a použijte vzorec, ne jediný nejrychlejší běh.

Jednorázový test se přesto vyplatí spustit. Jen to znamená, že číslo má smysl jen spolu s podmínkami, za kterých bylo naměřeno.

Jak číst waterfall

Waterfall je časová osa po jednotlivých požadavcích, jeden pruh na soubor, seřazená podle toho, kdy začal. Znovu a znovu se objevují čtyři vzory:

1. Dlouhý první pruh předtím, než začne cokoli dalšího. To je TTFB na HTML, a vše ostatní za ním čeká ve frontě.
2. Schodiště, kde každý požadavek začne, až skončí ten předchozí. To je řetěz závislostí, obvykle skript, který načte další skript, který načte skutečný obsah. Řetězy jsou nejnákladnější vzor v grafu.
3. Široký pruh uprostřed z domény třetí strany. Reklamy, chatovací widgety, analytika a fonty sedí zde, a pomalá třetí strana zpozdí vaši vlastní stránku, pokud se načítá synchronně.
4. Hustý shluk drobných pruhů. Desítky malých souborů, každý s vlastní režií spojení. Méně, větších, cachovaných souborů obvykle porazí mnoho malých.

Pruhy červeně nebo s kódy 4xx a 5xx si zaslouží pozornost i tehdy, když stránka vypadá v pořádku, protože selhávající požadavek stojí čas i před tím, než selže.

Zachycení zpomalení, které nikdo aktivně nehledal

Jednorázový test vám řekne, jak si stránka vedla jednou, z jednoho místa, na jednom profilu zařízení. To je to, co chcete při ladění něčeho konkrétního. Není to to, co chcete, když je cílem si zpomalení vůbec všimnout: stránky se stávají těžšími jednou aktualizací za druhou, a nikdo nespouští ruční test v klidné úterý. Naplánovaný monitoring rychlosti stránky spouští stejný test ze stejných lokalit v pravidelném intervalu, udržuje historii a upozorní, když čísla překročí práh. Spusťte jeden hned teď pomocí testu rychlosti stránky a pokud se pomalá část ukáže být server, podívejte se na dobu odezvy serveru.