Každý znak kódu, který prohlížeč stáhne, přidává na velikosti stránky, a minifikace CSS a JavaScriptu je jedním z nejjednodušších způsobů, jak ji snížit. Minifikace odstraní všechno, co soubory s kódem obsahují a co prohlížeč ke spuštění ve skutečnosti nepotřebuje. Mezery, zalomení řádků, komentáře a dlouhé názvy proměnných, které kód pro vývojáře činí čitelným, se všechny odstraní a velikost souboru se zmenší, aniž by se změnilo, jak kód funguje. Tento článek vysvětluje, co minifikace dělá, jak funguje u CSS a JavaScriptu, o kolik obvykle zmenší velikost souboru a jak ji na webu zapnout.
Soubory s kódem se píšou tak, aby je mohli udržovat vývojáři. To znamená, že mají odsazení, jsou rozdělené do čitelných řádků, opatřené komentáři a strukturované pomocí popisných názvů. To všechno je užitečné, když kód vývojář čte nebo upravuje. Nic z toho není užitečné, když ho prohlížeč zpracovává a spouští. Minifikace odstraní prvky určené pro lidi a vytvoří menší soubor, který prohlížeč zpracuje úplně stejně. Souvislosti toho, jak velikost souboru přispívá k rychlosti načítání, najdete v článku o tom, co je doba načítání stránky a jak se měří.
Co minifikace ze souborů s kódem vlastně odstraňuje?
Když minifikujete CSS a JavaScript, výstup vypadá pro člověka nečitelně, ale funkčně je totožný s originálem. Tady je, co se odstraňuje.
Mezery a zalomení řádků
- Vývojáři používají mezery a zalomení řádků, aby byl kód vizuálně uspořádaný a snadno se prohlížel
- Prohlížeče považují prázdné znaky za nepodstatné a při zpracování je zcela přeskakují
- Samotné odstranění prázdných znaků z typického souboru CSS ho zmenší o 15 až 25 procent
Komentáře
- Komentáře jsou poznámky psané v kódu, které vysvětlují, co jednotlivé části dělají, kdo je napsal nebo kdy byly naposledy aktualizovány
- Prohlížeč je zcela ignoruje
- V dobře okomentovaném kódu může komentáře tvořit značnou část každého souboru, přičemž všechny jsou v doručované verzi zbytečné
Dlouhé názvy proměnných a funkcí
- V JavaScriptu vývojáři pojmenovávají proměnné a funkce popisně, aby byl kód srozumitelný sám o sobě. Názvy jako
calculateTotalOrderPricenebouserSessionDurationvyjadřují význam jasně - Minifikátory je nahradí krátkými alternativami, například
anebob, aniž by se změnilo, co kód dělá - Tomu se říká zkracování názvů (name mangling) a přináší největší další úsporu velikosti souboru nad rámec odstranění prázdných znaků
Nadbytečné vzory v kódu
- Některé minifikátory také zjednodušují strukturu kódu: delší logické výrazy nahrazují kratšími ekvivalenty, které dávají stejný výsledek
- To jde nad rámec odstraňování znaků a zahrnuje to přepisování částí kódu pro stručnost, což se vedle minifikace někdy nazývá optimalizace kódu nebo uglifikace
Jak funguje minifikace CSS?
Soubory CSS definují vizuální podobu každého prvku na stránce. Typický soubor CSS pro web má stovky nebo tisíce pravidel a každé určuje barvy, velikosti, rozestupy, písma a chování rozvržení.
Co dělá minifikátor CSS
- Odstraňuje všechny prázdné znaky mezi selektory, vlastnostmi a hodnotami
- Odstraňuje komentáře
- Slučuje zkrácené zápisy vlastností tam, kde je to možné
- Odstraňuje nepotřebné středníky na konci bloků pravidel
- Převádí hodnoty barev na kratší ekvivalenty, kde jsou k dispozici
Jak vypadá minifikované CSS
- Originál: úhledně formátovaný na více řádcích s mezerami a komentáři mezi sekcemi
- Minifikované: všechna pravidla stlačená na jeden nebo několik řádků bez mezer mezi vlastnostmi, hodnotami a selektory
- Vizuální výsledek v prohlížeči je identický. Liší se jen soubor, který se prohlížeči doručí
Typické zmenšení souboru CSS
- Minifikace obvykle zmenší soubor CSS o 20 až 30 procent
- U silně okomentovaných nebo volně formátovaných souborů CSS může být zmenšení větší
Jak funguje minifikace JavaScriptu?
Soubory JavaScript řídí interaktivní chování stránky. Bývají větší než soubory CSS a z minifikace profitují víc kvůli dalším ziskům ze zkracování názvů.
Co dělá minifikátor JavaScriptu
- Odstraňuje všechny prázdné znaky, zalomení řádků a komentáře
- Přejmenovává proměnné a funkce na kratší alternativy
- Zjednodušuje logiku kódu tam, kde je to možné bez změny výstupu
- Odstraňuje mrtvý kód, tedy části kódu, ke kterým se nelze nikdy dostat nebo které se nikdy nespustí
Typické zmenšení souboru JavaScript
- Minifikace obvykle zmenší soubor JavaScript o 30 až 50 procent
- U velkých souborů JavaScript s množstvím komentářů, popisných názvů proměnných a rozvláčné logiky může zmenšení dosáhnout 60 procent i víc
- Soubory JavaScript přispívají k Total Blocking Time, když zdržují hlavní vlákno. Menší soubory JavaScript se zpracují a spustí rychleji, což blokování snižuje
Lze minifikovat i HTML?
Ano, HTML lze také minifikovat, i když zisky bývají menší než u CSS a JavaScriptu.
Co minifikace HTML odstraňuje
- Prázdné znaky mezi značkami HTML
- Komentáře HTML
- Volitelné ukončovací značky a uvozovky, kde je prohlížeč umí odvodit
Má smysl minifikovat HTML?
- U stránek vykreslovaných na serveru, které generují velké dokumenty HTML, může minifikace významně zmenšit každou odpověď
- U stránek s krátkým HTML je zmenšení minimální a často nestojí za dodatečnou složitost zpracování
- Minifikace HTML se zapíná méně často než minifikace CSS nebo JavaScriptu a obvykle se dělá na úrovni serveru, ne jako krok sestavení
Ovlivňuje minifikace vzhled nebo fungování webu?
Správně minifikovaný kód dává v prohlížeči přesně stejný výsledek jako originál. Prohlížeč neřeší formátování, komentáře ani názvy proměnných. Zpracuje logiku a použije styly bez ohledu na to, jak je zdrojový kód napsaný.
Kdy může minifikace způsobit problémy
- Špatně napsané minifikátory mohou někdy vnést syntaktické chyby, které rozbijí chování kódu
- JavaScript, který se spoléhá na zachování názvů proměnných určitým způsobem, se může rozbít, když je zkracování názvů přejmenuje
- Minifikace kódu třetích stran, který nebyl navržen pro minifikaci, může občas vést k neočekávanému chování
Jak se problémům s minifikací vyhnout
- Používejte zavedené, dobře udržované nástroje na minifikaci, ne vlastní řešení
- Po zapnutí minifikace web otestujte a ověřte, že vypadá i funguje, jak má
- Původní neminifikované verze souborů uchovávejte pro vývoj a úpravy. Návštěvníkům doručujte jen minifikované verze
Jak soubory svého webu minifikovat?
Přes platformu webu
- Mnoho tvůrců webů a redakčních systémů obsahuje minifikaci jako vestavěné nastavení nebo možnost výkonu
- Zapnutí je obvykle jediný přepínač bez nutnosti ručně zpracovávat soubory
- Je to nejjednodušší přístup a doporučený výchozí bod pro netechnické uživatele
Přes plugin nebo rozšíření
- Redakční systémy, které podporují pluginy, mívají široce používané pluginy pro výkon, které vedle dalších zrychlení obsahují i minifikaci
- Tyto pluginy minifikaci řeší automaticky při každém požadavku na stránku nebo jako plánovaný proces
Jako součást procesu sestavení
- Vývojové týmy pracující s weby na míru obvykle zahrnují minifikaci jako automatizovaný krok v pipeline sestavení
- Nástroje jako Webpack, Vite a Rollup minifikují JavaScript během sestavení. Minifikátory CSS lze přidat jako součást téhož postupu
- Tento přístup zajišťuje, že se nasazuje vždy minifikovaná verze, bez zpracování za běhu
Minifikace je jednou součástí širší sady zrychlení. Úplného průvodce zkracováním doby načítání webu ve všech hlavních oblastech najdete v článku o tom, jak zkrátit dobu načítání webu. O tom, jak minifikace přispívá ke skóre Core Web Vitals, zejména k Total Blocking Time, se dočtete v článku o tom, co jsou Core Web Vitals. Jak ověřit výsledky po zapnutí minifikace, najdete v článku o tom, jak otestovat rychlost svého webu.
Jak WEMASY řeší minifikaci
Tvůrce webů WEMASY automaticky minifikuje soubory CSS a JavaScript, které se doručují návštěvníkům. Děje se to na úrovni platformy bez jakékoli konfigurace. Původní zdrojové soubory se uchovávají zvlášť pro vlastní vývojový proces platformy a návštěvníkům se při načítání stránek doručují jen minifikované verze.
Minifikace je zahrnuta vedle dalších automatických zrychlení: komprese obrázků, hlaviček mezipaměti prohlížeče a doručování přes CDN. Ta všechna běží společně jako součást výchozího hostingového nastavení v každém tarifu WEMASY.
Co všechno je v ceně, zjistíte u tvůrce webů WEMASY, nebo si projděte možnosti tarifů v ceníku.
Často kladené otázky
Co je minifikace ve vývoji webů?
Minifikace je proces odstraňování nepotřebných znaků ze souborů s kódem, včetně mezer, zalomení řádků, komentářů a dlouhých názvů proměnných, aby se zmenšila velikost souboru, aniž by se změnilo, jak kód funguje. Minifikované soubory CSS a JavaScript jsou menší a stahují se rychleji než původní verze, což přispívá ke kratší době načítání stránky. Prohlížeč zpracovává minifikovaný kód úplně stejně jako originál. S tvůrcem webů WEMASY to můžete nastavit přímo na svém webu.
O kolik minifikace zmenší velikost souboru?
Minifikace CSS obvykle zmenší velikost souboru o 20 až 30 procent. Minifikace JavaScriptu ji obvykle zmenší o 30 až 50 procent a u silně okomentovaných nebo rozvláčně psaných souborů je možné i větší zmenšení. Přesné zmenšení závisí na tom, jak byl původní kód napsaný: dobře formátované a silně okomentované soubory dosáhnou největších zisků, zatímco už kompaktní kód se zlepší méně.
Mění minifikace vzhled nebo fungování webu?
Ne. Správně minifikovaný kód dává v prohlížeči stejný vizuální výstup i chování jako původní neminifikovaná verze. Prohlížeč se při spouštění kódu nespoléhá na formátování, komentáře ani názvy proměnných. Zpracuje logiku a použije styly bez ohledu na to. Problémy může minifikace způsobit jen tehdy, když vnese syntaktickou chybu nebo když se JavaScript spoléhá na zachované názvy proměnných způsobem, který je s jejich zkracováním neslučitelný.
Má se minifikovat CSS a JavaScript na každém webu?
Ano, na každém webu, kde záleží na výkonu. Minifikace je málo rizikové vylepšení bez viditelné nevýhody a se stálými zisky. Zvlášť snadno se zavádí, když ji webová platforma řeší automaticky. Hlavní věc, na kterou je třeba dbát, je zajistit, aby se neminifikované zdrojové soubory uchovávaly zvlášť, aby se kód dal při vývoji nadále číst a upravovat.
Jaký je rozdíl mezi minifikací a kompresí?
Minifikace trvale odstraňuje nepotřebné znaky ze souborů s kódem, než se doručí. Komprese, například Gzip nebo Brotli, se používá na serveru v okamžiku doručení a zmenšuje soubory během přenosu. Obě snižují množství dat přenesených do prohlížeče, ale fungují odlišně a lze je používat společně. Minifikovaný soubor, který se při přenosu navíc komprimuje, je menší než soubor, který používá jen jednu z těchto dvou metod.
Může minifikace web rozbít?
V ojedinělých případech ano. Špatně implementované nástroje na minifikaci mohou vnést syntaktické chyby a JavaScript, který se spoléhá na zachování určitých názvů proměnných, se po jejich zkrácení může chovat neočekávaně. Použití zavedených, dobře udržovaných nástrojů toto riziko výrazně snižuje. Po zapnutí minifikace vždy web otestujte a původní neminifikované zdrojové soubory mějte po ruce pro řešení potíží nebo budoucí úpravy.