Přejít k navigační liště

Zdroják » Zprávičky » Zmenšujeme velikost HTML souboru

Zmenšujeme velikost HTML souboru

Zprávičky ‐ ‐ Webdesign ‐

Pokud vyvíjíme web, u něhož záleží na velikosti přenášených souborů, sáhneme pravděpodobně po kompresní metodě gzip, která je dnes v prohlížečích široce podporována. Zajímavou alternativou však může být i zmenšení velikosti kódu vypuštěním prázdných znaků, které parser ignoruje. Tento postup je známý a celkem běžně používaný u CSS i u JavaScriptu, ale lze jej použít i pro HTML. Nástrojů pro zmenšování kódu (minify – minifier) existuje jak pro JS, tak pro CSS velké množství, ale pro HTML téměř žádný. Obsáhlý článek na weblogu Perfection Kills s názvem Experimenting with  HTML minifier rozebírá postup při zmenšování velikosti HTML souboru a na praktických příkladech ukazuje výsledky takové optimalizace, která leckdy sníží velikost výsledného kódu mnohem víc než gzip.

Komentáře

Odebírat
Upozornit na
guest
4 Komentářů
Nejstarší
Nejnovější Nejvíce hlasů
Ruthion

Dovolím si nesouhlasit s větou:

“ ..leckdy sníží velikost výsledného kódu mnohem víc než gzip…“

Správně měla být “ … nekomprimovaný dokument je zmenšen více, než jeho komprimovaná verze“, což je celkem očekávané.

Pro ty, kdo se nechtějí prokousávat odkazovaným článkem bych ještě vypíchnul, že mnohé optimalizace mají vliv na interpretaci a zobrazení dokumentu browserem či na jeho DOM reprezentaci a i sám autor uvádí jako nejlepší metodu napsat HTML jako čisté HTML a nikoli jako HTML + CSS + JS, což obvykle ušetří nejvíce. A samozřejmě výsledek pak posílat gzipnutý.

rooobertek

Ja prihodím, že v Smarty sa dá prostredníctvom {strip} poskracovať kadečo, ale môže to mať aj neblahé dôsledky, tak opatrne s tým.

František Kučera

Ono by hodně pomohlo, kdyby autoři do webů nedávali tolik divů a spanů – mnohdy jsou zbytečné a když se člověk podívá na zdroják nějaké stránky, často je vidět, že si s tím autor vůbec nelámal hlavu a prostě tam nasekal spousty elementů navíc („hlavně ať to vypadá dobře“), milion wrapperů.

jiri

prohnat validátory na W3C (před a po použití miniferu) a obavám se, že by při použití musely ze spousty stránek zmizet takové ty obrázky o kompatibilitě… :-)))

Začal jako projekt studentů Matfyzu. Český BIRD dnes pomáhá řídit provoz na největších internetových uzlech

Internet drží pohromadě i díky místům, kde se propojují sítě poskytovatelů připojení, cloudů nebo videoslužeb. S předáváním informací o tom, kudy jsou jednotlivé sítě dostupné, jim ve Frankfurtu, Londýně i Amsterdamu pomáhá český BIRD. Začal jako studentský projekt, po první verzi z roku 2000 léta spíš dřímal a soustavný vývoj obnovil až CZ.NIC. Ve své úloze uspěl tak výrazně, že největší uzly nakonec začaly platit vývoj konkurenčního softwaru, aby nebyly závislé jen na něm.

WebSocket: Jak dostat webovou aplikaci do reálného času

Chat, živé notifikace, společná úprava dokumentu nebo průběžně aktualizované kurzy. Uživatelé dnes čekají, že se webová aplikace změní ve chvíli, kdy se změní data, a ne až po stisknutí klávesy F5. Protokol WebSocket je nejrozšířenější způsob, jak mezi prohlížečem a serverem vytvořit trvalý obousměrný kanál. V článku se podíváme, jak funguje pod kapotou, jak ho použít v prohlížeči i na serveru a na co si dát pozor při nasazení do produkce.

Zahoďte knihovny: dropdowny, tooltipy a přechody stránek jen s HTML a CSS

Rozbalovací menu, tooltip, modální okno a plynulý přechod mezi stránkami. Ještě nedávno čtyři důvody, proč do projektu přidat několik knihoven a desítky kilobajtů JavaScriptu. V roce 2026 už to všechno zvládne prohlížeč sám. Ukážeme si, jak na to s Popover API, CSS anchor positioningem a View Transitions, a také kde mají své limity.