Novinka: Vizuální editor pro éru AI webů. Poslední dílek skládačky, když chcete upravovat web a ne psát e-maily. www.directedit.dev

💬

Green web: Proč méně kódu znamená lépe?

Moderní web je zázrak inženýrství. Ale také stále hladovější monstrum. Je čas promluvit o architektonické střídmosti — a také o tom, proč čisté HTML není krok zpět, ale akt odpovědnosti.

Tento článek berte jako filozofické okénko z pohledu vývojáře, který programuje weby a webové aplikace. Je to zamyšlení na tím, jak se dnes dělají malé weby, které často nemají ani blog, jen několik stránek a většinu roku se na ně nesahá. (Rozhodně nemám na mysli velké weby, datové aplikaci e-shopy nebo komplexní systémy.)

Zkuste si vzpomenout, kdy jste naposledy otevřeli web malé kavárny, účetní firmy nebo fotografa… Řešili jste někdy, co se vlastně děje na pozadí? Pravděpodobně se inicializoval JavaScriptový framework (nebo rovnou celé CMS), stahoval se balíček závislostí, server si vzal data z databáze a prohlížeč parsoval stovky kilobajtů kódu — jen proto, abyste viděli pár textů, obrázků, otevírací dobu a adresu.

Toto není technologický pokrok. Za mě je to pohodlnost nebo digitální plýtvání. A někdy je to obojí.

Neviditelná infrastruktura „jednoduchého” webu

V raných dobách internetu byl web sbírkou souborů uložených na serveru. Prostě tam byla složka s obrázky, HTML/JS/CSS soubory, vše fungovalo a všichni byli spokojení.

Pak jsme se přes různé frameworky a CMS dostali až do dnešní doby vibecodingu, kdy i jednoduchá stránka spoléhá na rozsáhlý ekosystém procesů běžících nepřetržitě na pozadí:

  • Trvalé databáze/SQL enginy běžící 24/7, spotřebovávající paměť a výpočetní výkon i tehdy, když web nikdo nenavštěvuje ani neupravuje.
  • Redundantní zálohy – obrovské snímky celých prostředí a databází, které se denně přesouvají mezi datovými centry po celém světě.
  • Build-deploy cyklus, který se pouští pokaždé, když klient změní jedinou větu, spustí se CI/CD pipeline, která nastartuje virtuální stroje, stáhne megabajty závislostí a několik minut kompiluje kód. (V případě CMS toto neplatí, ale ty mají zase svoje jiná specifika).

Vyměnili jsme architektonickou jednoduchost za pohodlí vývojářů. A kdo platí rozdíl? Naše planeta. Možná jste se v duchu pousmáli, ale realita je taková, že na světě existuje přes 1.3 miliardy webů [zdroj]. Vynásobte to množstvím elektřiny, vzácných kovů a dalšího materiálu potřebný k vyrobení všech datacenter, procesorů, pamětí, čipů… a úsměv jde pomalu stranou.

Uhlíkovou stopu těchto nečinných procesů, vynásobenou miliony webů, z velké části ignorujeme.

Mýtus o „dynamické” nutnosti

Složité systémy a nutnost CMS nebo frameworků si u mnoha webů ospravedlňujeme možnostmi editace. Předpokládáme, že aby web mohl spravovat průměrný počítače-znalý uživatel, musí tam být CMS nebo složité administrační rozhraní. IMHO u mnoha webů to potřeba není (netvrdím že u všech! Jsou weby, kde je administrace nebo správa dat i uživatelů naprostá nutnost, ale to už se nebavíme o malých a jednoduchých webech).

Tím, že vložíme malý obsah webu do velkých CMS nebo složitých deployovacích struktur, vytváříme digitální města duchů — servery provozující náročné procesy pro weby, u kterých se obsah aktualizuje jednou za měsíc. Každý takový web má svůj tichý, ale trvalý uhlíkový otisk.

Green web není o tom, že se vrátíme do roku 1995. Je o střídmosti. Pokud se na malých webech o třech podstránkách používá PHP nebo jiný framework jen proto, že se v něm pohodlně píše a vývojář je na to zvyklý, je to z pohledu digitálních zdrojů čisté plýtvání.

Nejčastější hříchy dnešních webů

Past „chytré” AI asistence

AI sice během vteřiny vygeneruje patičku, ale často ji obalí do zbytečného balastu. Místo pěti řádků čistého CSS je Tailwind konfigurace nebo React komponenta, která s sebou táhne další závislosti. Výsledek? Kvůli změně textu v patičce se spouští build proces a prohlížeč uživatele musí rozlousknout megabajty kódu. Přitom AI je schopná upravit hlavičku/patičku na více stránkách i v jednoduchém HTML.

Frameworkový overkill

Dnes je trendem stavět i jednoduchou vizitku na Next.js nebo Nuxt.js. Aby se pohnulo jedno menu, stáhne se do prohlížeče celý balík Reactu. Přitom by stačilo deset řádků čistého HTML a CSS. Vývojář chce mít v hlavičce „dynamický” prvek, tak tam šoupne JS monstrum — a návštěvník platí přenesenými megabajty.

Server-side zátěž tam, kde netřeba

Nasadí se CMS, aby se dal obsah jednouše spravovat. Jenže každý dotaz pak zbytečně žhaví procesor serveru. Přitom statické generátory jako Hugo nebo 11ty vygenerují stránku jednou v počítači — a server pak jen posílá hotové soubory. Ticho, rychlost, nulová zátěž. Nemluvě o tom, že dynamické CMS musíte nacachovat, zabezpečit, aktualizovat, atd… což jsou pluginy a komponenty navíc. (Opět – neberte mě špatně, na spoustě webů má CMS své místo. Ale ruku na srdce – jsou weby, pro které je to overkill).

