Čistý HTML kód zrychlí váš web. 3 metriky Core Web Vitals, které na velikosti DOM přímo závisí

Mít čistý HTML kód znamená zároveň mít rychlejší web. Bohužel při optimalizaci často dostávají větší pozornost obrázky, skripty a hosting. Je to ale samotná stavba stránky co rozhoduje o tom, kolik práce musí prohlížeč odvést, než návštěvníkovi cokoli ukáže.

Na následujících řádcích si přiblížíme, co přesně je velikost DOM, proč na ní závisí vykreslení stránky a jak se zbytečný kód propisuje do metrik LCP, INP a CLS. Na konci najdete i postup, jak nepořádek v kódu najít a bezpečně odstranit.

Co se v HTML hromadí a odkud se to bere

Nepořádek v kódu málokdy vzniká záměrně. Nejčastěji se do stránek dostane při kopírování textu z textového editoru, který s sebou přinese desítky vložených stylů, prázdných odstavců a vnořených značek span. Jediný takto vložený odstavec dokáže v kódu zabrat i desítky řádků.

Podobně se chovají vizuální editory a page buildery. Každý blok obalí do několika vrstev kontejnerů, aby šel snadno posouvat myší.

Další vrstvu přidávají zapomenuté komentáře, skryté prvky, které se nikde nezobrazují, a zbytky starých šablon po redesignu. Jednotlivě nevypadají tak hrozně, ale na stránce s dlouhým článkem či rozsáhlou kategorií e-shopu se sečtou do tisíců zbytečných prvků.

Jak velikost DOM ovlivňuje rychlost stránky

Co je DOM a proč na jeho velikosti záleží

Prohlížeč HTML nečte jako obyčejný text. Převede ho na stromovou strukturu objektů, kterou popisuje objektový model dokumentu DOM. Každá značka, a dokonce i kus textu či komentář, se v něm stane samostatným uzlem. Čím víc uzlů strom obsahuje, tím víc paměti a výpočetního času prohlížeč spotřebuje.

Hranice, od kterých už je DOM příliš velký

Auditní nástroj Lighthouse začíná upozorňovat při více než 800 uzlech a za nadměrný považuje DOM s více než 1 400 uzly. Hlavní poučení je jednoduché. Každý zbytečný obal prodlužuje práci prohlížeče při načtení i při každé pozdější změně obsahu.

Velikost DOM ověříte i bez speciálního softwaru. V nástrojích pro vývojáře v prohlížeči stačí do konzole zadat příkaz document.querySelectorAll(‘*’).length, který vrátí počet prvků na stránce.

3 metriky Core Web Vitals, které nepořádek v kódu zhoršuje

LCP a zdlouhavé vykreslování

Metrika LCP měří, za jak dlouho se zobrazí největší prvek v horní části stránky. Za dobrý výsledek se považuje čas do 2,5 sekundy. Objemné HTML se déle stahuje i zpracovává, takže prohlížeč na hlavní obrázek či nadpis narazí později.

Pokud je navíc hlavní obsah zanořený pod desítkami kontejnerů, oddálí se i výpočet rozvržení. Pomůže také, když hlavní obrázek nenačítáte až skriptem, ale přímo jako značku img v HTML.

INP a pomalá odezva na kliknutí

INP (Interaction to Next Paint) sleduje, jak rychle stránka reaguje na kliknutí, klepnutí a psaní. Hranice dobrého výsledku leží na 200 milisekundách. Když interakce změní část stránky, prohlížeč musí přepočítat styly a rozvržení dotčených prvků.

Ve velkém DOM se tento přepočet týká tisíců uzlů a odezva se citelně zpomalí. Typicky jde o rozbalovací menu, filtry v e-shopu a formuláře, které při každém kliknutí mění podobu stránky. Nejvíc to poznají návštěvníci na slabších telefonech, kde má procesor menší rezervu.

CLS a poskakující obsah

CLS měří, nakolik se obsah během načítání nečekaně posouvá. Dobrá hodnota je do 0,1. Neuklizený kód často obsahuje obrázky bez uvedených rozměrů, prázdné bloky, které se později naplní, a styly vložené přímo do značek. Právě tyto prvky způsobují skoky v rozvržení, při kterých návštěvník klikne jinam, než chtěl.

Proč nestačí komprese a rychlejší server

Častou námitkou bývá, že objemné HTML vyřeší komprese při přenosu. Komprese skutečně zmenší objem dat, která putují po síti, mnohdy na zlomek původní velikosti. Prohlížeč však soubor po doručení rozbalí a musí zpracovat každý uzel, včetně těch zbytečných.

Stejně tak výkonnější hosting zkrátí čekání na odpověď serveru, nikoli práci na straně zařízení návštěvníka. Zpracování kódu, výpočet stylů i rozvržení probíhají v jeho telefonu či počítači. Čistý HTML kód proto pomáhá tam, kam serverová optimalizace nedosáhne.

Jak kód bezpečně vyčistit

Začněte u šablon, které generují nejvíc stránek, tedy u detailu článku, kategorie a produktu. Úprava jedné šablony se projeví na stovkách adres najednou. Pak se soustřeďte na obsah vložený redaktory, kde se nepořádek z textových editorů hromadí nejvíc.

Pro úklid obsahu poslouží HTML čistič, který z kódu odstraní vložené styly, prázdné značky a zbytečné atributy a ponechá jen sémantickou strukturu textu. Před nasazením si výsledek vždy porovnejte s původní verzí v prohlížeči, abyste měli jistotu, že nezmizelo formátování, na kterém skutečně záleží.

Opatrní buďte u atributů, které plní konkrétní funkci – alternativní texty obrázků, atributy pro přístupnost či datové atributy, se kterými pracují skripty. Bez obav odstraňte vložené styly, které jen opakují CSS, prázdné odstavce, vnořené značky bez obsahu a vývojářské komentáře.

Rychlost ovšem neovlivňuje jen samotný kód. Velkou roli hraje i způsob, jakým server stránky doručuje, a proto doporučujeme současně ověřit, jestli web používá moderní přenosové protokoly. Postup popisuje článek o tom, jak probíhá kontrola HTTP/2 a HTTP/3 a co z ní vyčtete.

Menší strom, rychlejší stránka, spokojenější návštěvníci

Teď tedy víte, odkud se nepořádek v HTML bere, proč prohlížeči komplikuje práci a jak se propisuje do metrik LCP, INP i CLS. Projděte nejnavštěvovanější šablony, odstraňte zbytečné obaly a výsledek ověřte novým měřením rychlosti. Rozdíl v odezvě nejdřív zaznamenají návštěvníci na mobilech.

About
Latest Posts

Pavel Nejedlý

Dějiny, filosofie, ale také magie a záhady jsou můj velký koníček, kvůli kterému jsem procestoval nejen celé Česko, ale i padesát zemí světa. Doufám, že tenhle seznam ještě rozšířím. Poslední dobou mě také začaly hodně bavit motorky, takže svoje cesty teď podnikám po jedné stopě, jak to jen jde. Nějaký ten pátek už taky bloguji. Snad vás moje texty pobaví, potěší, nebo zaujmou. Proto je píši!

Latest posts by Pavel Nejedlý (see all)