Klientům velmi záleží na výkonu webu a závisí na nás, abychom vyjádřili a změřili výkon jejich webu. Pokud máte se svým klientem smlouvu o úrovni služeb (SLA), a měli byste, pak je pro vás a vaši firmu zásadní naučit se měřit klíčové metriky. Na trhu jsou skvělé placené produkty, které dokážou sledovat výkon webu, ale existuje spousta webů a rozhraní JavaScript API, které vám mohou pomoci měřit tyto metriky zdarma.
Sledování skutečných uživatelů (RUM)
Monitorování skutečných uživatelů se shromažďuje pomocí dat od...no, skutečných uživatelů! Pomáhá při identifikaci, jak dlouho skutečným uživatelům trvá zpracování požadavku, vykreslení DOM a další. Existují velmi dobré placené produkty, které mohou měřit a poskytovat online dashboardy pro prohlížení dat RUM, jako je New Relic Browser Monitoring a Soasta mPulse, ale pokud máte omezený rozpočet, může být těžké si tyto služby dovolit. Naštěstí existují nástroje vestavěné do většiny prohlížečů to nám může pomoci!
Existují dvě rozhraní Javascript API, která z velké části shromažďují stejná data, která shromažďují a hlásí mnoho placených produktů. První na řadě je rozhraní API pro časování navigace. Toto rozhraní API vám umožňuje vidět, kdy se různé události spustily při načítání stránky. Pojďme se na to hned teď podívat! Pokud jste při čtení tohoto článku v prohlížeči Chrome nebo Firefox, otevřete konzolu kliknutím pravým tlačítkem na stránku a výběrem možnosti Zkontrolovat prvek. Poté do konzole vložte performance.timing a stiskněte enter/return. Měli byste vidět něco takového:
Každá z těchto hodnot představuje čas, kdy byly při načítání stránky spuštěny různé události. Můžete se podívat na specifikaci a zobrazit popis každé události. Chcete-li ukázat příklad, pokud byste chtěli získat čas potřebný k načtení DOM, použili byste tuto rovnici:domComplete - domLoading. Všimněte si, že čas se měří v milisekundách. Rozhraní API pro časování navigace je dobře podporováno většinou prohlížečů. Podpora začíná v IE 9+, Chrome, Firefox, Safari 8+, Opera a Android. iOS Safari a Opera Mini jsou jediné, které nejsou na palubě.
Další Javascript API je Resource Timing API. Toto rozhraní API vám umožňuje zjistit, jak dlouho trvalo načtení jednotlivých zdrojů (obrázků, souborů Javascript, souborů CSS atd.). To může být užitečné při určení, které soubory se načítají nejdéle. Vraťme se do konzole a vložte window.performance.getEntriesByType("resource") vidět příklad.
Všimnete si, že to vypadá velmi podobně jako Navigation Timing API s několika rozdíly. Toto API vám dává typ zdroje, v tomto případě obrázek, a také název zdroje, v tomto případě resource-timing-overview-1.png. Pomůže vám také tím, že za vás vypočítá dobu trvání, což se provádí pomocí rovnice responseEnd - startTime. Toto rozhraní API má stejnou podporu prohlížeče jako rozhraní Navigation Timing API, kromě toho, že jej nepodporuje Safari.
K dispozici jsou další rozhraní API, která nemají skvělou podporu prohlížeče, ale jsou nesmírně užitečná při určování smysluplnějších metrik. První je User Timing API, které vám může pomoci změřit, jak dlouho vaše požadavky AJAX trvají, nebo vám pomůže s měřením dalších úloh JavaScriptu. Podpora prohlížečů není nejlepší, ale prohlížeče Chrome, IE 10+ a Android jsou prozatím podporovány. Dalším API je Network Information API. Jednou z největších nevýhod shromažďování dat RUM je nemožnost určit, jaký druh síťového připojení uživatel používá. Tyto informace jsou užitečné, protože mobilním sítím trvá načtení webu déle než kabelovým sítím. Podpora prohlížečů je omezená, protože Firefox OS a Chromium jsou jediné prohlížeče, které v současnosti podporují API.
Chcete-li začít shromažďovat data RUM, můžete vytvořit skript Javascript, který se spouští při načítání, vypočítává měření a používá AJAX k odesílání informací do skriptu na straně serveru, který tato data uloží do databáze. Na příklad se podíváme později.
Syntetické testování
Testování ve volné přírodě s daty RUM je nezbytné, ale má svá omezení. Potřebujeme způsob, jak ovládat proměnné, jako je rychlost připojení, geografická poloha a prohlížeč uživatele. A co víc, abychom získali skutečně smysluplná data, potřebujeme vidět, jak se web uživateli načítá prostřednictvím videa nebo obrázků. Existují skvělé placené produkty, které nám umožňují mít toto nastavení laboratorního typu, jako je New Relic's Synthetics a Catchpoint's Synthetic Testing &Monitoring, ale pojďme se podívat na jeden bezplatný nástroj, který tyto potřeby splňuje:WebPageTest.org.
WebPageTest velmi usnadňuje syntetické testování webových stránek zdarma. Jakmile jste na jejich webu, zadáte adresu URL, kterou chcete testovat, vyberete umístění, ze kterého chcete testovat, a vyberete prohlížeč, který chcete k testování použít. V pokročilých nastaveních můžete nastavit rychlost připojení, kolik testů spustit, zda se má nahrávat video z načítání stránky a další. Jakmile test spustíte, poskytne vám výsledky jako je tento:
WebPageTest vám dává známku pro různé metriky a poskytuje vám podrobné informace o tom, jak se stránka načítala, a dokonce vám poskytuje využití CPU a šířky pásma. Existují tři metriky, které vám mohou poskytnout smysluplná data:First Byte, Speed Index a Bytes In. První bajt je množství času, které zabralo vytvoření požadavku webu a odeslání prvního bajtu serveru zpět do prohlížeče. Tato metrika obsahuje také známku s písmeny. Pokud je tato metrika vysoká, což znamená, že jako známku dostává C nebo horší, může to znamenat, že serveru trvá zpracování informací před odesláním zpět do prohlížeče dlouho. Může to také znamenat, že připojení prohlížeče k doméně trvá dlouho.
Druhou smysluplnou metrikou je index rychlosti. Index rychlosti byl vyvinut společností WebPageTest, aby vypočítal dobu, kterou uživatel potřebuje, než se výše uvedený obsah načte. To je smysluplné, protože nám to poskytuje metriku vnímané rychlosti vašeho webu. Pokud se obsah přehybu výše načítá rychle, je uživatel šťastnější. Pokud je to pomalé, může se uživatel stát nezaujatým a odejít. Dobrým pravidlem je udržovat index rychlosti na 1000, což znamená 1 sekundu.
Bytes In je množství kilobajtů, které bylo potřeba ke stažení obsahu stránky. Trend v průběhu let ukazuje, že velikosti stránek rok od roku rostou. To je problém, protože větší webové stránky se v mobilních sítích načítají déle a většina provozu na internetu pochází z mobilních zařízení. Může trvat několik sekund, než mobilní prohlížeč obdrží první bajt na mobilním zařízení, a my máme jen 3 sekundy na to, abychom dostali obsah k uživateli, než až 40 % z nich požadavek opustí. Proto je nejlepší ponechat velikost stránky do 1000 kilobajtů. Můžete toho dosáhnout optimalizací obrázků, líným načítáním obsahu pod okrajem, zřetězením a minifikací souborů CSS a Javascript a použitím dalších optimalizačních technik.
Dalším skvělým nástrojem je rozdělení jednotlivých snímků, jak se webová stránka načetla pomocí zobrazení Filmový pás. To nám umožňuje vidět skutečnou uživatelskou zkušenost a identifikovat oblasti, které by se mohly zlepšit, pokud jde o načítání nejdůležitějšího obsahu nad okrajem. Vodopádový graf je také skvělý při identifikaci toho, jaké zdroje se načítají nejdéle a v jakém pořadí se načítají. Nedávno WebPageTest přidal novou funkci nazvanou Cena, která vám umožní zjistit, kolik by stálo zobrazení webové stránky na mobilním zařízení v různých zemích. Tato funkce pomáhá ukázat důležitost udržování nízké velikosti stránky. K dispozici je dokonce bezplatné API WebPageTest, které můžete použít k začlenění do testování prostřednictvím volání a odpovědí AJAX. To vám umožní odeslat syntetická data do stejné databáze jako vaše data RUM a poté zobrazit všechna data, abyste viděli, jak zlepšit web. Požádejte Patricka Meenana o klíč API.
Need for Speed
Za posledních pár let jsem si všiml, že klienti se vždy ptají na výkon, ale prostě přesně nevědí, jaké otázky položit nebo jak výkon měřit. Je to pro ně černé na bílém:buď je web rychlý, nebo pomalý. Společnosti a nezávislí pracovníci, kteří vynikají, jsou ty, které mají výkonnostní SLA se standardy a osvědčenými postupy a jsou transparentní ohledně výkonu webů svých klientů. Nikdy nebylo snazší sledovat údaje o výkonu pomocí nástrojů s otevřeným zdrojovým kódem a řídicích panelů, jako je Nines Performance Tool. Umožňuje vám zobrazit informace prostřednictvím malého panelu nástrojů na webu nebo se na data podívat prostřednictvím řídicího panelu pomocí grafů Google. Ať už používáte placenou službu nebo používáte open source nástroj, začněte testovat ještě dnes! Pamatujte, že #perfmatters!