Jak udělat audit webu v Chrome

Oblíbený internetový prohlížeč od Google – Chrome má v sobě velice zajímavý nástroj, který vám může velmi pomoct při optimalizaci vašeho webu. Najde nejen chyby, ale také vám ukáže jak je na tom váš web s výkonem a na mobilních telefonech. Tento nástroj se nazývá Audits.

Spuštění auditu webové stránky #

Nejdříve navštivte stránku, kterou chcete podrobit auditu.

Klikněte v pravém horním rohu Chrome na ikonku tří teček , vyberte v menu Další nástroje – Nástroje pro vývojáře. Případně jde použít klávesovou zkratku CTRL + SHIFT – I.

Z nástrojů pro vývojáře vyberte Audits.

Pak už jen stačí kliknout na Perform an audit…

Objeví se vám výběr auditů, které má Chrome provést.

• Progressive Web App – Otestování webu zdali splňuje standardy Progressive Web App – V podstatě standard od Google, kde se nejen měří rychlost načtení, rychlost práce na webu a přívětivost pro uživatele mobilních telefonů, ale také stránku posouvá na úroveň webové aplikace.
• Performance – Měření výkonu – za jak dlouho se načte a je použitelná pro návštěvníka.
• Best practices – jestli webová stránka splňuje moderní osvědčené postupy.
• Accessibility – jak je webová stránka použitelná pro lidi se zdravotním omezením.

Progressive Web App #

Celkem se provede 11 testů. Část se týká zdali je váš web vlastně webová aplikace, což většina internetových stránek nepotřebuje.

Funguje stránka bez zapnutého JavaScript? #

Moderní webové stránky využívají JavaScript ke svému fungování. Za určitých okolností však návštěvník může JavaScript mít zakázaný. Většinou je důvodem bezpečnost. JavaScript totiž o návštěvníkovi může prozradit hodně informací a tyto informace pak není problém předat dále.

Vypnutí JavaScripu dokáže některé weby úplně odrovnat, což by se stávat nemělo. Správně byste měli minimálně oznámit návštěvníkovi, že k plnému používání webu je potřeba mít JavaScript zapnutý.

Používání HTTPS #

Progressive Web App vyžaduje používání HTTPS a to jednat z důvodu ochrany uživatelských dat a také kvůli nasazení HTTP/2. Vylepšený protokol HTTP/2 značně urychluje načítání moderních náročných webových šablon, které potřebují hodně prvků.

Přesměrování HTTP na HTTPS #

Test zdali přesměrováváte návštěvníky z nezabezpečeného HTTP na HTTPS.

Stránka se musí načíst rychle i na 3G #

Ne všude je dobrý mobilní signál, proto je dobrou praxí zajistit, aby se alespoň textová část webu načetla. Nejde tu jen o velikost webu ale i čekání na větší prvky, které brání vykreslování.

Mata tag viewport #

Meta tag:

 <meta name="viewport" content="width=device-width, initial-scale=1">

By měl být součástí každého webu, který je určen pro mobilní telefony. Bez něj nebude mobilní telefon vědět v jakém rozlišení web vykreslit a bude muset improvizovat, což zvláště u responzivních webů není ideální.

Obsah webu musí být správně k viewport #

Viz. minulý odstavec. Tady se jedná spíše o chybu v implementaci.

Registers A Service Worker #

Service Worker (servisní pracovník) je skript, který běží na pozadí v internetovém prohlížeči mimo samotnou webovou stránku. Má za úkol umožnit pokročilou interakci mezi uživatelem a webovou stránkou. Využívá se například k posílání push notifikací. Tato technologie posouvá webovou stránku na úroveň běžné aplikace. Spíše se tak jedná o technologii budoucnosti, kterou čeká další vývoj.

Odpovídání stavovým kódem 200, pokud je offline #

V podstatě testování zdali komunikuje web se Service Workerem.

Nabádání uživatele ať si stránku uloží na plochu #

Prompt to Install Web App – Jak už bylo zmíněno, budoucí weby budou spíše aplikace a vy můžete nabídnout návštěvníkovi ať si je uloží na pracovní plochu mobilu.

Configure for custom spash screen #

Pokud si uživatel uloží váš web na svou plochu v mobilu, můžete ovlivnit jak se zachová po otevření. Splash screen je vlastně animace otevření stránky. Můžete tam dát ikonku načítání anebo nějaké textové informace.

