Úvod > Šablony > Web > Základní technický audit webu od Martina Michálka (2022)

Základní technický audit webu od Martina Michálka (2022)

Webové stránky má dnes každá firma, neunikají vám však příležitosti díky nedostatečné technické kvalitě? Tahle šablona je zaměřená hlavně na obsahové weby a e-shopy. Pomůže kodérům na frontendu, webovým vývojářům i designérům projít všemi důležitými kroky. 

Doporučujeme projít celý checklist na webu Vzhůru dolů od Martina Michálka. Pro obecnou automatickou kontrolu webu se hodí nástroje: 

Ukázka veřejné šablony ve Freelu

Použij tuto šablonu ve svém Freelu

= Obsah a HTML
Správný <meta viewport> ★★★
- „Meta viewport“ zařídí správné zobrazování responzivního webu v mobilních prohlížečích.
- Důležité je nezakazovat zoomování.
Správný <title> a <meta description> ★★★
- Mají vliv na umístění ve vyhledávačích, hlavně .
- Jsou potřeba pro náhled stránky ve výsledcích vyhledávání nebo na sociálních sítích.
Osnova nadpisů je v pořádku ★★☆
- Stromová struktura (outline) nadpisů , atd. má odrážet strukturu dokumentu. Usnadní indexaci vyhledávači a prohlížení stránky zrakově postiženými.
- Prohlédněte si DOM, využijte HTML5 outliner.
Náhledy pro sociální sítě a chaty ★★☆
- Doplňte meta značky pro Facebook Open Graph, Twitter Cards a další. Mají potenciál zvýšit návštěvnost webu, protože vytvářejí hezký náhled webu na sociálních sítích.
- Důležitý je hlavně obrázek.
- Nástroje pro kontrolu: Facebook Debugger, Twitter Validator, MetaTags.io.
Strukturovaná data pro Google ★★☆
- „Rich Snippets“ usnadňují nahrání informací, například o struktuře produktů e-shopu a vylepší náhled webu ve výsledcích vyhledávání.
- Je to podstatné hlavně u e-shopů a webů, které obsahují recenze nebo události.
- Tester Google Structured Data Testing Tool.
Odkazy z webu ven jsou platné ★★☆
- Vyhněte se chybám 404 při procházení vašeho webu.
- Pro kontrolu jednotlivých stránek použijte třeba Dead Link Checker nebo Xenu.
Ikony webu a favikony ★★☆
- Favikony identifikují web v bookmarcích nebo v seznamu aplikací na mobilech i desktopu.
- Generátor: RealFaviconGenerator.net.
Validní HTML ★☆☆
- Hlídejte si validitu kvůli potenciálním chybám v indexaci vyhledávači. Lpí na tom i někteří klienti, tak proč si kazit renomé.
- Nástroje: Český validátor, W3 validátor.
Obsah bez typografických chyb ★☆☆
- Text bez chyb zajistí lepší čitelnost obsahu. Profíci jsou na to citliví. Dohlédněte alespoň na ty nejpodstatnější.
- Nástroj pro odstraňování chyb: Typopo.org.
= Přístupnost
Struktura dokumentu: WAI-ARIA oblasti a HTML5 elementy ★★★
- Správná struktura umožní zrakově postiženým strukturované procházení, což jim šetří čas. Stačí přidat „role“ pro navigaci, obsah a třeba vyhledávání.
Procházení stránky tabulátorem ★★☆
- Zkuste sekvenční procházení stránky tabulátorem a jinými klávesami. Kromě zrakově postižených to ocení i pokročilí uživatelé, využívající klávesnici.
Hlavní obsah a navigace jsou dostupné i bez JavaScriptu ★★☆
- Většina robotů nezvládne indexovat obsah vytvořený JavaScriptem. Googlebot jej do jisté míry zvládá, ale je lepší na to nespoléhat.
- Testujte to vypnutím JavaScriptu v Developer Tools.
Správné typy inputů ve formulářích ★★☆
- a nové typy formulářů usnadňují zadávání obsahu na mobilních zařízeních.
- Je to užitečné naprosto pro všechny uživatele.
Barevný kontrast je dostatečný ★★☆
- Ocení nejen zrakově postižení, ale také majitelé horších displejů. Prakticky každý při horších světelných podmínkách na mobilech.
Multimédia mají textovou alternativu ★★☆
- Obrázkům doplňte smysluplný popisek do atributu alt, používejte značku .
= Design webu
Požadovaná rychlost webu ★★★
- Jděte na PageSpeed.cz, změřte si konkurenci a snažte se být rychlejší než ona.
- Testujte všechny důležité vstupní šablony.
- Sledujte hlavně metriky Web Vitals od uživatelů.
Web je přátelský k mobilním uživatelům ★★★
- Pomůže test Mobile Friendly od Googlu.
Grafika podporuje HD displeje typu Retina ★★★
- Obyčejná grafika nebude na vysokokapacitních displejích vypadat dobře.
- V praxi potřebujete SVG, případně také atribut srcset.
Šablony pro chybové stránky 404 a 50x ★★★
- Navrhněte a implementujte vlastní.
- Výchozí chybovky serverových frameworků nebo serverů návštěvníkovi nepomohou.
= Prohlížeče a kompatibilita
Plné zobrazení napříč prohlížeči a zařízeními ★★★
- Internet Explorer už snad podporovat nemusíte a mezi moderními prohlížeči tolik rozdílů není.
- Pomohou nástroje jako Browserstack.
- Nezapomeňte ošetřit i chytré hodinky.
Tisková verze stránky ★★☆
- Je potřeba hlavně zajistit nezobrazování částí nezajímavých pro tisk jako jsou ovládací prvky webu.
Zobrazení s blokovači reklamy ★★☆
- Testujte se zapnutými blokovači.
- Otestujte web se zapnutým AdBlockem.
Dostupnost hlavního obsahu ve starších prohlížečích ★☆☆
- Záleží to na projektu a cílové skupině.
- Ve starších prohlížečích web nemusí vypadat jako z reklamy, důležitá je ale čitelnost hlavního obsahu a dostupnost navigace.
Stránka je v pořádku bez CSS ★☆☆
- Verze pro čtečky a další kontexty, které nepoužívají vaše CSS.
= Kvalita kódu: dokumentace a testy
Kód dodržuje konvenci ★★☆
- Konvence usnadňuje sdílení nebo předávání kódu.
Kvalita kódu v požadované úrovni ★★☆
- Automatická kontrola častých chyb nebo problematických konstrukcí kódu. Lze využít například ESLint v CSS pak Stylelint.
- Ve všech jazycích autoformátovač Prettier.
Javascriptový kód je pokrytý testy ★★☆
- Javascript není CSS a tak se nějaké ty testy hodí.
Měření runtime chyb v JS kódu ★★☆
- Ujistěte se, že víte o chybách, které uživatelům vrací váš frontendový kód. Zamezte tomu, aby prohlížeč do konzole vypisoval chyby.
- Z možností sledování vybíráme např. Technical Dashboard v Google Analytics nebo Sentry.
Funkční testování ★★☆
- Fungují kritické části webu i když ho necháte běžet?
- Pomůže třeba Selenium nebo nástroje vycházející ze standardu Webdriver.
Kód je v produkční kvalitě ★★☆
- Je minifikovaný a neobsahuje zbytečná data.
README.md ★☆☆
- V tomto souboru je v repozitáři popsána instalace, buildování atd.
= Spuštění webu
Web běží na HTTPS ★★★
- Bez bezpečného protokolu se s vámi už nikdo (myšleno vyhledávače) nebude chtít kamarádit.
Web běží na HTTP/2 ★★★
- HTTP/2 pozitivně ovlivňuje rychlost, zvažte také nejnovější HTTP/3.
Není zakázaná indexace vyhledávači ★★★
- Mrkněte se do robots.txt nebo na .
- Obvykle indexaci při spuštění webu zakazovat nechcete, ale často se na to zapomíná.
Vývojářské soubory nejsou na produkci ★★★
- Hlavně adresáře typu .git/, node_modules/, zapomenutý ZIP s obsahem databáze nebo třeba veřejně přístupný Adminer či phpMyAdmin.
Přesměrování ze starých adres ★★★
- Pokud se mění URL, musíte přesměrovat ze starých na nová.
- Jakmile by stará URL vracela chybu 404, vyhledávače na ta nová nepředají tzv. „link juice“ hodnocení adresy získané z dřívějška.
- Na staré adrese vracejte kód 301 a přesměrujte na novou.
Přidání a konfigurace Google Analytics ★★★
- Obchodní výkonnost webu všechny zajímá, nezapomněli jste nastavit měření?
- Alternativně přidejte kód Google Tag Managera, marketéři si přes potřebné kódy přidají.
Registrace v nástrojích pro webmastery ★★☆
- Pravidelně upozorní na časté chyby z pohledu vyhledávačů.
- Nejdůležitější je Google Search Console: Přidejte tam web hned po spuštění. A pak samozřejmě Seznam Webmaster.
- Pro zahraniční weby také například Bing Webmaster Tools.
Správně nastavené hlavičky ze serveru ★★☆
- REDbot.org vysvětluje nastavení vašeho serveru: gzipování, kešovací hlavičky…
- Hodí se hlavně zkontrolovat na hostingu, který neprovozujete sami.
Správně nastavené bezpečnostní hlavičky ★★☆
- SecurityHeaders.io udělá alespoň základní audit té části serverové hlavičky, kterou můžete usnadňovat různé typy útoků.
- Např. X-Frame-Options nebo Content-Security-Policy.
Přidali jsme robots.txt, humans.txt a security.txt ★★☆
- Roboty, jen pokud potřebujete výslovně změnit něco kolem indexování.
- Lidi hlavně pro radost.
- Security jako kontakt pro hlášení průšvihů, než jsou z nich megaprůšvihy.
Máme sitemap.xml ★★☆
- Usnadňuje indexování vyhledávači. Hlavně pro větší weby nebo weby s komplikovanou strukturou.

Line Copy 3 Created with Sketch.

Jak na to

Page 1 Created with Sketch.