Kontrast v obou schématech
Poměr se počítá zvlášť pro světlý i tmavý režim a zvlášť pro tmavé plochy. Skript navíc ověřuje, že se pozadí mezi schématy skutečně liší — jinak by se světlý režim testoval dvakrát a tmavý vůbec.
Jak stavíme weby
Web bez jádra, které je nutné záplatovat
Tahle stránka je technická a je tu schválně. Když si kupujete web, máte právo vědět, co přesně dostanete — a u dodavatele, který to neumí vysvětlit, je to varovný signál.
Co znamená „statický"
Běžný web s redakčním systémem sestaví stránku ve chvíli, kdy o ni návštěvník požádá: server spustí PHP, zeptá se databáze, poskládá šablonu a odešle výsledek. Statický web má stránky vygenerované dopředu. Server je jen pošle, tak jak leží.
Z toho plynou tři věci. Je to rychlejší, protože odpadá celá práce před odesláním. Je to levnější na provoz, protože stačí obyčejný hosting. A hlavně tam není co napadnout — neexistuje jádro, rozšíření ani přihlašovací formulář do administrace.
To poslední pro nás není teorie. Na vlastní subdoméně jsme takhle přišli o Joomlu: někdo se do ní dostal a začal přes ni prodávat japonské spotřební zboží. Popsali jsme to v případové studii.
Rychlost jako tvrdý limit, ne jako cíl
„Snažíme se, aby byl web rychlý" neznamená nic. Proto máme rozpočty a překročení rozpočtu shodí build — web se v takovém stavu nenasadí:
| Veličina | Strop |
|---|---|
| Lighthouse na mobilu (výkon / SEO / přístupnost / postupy) | ≥ 98 / 100 / 100 / 100 |
| LCP — největší vykreslení | < 1,5 s |
| INP — odezva na interakci | < 200 ms |
| CLS — poskakování obsahu | < 0,05 |
| HTML stránky po gzipu | < 45 kB |
| CSS po gzipu | < 25 kB |
| Vlastní JavaScript po gzipu | < 25 kB |
| Celková váha stránky | < 450 kB |
Pro představu: běžný firemní web na WordPressu se šablonou z tržiště má po kompresi běžně přes megabajt a několik set kilobajtů JavaScriptu. Rozdíl není v tom, že bychom uměli kouzlit, ale v tom, že se na stránku nedostane nic, co na ní není vidět.
Pět kontrol, které musí projít
Každá z nich umí nasazení zastavit. A ke každé existuje test, že umí spadnout — kontrola, která nikdy nespadla, není kontrola, jen pocit jistoty.
Styl nezávisí na HTML
Každá proměnná, kterou styl čte, v něm musí být i nastavená. Na webu, kam se nahrává po jednom souboru, je nesoulad mezi HTML a CSS běžný provozní stav — a překlep v názvu proměnné je neviditelný, protože se tiše zdědí od rodiče.
Odkazy vedou někam
Každý interní odkaz musí mířit na stránku, která existuje. Mrtvý odkaz uvnitř webu je horší než žádný, protože ho návštěvník přičte vám.
Přesměrování a blokovací pravidla
Žádná reálná adresa nesmí spadnout pod blokující pravidlo v .htaccess,
žádná adresa ze sitemapy se nesmí přesměrovávat a žádné přesměrování nesmí
skákat dvakrát.
Přístupnost není charita
Držíme WCAG 2.2 na úrovni AA jako minimum a u kontrastu jdeme na AAA, tedy poměr 7:1 u běžného textu. Web musí být ovladatelný klávesnicí, funkční při zvětšení na 200 % a čitelný i s vypnutým JavaScriptem.
Důvod je praktický. Část zákazníků má zhoršený zrak, část čte web na mobilu na slunci a část na starém monitoru. A u veřejných zakázek je přístupnost podmínkou, ne bonusem.
Švecovy děti
Naměřené hodnoty tohoto webu
Prodáváme rychlé weby, takže dává smysl začít u vlastního. Čísla níž nejsou marketingové tvrzení — jsou to hodnoty, které si za deset sekund ověříte sami v PageSpeed Insights. Co ještě naměřené není, tu prostě není; odhad by byl k ničemu.
nezměřeno
Lighthouse mobil, výkon
Náš závazný strop: ≥ 98 bodů
nezměřeno
LCP na mobilu
Náš závazný strop: < 1,5 s
nezměřeno
CLS (poskakování obsahu)
Náš závazný strop: < 0,05
9.3 kB
HTML titulní stránky po gzipu
Náš závazný strop: < 45 kB
4.8 kB
CSS celého webu po gzipu
Náš závazný strop: < 25 kB
11.5 kB
Vlastní JavaScript po gzipu
Náš závazný strop: < 25 kB
nezměřeno
Přístupnost
Náš závazný strop: 100 bodů
nezměřeno
SEO
Náš závazný strop: 100 bodů
Web zatím není nasazený na ostré adrese, takže naměřená čísla neexistují. Doplní se sem v den spuštění i s datem měření. Uvedené stropy jsou blokující — build, který je překročí, se nenasazuje.
Nejčastější otázky
Statický web přece nemůže mít formuláře ani vyhledávání?
Může. Formulář odesílá malý PHP skript, který nic neukládá na disk a nemá databázi. Vyhledávání běží nad indexem vygenerovaným při buildu, přímo v prohlížeči. Co statický web opravdu nezvládne, je uživatelský účet a obsah generovaný na míru každému návštěvníkovi — u firemního webu to skoro nikdy nepotřebujete.
Jak budu web aktualizovat bez administrace?
Texty a ceny žijí v datových souborech, které se dají editovat v prohlížeči. Po uložení se web přegeneruje. Je to jiný postup než redakční systém, ale ne složitější — zaškolení trvá hodinu a stojí 4 550 Kč bez DPH.
Není statický web krok zpátky?
Je to krok zpátky jen v tom smyslu, že se z webu odstraní vrstva, která tam nemusela být. Výsledek je rychlejší, levnější na provoz a nemá co záplatovat. Zbytek — responzivita, měření, formuláře, strukturovaná data — zůstává stejný.
Co když budu chtít e-shop?
E-shop je jiná úloha a řešíme ho jinak, podle počtu produktů a toho, jak moc se váš prodej liší od běžného. Někdy je správná odpověď hotová platforma, ne řešení na míru — a řekneme to, i když je to pro nás menší zakázka.
Proč je přístupnost obchodní téma?
Protože web, který nejde ovládat klávesnicí nebo má nečitelný kontrast, přijde o část zákazníků — a u veřejných zakázek i o možnost se přihlásit. Kontrast navíc není věc názoru: je to počítatelný poměr a dá se ověřit skriptem.
Řešíte podobnou situaci?
Konzultace je nezávazná, trvá půl hodiny a nekončí objednávkou. Končí tím, že víte, co by to obnášelo, kolik by to stálo a jestli se vám to vůbec vyplatí.
Ozveme se do jednoho pracovního dne.