Lekce 06 / 06

Výkon, přístupnost a spuštění

Proč rychlost rozhoduje o konverzích, co je přístupnost a v EU i zákon, a kontrolní seznam před spuštěním.

Web je hotový a vy chcete kliknout na „publikovat”. Než to uděláte, projděte si tři věci, které dělí slušný web od webu, který skutečně funguje: rychlost, přístupnost a poctivou kontrolu před spuštěním.

Rychlost není kosmetika, je to peníze

Google měří reálnou zkušenost návštěvníků pomocí Core Web Vitals. Tři čísla, která stojí za to znát:

  • LCP (Largest Contentful Paint): jak dlouho trvá, než se načte hlavní obsah. Cíl pod 2,5 sekundy.
  • INP (Interaction to Next Paint): jak rychle stránka reaguje na kliknutí. Cíl pod 200 ms.
  • CLS (Cumulative Layout Shift): jak moc obsah „poskakuje” při načítání. Cíl pod 0,1.

Nejsou to akademická čísla. Pomalý web ztrácí návštěvníky dřív, než vůbec uvidí, co nabízíte. Každá sekunda navíc u načítání znamená měřitelný propad konverzí, u e-shopu to jdou rovnou tržby. A Core Web Vitals jsou zároveň jeden ze signálů, podle kterých Google řadí výsledky.

Tři věci, které pomohou nejvíc a zvládnete je sami:

  • Obrázky. Největší žrout. Zmenšete je na rozměr, ve kterém se reálně zobrazují, a používejte moderní formáty (WebP, AVIF). U fotek na pozadí klidně 80% kvalita, rozdíl neuvidíte.
  • Rezervujte místo. U obrázků a embedů uveďte šířku a výšku, ať se layout nehýbe. Tím srazíte CLS.
  • Méně skriptů. Každý chat widget, tracker a „pixel” navíc něco stojí. Přidávejte jen to, co opravdu používáte.

Změřit si to můžete zdarma v PageSpeed Insights nebo v záložce Lighthouse ve vývojářských nástrojích prohlížeče.

Přístupnost: slušnost, která je v EU i povinnost

Přístupný web umí používat i člověk, který nevidí, neslyší nebo nemůže používat myš. To nejsou okrajové případy. A od června 2025 platí v EU European Accessibility Act, který přístupnost vyžaduje po řadě komerčních webů a e-shopů. Ignorovat to není jen neslušné, je to právní riziko.

Základy, které pokryjí většinu problémů:

  • Kontrast. Text musí být čitelný proti pozadí. Šedá na světle šedé vypadá draze a nikdo ji nepřečte. Poměr aspoň 4,5:1 pro běžný text.
  • Klávesnice. Projděte si celý web jen tabulátorem. Dostanete se do menu, k formuláři, k tlačítku „odeslat”? Vidíte, kde zrovna jste (focus ring)?
  • Alt texty. Každý obrázek, který nese informaci, potřebuje popisek. Čistě dekorativní obrázek nechte s prázdným alt="".
  • Sémantika. Používejte <button> pro tlačítka, <nav> pro navigaci, jeden <h1> na stránku. Čtečka obrazovky podle toho orientuje uživatele.

Bonus: přístupný web bývá rychlejší, lépe se indexuje a líp se udržuje. Tady se vám slušnost vrátí.

Kontrolní seznam před spuštěním

Než web pustíte do světa, projděte tohle. Klidně bod po bodu:

  • Analytika běží a měří (Plausible, Matomo nebo GA4). Bez dat střílíte naslepo.
  • Formuláře otestované. Odeslali jste si zkušební zprávu a opravdu dorazila do schránky? Ověřte to, ne předpokládejte.
  • Stránka 404 existuje a vede zpět zpátky na web, ne do prázdna.
  • Favicon v záložce prohlížeče. Drobnost, ale chybí-li, web vypadá nedodělaně.
  • OG obrázek pro sdílení na sítích. Bez něj se na Facebooku i v messengerech objeví jen holý odkaz.
  • Zálohy nastavené a vyzkoušené. Záloha, kterou jste nikdy neobnovili, není záloha.
  • Právní stránky: zásady ochrany osobních údajů, cookie lišta (jen pokud reálně sbíráte cookies) a obchodní podmínky u e-shopu.

Projděte web ještě na mobilu. Většina lidí k vám přijde z telefonu.

A když se vám do toho nechce

Tohle všechno se dá zvládnout svépomocí a tenhle průvodce vám k tomu dal mapu. Pokud ale radši věnujete čas svému byznysu, můžete celý seznam předat nám. Postavíme to tak, že vám zůstane všechno: kód, účty, doména. Žádný zámek na klíče, které byste neměli v ruce. Ozvěte se a probereme to.