Flyer.cz
Znalostní báze chyb, problémů a návodů pro WordPress
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.
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.
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.
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ý.
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ů.
Test zdali přesměrováváte návštěvníky z nezabezpečeného HTTP na HTTPS.
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í.
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í.
Viz. minulý odstavec. Tady se jedná spíše o chybu v implementaci.
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.
V podstatě testování zdali komunikuje web se Service Workerem.
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.
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.
Další vychytávka pro webové aplikace. Můžete si nastavit jakou barvou bude adresní řádek.
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í.
A teď se podíváme na hodnocení.
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.
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.
Tento audit otestuje zdali splňujete osvědčené postupy pro moderní weby.
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í.