Neoptimalizované weby (i ty z AI)

I tyto weby mají často dost nešvarů, na které je potřeba při jejich tvorbě myslet. Google Fonts jsou pohodlné, ale čím víc řezů, tím víc stažených souborů — a průměrný web jich tahá zbytečně moc. Variabilní font hostovaný lokálně udělá totéž za zlomek datové zátěže. Podobně obrázky: AI vygeneruje krásnou grafiku do hlavičky, vývojář ji tam práskne v 5 MB PNG místo 100 KB WebP. A pak je tu tracking: web o pěti stránkách se třemi skripty v hlavičce — Google Analytics, Facebook Pixel a Hotjar — z nichž každý žere mj. i energii zařízení každého návštěvníka. Analytiky smysl dávají, ale jedno sloučené řešení místo tří různých nástrojů obvykle stačí úplně stejně, případně použít něco odlehčeného (Plausible aj).

Vibecoding vs. řemeslo

Dnešní vývojář umí postavit Next.js aplikaci s padesáti balíčky ještě před obědem. Ale zeptat se ho, jak vycentrovat element v čistém CSS bez Googlu — to už je jiná písnička. A právě tahle mezera mezi nástroji a základy je jedním z kořenů toho digitálního plýtvání. Když neví, co framework dělá pod pokličkou, těžko se správně vyhodnotí, jestli ho vůbec potřebuje.

Green web: co se tím dá získat?

Paradox green webů je svým způsobem zajímavý: když je web optimalizovaný s ohledem na infrastrukturu, automaticky tím získá i ty nejlepší výsledky z pohledu výkonu. Ekologie a výkon tu nejdou proti sobě — jsou to dvě strany té samé mince.

Rychlost, která je cítit i bez měření

Stránka pod 100 KB se načte bleskově i na slabém 4G v podzemní tramvaji. Není potřeba žádné ladění, žádný plugin na cache, žádná CDN za příplatek. Prostě méně věcí ke stažení — a výsledek je okamžitě znát.

Vyhledávače i AI vás odmění, aniž byste o to žádali

Core Web Vitals jsou přímý rankingový signál. Čistý statický web je splní přirozeně — bez ladění skóre, bez optimalizačních pluginů, bez placených nástrojů. Je to vedlejší produkt toho, že jsi web udělal jednoduše..

Hosting zdarma — nebo skoro

Statický soubor nepotřebuje výkon serveru. GitHub Pages, Vercel, Netlify nebo nejslabší nabízené sdílené hostingy jsou dostatečné pro většinu malých webů. Měsíční náklady se smrsknou na minimum — nebo na nulu. A to je argument, který klient pochopí okamžitě.

Přístupnost jako vedlejší efekt, ne jako extra práce

Čistý HTML bez vrstev JavaScriptu lépe přečtou čtečky obrazovky pro nevidomé. Funguje spolehlivěji na starých telefonech. Zobrazí se i tam, kde JavaScript selže. Přístupnost tu není speciální funkce — je to přirozený výsledek jednoduchosti.

Méně kódu → rychlejší web → lepší SEO → nižší náklady → dostupnější pro každého → méně elektřiny. Zní to skoro podezřele dobře. Ale je to tak.

Architektonická střídmost: zpět k čistému HTML?

Návrat k čistému HTML není podle mého názoru krok zpět. Je to akt digitálního minimalismu. Statické soubory jsou nejefektivnějším způsobem doručování informací — vyžadují téměř nulové nároky na procesor, jsou ze své podstaty bezpečné a lze je provozovat na úsporném hardwaru.

Výzvou při tvorbě webu není jen jak ho vyrobit, ale také jak ho udržovat. A nabízí se otázka, jak překlenout propast mezi efektivitou statického webu a možností ho editovat?

Odpověď za mě leží v tzv. buildless workflows (styly práce, kde není potřeba deployment nebo složité sestavování stránky z mnoha komponent). Místo toho hledejme nástroje, které umožňují přesné a bezpečné úpravy přímo ve zdrojových souborech.

Jak může vypadat zodpovědný přístup k tvorbě malých webů?

  • Čisté HTML + CSS,
  • statické generátory,
  • žádná databáze,
  • hosting zdarma (Vercel, Netlify), nebo preferuji slabší hosting přímo pro klienta,
  • WebP obrázky, variabilní fonty,
  • analytiky opravdu jen ty, které potřebujete a používáte.

Etika volby

Jako designéři a vývojáři je každé naše architektonické rozhodnutí zároveň rozhodnutím environmentálním, i když to mnohé doteď ani nenapadlo. Volba přístupu orientovaného na statické soubory — a odolávání pokušení frameworkových/CMS řešení — je jedním z nejúčinnějších způsobů, jak praktikovat udržitelný design. (Opět, bavíme se o malých jednoduchých webech!)

Přestaňme měřit modernost webu přes složitost jeho komponent a závislost. Ono to vypadá cool, když můžeme vyjmenovat 10 technologií, na kterých je web postaven. Místo toho ji začněme ji měřit jeho architektonickou jednoduchostí. Vývojářova pohodlnost má často svou cenu – a platí ji planeta, přístupnost i samotný návštěvník.

Někdy je nejodvážnější technologické rozhodnutí to nejjednodušší: přestat kompilovat, přestat deployovat a začít znovu psát HTML.

Líbil se vám článek? Pošlete ho dál:

Jitka Klingenbergová

Jitka Klingenbergová

Absolventka ČVUT FIT oboru Informatika | Programátorka | Webová vývojářka, konzultantka a mentorka
tvorime@vyladeny-web.cz

Vaše komentáře

Zanechte první komentář

Zpět k tipům

Články na podobné téma

Pravidelná dávka užitečných tipů až do schránky