Jak jsem optimalizoval design systém
Měl jsem design systém pro landing pages. Fungoval, ale PageSpeed Insights hlásil problémy s výkonem na mobilních zařízeních. Render-blocking Google Fonts (potenciální úspora 1,620ms), neoptimální LCP element, forced reflow (82ms). Plus chyběla konzistentní aplikace českých typografických pravidel.
Potřeboval jsem to opravit. Všechno. A tak jsem se pustil do optimalizace.
Problém, který jsem řešil
Design systém měl problémy s výkonem. Google Fonts blokovaly render stránky – potenciální úspora 1,620ms. LCP element nebyl optimalizovaný. JavaScript spouštěl forced reflow během inicializace (82ms). A česká typografie nebyla konzistentně aplikovaná napříč všemi stránkami.
Dokumentace byla roztroušená v root složce projektu, což ztěžovalo navigaci a údržbu. Potřeboval jsem to zorganizovat a optimalizovat.
Jak jsem ho vyřešil
Rozhodl jsem se kategorizovat optimalizace na "bezpečné" a "potenciálně breaking" změny. To umožnilo informované rozhodnutí a minimalizovalo riziko.
Pro Google Fonts jsem použil asynchronní načítání pomocí `media="print" onload="this.media='all'"` patternu. Jednoduchá změna, která eliminuje render-blocking bez potřeby komplexních build nástrojů.
Pro LCP elementy jsem přidal `fetchpriority="high"` na header loga. Pro JavaScript jsem použil `requestAnimationFrame` na redukci forced reflow. Systematicky jsem aplikoval česká typografická pravidla (` ` pro předložky) napříč všemi HTML soubory.
Dokumentaci jsem reorganizoval do `prompts/` složky a aktualizoval všechny reference. Aktualizoval jsem i `ASSISTANT-PROMPT.md` a `SEO-compass.md`, aby budoucí stránky byly automaticky optimalizované.
Jak to funguje v praxi
Teď se Google Fonts načítají asynchronně bez blokování renderu. LCP elementy mají `fetchpriority="high"` pro rychlejší načítání. JavaScript je optimalizovaný pomocí `requestAnimationFrame` na redukci forced reflow.
Všechny české texty na stránkách teď dodržují typografická pravidla s non-breaking spaces pro předložky. Dokumentace je zorganizovaná v `prompts/` složce, což zjednodušuje navigaci a údržbu.
Výsledek: Zlepšené Core Web Vitals metriky, konzistentní typografie napříč projektem, lepší organizace dokumentace. A automatická aplikace pravidel na budoucí stránky přes aktualizovanou dokumentaci.
Co jsem se naučil
Kategorizace změn zlepšuje rozhodování. Rozdělení optimalizací na "bezpečné" a "potenciálně breaking" umožnilo informované rozhodnutí o implementaci. Tento přístup minimalizuje riziko a maximalizuje hodnotu.
Dokumentace je investice do budoucnosti. Aktualizace `ASSISTANT-PROMPT.md` a `SEO-compass.md` zabezpečuje, že budoucí stránky budou automaticky optimalizované. Tento přístup šetří čas při budoucích projektech a zajišťuje konzistenci.
Systematický přístup k typografii. Aplikace typografických pravidel napříč všemi soubory najednou (místo postupného) zabezpečuje konzistenci a eliminuje potřebu opakovaných kontrol. Použití grep na nalezení všech instancí před opravou zrychlilo proces.
Malé změny v načítání resources mohou mít velký dopad na výkon. Jednoduchá změna načítání fontů (`media="print"`) výrazně zlepšila metriky.
Proč to stojí za to
Rychlé načítání stránek je kritické pro SEO a uživatelskou zkušenost. Správná typografie zvyšuje profesionální vzhled a čitelnost českého obsahu. Organizovaná dokumentace zlepšuje udržitelnost projektu.
Optimalizace design systému je teď součástí mého workflow. Šetří mi čas, protože budoucí stránky jsou automaticky optimalizované přes aktualizovanou dokumentaci. A zároveň mám kontrolu nad tím, jak stránky vypadají, protože všechno je v dokumentaci.
Pokud máš podobný problém – problémy s výkonem, nekonzistentní typografie, roztroušená dokumentace – zkus to. Možná zjistíš, že je to jednodušší, než sis myslel.
Časté otázky
Jak velký dopad má render-blocking Google Fonts na výkon?
V mém případě potenciální úspora 1,620ms. To je skoro dvě sekundy, kdy uživatel čeká na zobrazení stránky. Jednoduchá změna na `media="print" onload="this.media='all'"` pattern tohle eliminuje bez komplexních build nástrojů.
Co je to forced reflow a proč ho řešit?
Forced reflow nastává, když JavaScript nutí prohlížeč přepočítat layout stránky. U mě to bylo 82ms během inicializace. Řešení? `requestAnimationFrame` – odloží výpočty do správného momentu a prohlížeč nemusí přepočítávat layout zbytečně.
Proč kategorizovat změny na "bezpečné" a "potenciálně breaking"?
Minimalizuje to riziko. Bezpečné změny můžeš nasadit hned – asynchronní fonty, `fetchpriority="high"`. Breaking změny potřebují testování. Tento přístup ti umožní rychle získat hodnotu bez rizika rozbití produkce.
Jak systematicky aplikovat českou typografii napříč projektem?
Použij grep na nalezení všech instancí před opravou. Aplikuj pravidla (` ` pro předložky) napříč všemi soubory najednou, ne postupně. Pak aktualizuj dokumentaci, aby budoucí stránky byla automaticky správně. Konzistence je klíč.
Jak zajistit, že budoucí stránky budou automaticky optimalizované?
Aktualizuj dokumentaci – `ASSISTANT-PROMPT.md`, `SEO-compass.md`. Když máš pravidla v dokumentaci, každá nová stránka je automaticky optimalizovaná. Investice do dokumentace se vrací při každém dalším projektu.
Tom