Address Bar Matches Brand Colors #

Další vychytávka pro webové aplikace. Můžete si nastavit jakou barvou bude adresní řádek.

Performance #

Tento test je zaměřený čistě na výkon webové stránky. Vzhledem k probíhajícímu vykreslování může nějakou dobu trvat.

Nejdůležitější části tohoto auditu je ukázat jak se web postupně vykresluje na mobilním zařízení. Máte k dispozici časovou osu a informace k ní.

• First Meaningful Paint – je důležitý ukazatel. Google neměří TTFB (Time to first byte), ale právě First Meaningful Paint (FMP). Je to doba, než se na webové stránce začne objevovat nějaký obsah, který by mohl upotat návštěvníkovu pozornost. Tuto dobu je nutné udržet pod 4 vteřiny.
• First Interactive – Tento test je prozatím v beta testu a má ukázat za jak dlouho se objeví prvky, s kterými může probíhat nějaká interakce (například menu).
• Consistently Interactive – Google netestuje kompletní načtení stránky, ale dobu kdy s webem může návštěvník pracovat. Tedy nahraje se všechno potřebné pro ovládání.

A teď se podíváme na hodnocení.

• Perceptual Speed Index – Index jak rychle je stránka plněna obsahem Vašim úkolem je dostat se na 1250 ms.
• Estimated Input Latency – hodnocení pro aplikace. Pokud máte stránky jako webovou aplikaci, tak vašim úkolem je dostat se pod 50 ms. Uživatelé prý cokoliv nad 100 ms považují za lagování – zasekávání.

Oportunities – šance na zlepšení #

V této části najdete seznam věcí, či spíše doporučení co můžete zlepšit.Většino use jedná o obrázky, kde vám bude doporučena komprese u konkrétních obrázků, lazy load atd.

Diagnostika #

V diagnostice se dozvíte, že máte kompresovat soubory .css a .js. Zároveň uvidíte který kolik brzdí načítání webu. Dávejte si pozor zvláště na externí soubory mimo váš dosah.

Best practices #

Tento audit otestuje zdali splňujete osvědčené postupy pro moderní weby.

• HTTPS – zdali umožňuje váš web šifrované spojení.
• HTTP/2 – nová modernější verze protokolu pro návštěvu webových stránek umožňující rychlejší načítání webů. Pozor moc webhostingů HTTP/2 zatím neumí.
• Používání v odkazech rel=”noopener” v odkazech. Pokud chcete otvírat odkazy v novém okně měli byste vždy v odkazu používat rel=”noopener”. Důvodem je, že otevření nového okna způsobí že jede na stejném procesu jako vaše stránka, což je pro uživatele potenciální bezpečnostní problém. Otvírání přes JavaScript zase způsobuje výkoností problémy, které rel=”noopener” řeší.
• Test používání front-end JavaScript knihoven s bezpečnostními dírami.
• Používání zastaralých API.
• Název vaší webové aplikace by neměl být delší než 12 znaků kvůli ořezání.
• Chyby na stránce, kterou zachytila konzole internetového prohlížeče.
• Nepoužívání obrázků se správnými rozměry.
• Nepoužívání Application Cache – ta byla zrušena.
• Nepoužívání WebSQL DB – ta byla zrušena.
• Pasivní naslouchání scrollování.
• Vyhnutí se Mutation událostem
• Vkládání dynamických skriptů přes document.write(). Tato funkce způsobuje problémy s rychlostí na pomalém internetu pokud se vkládá skript.
• Vyhnutí se automatickým dotazům na sledování polohy. Zažádat byste měli teprve pokud uživatel udělá nějakou akci, která polohu potřebuje (například hledá nejbližší obchod).
• Měli byste zakázat vkládat hesla přes CTRL+V

Accessibility #

Audit provede test na stránce, zdali neobsahuje chyby, které by mohli postiženým návštěvníkům znemožnit její používání. Zároveň vám vypíše další doporučení.

• Vytvoří vám seznam elementů, které nemají vhodný popis (odkazy, políčka formuláře).
• Kontrastní poměr mezi pozadím a barvami textu v popředí.
• ARIA atributy.
• Pojmenování elementů pomůže pokud nemají vhodné titulky anebo jsou titulky obecné (například u tlačítek).
• Správná struktura elementů.
• HTML obsahuje element lang.
• Vhodné meta tagy