Jak udržet vysokou výkonnost webu?
V předchozím blogpostu věnovaném problematice performance a Core Web Vitals jsme se zaměřili na zlepšení výkonnosti vašich stránek, na odhalení a odstranění úzkých míst a na to, jaký vliv to má na váš business. Podařilo se vám to všechno vyřešit? Pokud ano, pojďme se společně podívat na mechanismus, který udrží vaši výkonnost na vysoké úrovni.
Všechno se točí kolem kultury
Jakmile se vám podaří zlepšit výkon, objeví se další náročný úkol – jak ho udržet? Může to být relativně jednoduché, pokud máte jednoho nebo dva lidi, kteří na určitém projektu pracují, ale co když jsou jich desítky nebo dokonce stovky? Developeři, content editoři, marketingoví a SEO specialisté?
Udržování aplikace v takovém měřítku není jednoduché a určitě to nezvládne jeden člověk. Jediný způsob, jak s tím efektivně pracovat, je vybudovat odpovídající firemní kulturu.
Vysvětlili jste proč?
Pokud chcete vybudovat výkonnostně orientovanou kulturu, musíte zvýšit povědomí o výkonnosti v širším měřítku. Pomoci lidem pochopit, proč to všechno děláme a jak výkonnost ovlivňuje výsledky našeho businessu.
Zapojte každého
I kdyby vaši developeři optimalizovali vaší aplikaci jako zběsilí, může přijít někdo, kdo do ní jen tak přidá externí JS soubor nebo velký obrázek, a vaše výkonnost je v čudu. Takže každý, kdo může potenciálně ovlivnit výkon aplikace, musí být informován a zasvěcen. Vytvořte guideliny, připravte workshopy, a v neposlední řadě začleňte metriky týkající se performance do KPIs. Tyto aktivity vám pomohou lidi namotivovat k lepší péči o výkon. Vysvětlete jim, jak to dělat pořádně a dejte jim příležitost, jak se naučit něco nového.
Vytvořte guideliny
K čemu? Abyste pomohli lidem pochopit, jak do aplikace přidávat bannery a obrázky, jak používat externí služby a další podobné rutinní úkoly tak, aby nezhoršovali výkonnost vaší aplikace. Zvažte, zda zároveň nevytvořit jednoduchý “živý” dokument, který budou sdílet všichni, kdo mají co dočinění s vývojem platformy. “Živým” dokumentem máme na mysli takový, který může každý účastník aktualizovat nebo v něm navrhovat změny, takže bude neustále aktuální a relevantní.
Sdílejte návod, jak správně přidávat obrázky s vaším content týmem (přidání rozměrů obrázkům, lazy loading objektů, které nejsou viditelné), řekněte vašemu marketingovému týmu, aby používal server-to-server přístup namísto přidávání JS knihoven na klienta atp. (server-to-server approach instead of adding JS libraries on the client). To pomůže vám i vašemu týmu udržet výkon platformy na vysoké úrovni.
Přidejte výkon do KPI
Když už víte jak a proč, musíte se ujistit, že se váš tým soustředí na výkonnost jako na jednu z hlavních priorit. Nastavení KPI na základě zmíněných metrik může být jedním z efektivních způsobů, jak toho dosáhnout.
Nástroje
Teď když váš tým ví, jak přistupovat k výkonnosti, je potřeba najít nástroje na měření úspěchu a neúspěchu. Tyto nástroje mohou fungovat plně automatizovaným způsobem, jako součást vašeho workflow, ale mohou být spustitelné i manuálně, kdykoli bude potřeba.
Automatická kontrola
Mnoho kontrolních mechanismů může být přímo součástí vaší pipeliny, takže každá změna, kterou developer udělá, je měřena, a regrese tak může být snadno odhalena. Automatická kontrola je taktéž dobrým způsobem, jak kontinuálně sbírat data, ze kterých jsou viditelné trendy a na základě kterých se dají dělat rychlá rozhodnutí.
Mnoho nástrojů na trhu je dostupných zdarma a můžete je jednoduše přidat do CI/CD.
Vybrali jsme pro vás následující:
- Multihouse (flexibilní, silný s Grafana)
- LHCI (dobrý na sledování trendů a releasů)
- Lighthouse API (flexibilní, použitelný na sledování trendů – žádné uživatelské rozhraní s výsledky)
Nástroje, které zmiňujeme výše, jsou dobré pro developery, ale bohužel jsou špatně srozumitelné pro ostatní (content manažery, marketingové týmy a manažery).
Existuje naštěstí další možnost, která kombinuje všechno potřebné a zároveň je uživatelsky přívětivá i pro netechnické profese, a to je Speed Curve. SpeedCurve je náš oblíbený nástroj, ale na některé projekty může být až příliš složitý nebo drahý.
Manuální kontrola
V některých případech, jako je třeba testování nového externího nástroje přidávaného do vaší aplikace, přidávání nové marketingové kampaně nebo A/B testování, může být užitečné udělat ad hoc manuální výkonnostní test. Nástroje zmíněné u automatické kontroly jsou skvělé pro technické typy, ale pro ostatní jsou příliš složité.
Najdete i několik online aplikací, které můžete využít k zjištění, jak provedené změny ovlivnily váš výsledek. Jediné, co k tomu budete potřebovat, je url aplikace, která je veřejně dostupná.
Nástroje na manuální ad hoc kontrolu jsou:
- Google PageSpeed Insights
- GT Metrix
- Plugin do prohlížeče Chrome ke kontrole Core Web Vitals v reálném čase
Mějte na paměti, že nemá smysl to udělat pouze jednorázově, vždy testy pouštějte několikrát a udělejte si z výsledků median.
Abychom si to shrnuli
Jakmile dosáhnete požadované úrovně výkonu, začíná práce na jeho udržení, ruku v ruce s dalšími optimalizacemi. Pro udržení výkonnosti na vysoké úrovni byste se měli zaměřit na následující:
- Sdílejte vizi a cíle se všemi, kdo se podílí na vývoji a údržbě aplikace.
- Vytvořte guideliny, aby každý věděl, co má v souvislosti s výkonností dělat.
- Udělejte z výkonnosti jednu z hlavních priorit – např. přidáním do KPI.
- Poskytněte svému týmu nástroje, aby mohl jednoduše odhalit regresi a měřit optimalizace.
Problematice performance, Core Web Vitals a PWA se věnuje webinář Time to speed up!, na který se můžete podívat zde.