Minifikace má zjednodušeně řečeno na starost odstranění nadbytečného kódu (HTML/CSS/JS), který není nutný pro jeho fungování: mezery, nové řádky, komentáře, nepoužívané části, zkrácení názvů proměnných.
Hlavní myšlenkou ,minifikace je tedy snížení velikosti souborů pro rychlejší načítání webu, což přiníšá lepší UX a SEO.
Jednoduchý příklad pro jednodušší pochopení
Představte si, že někomu píšete dopis, ale necháte tam spoustu mezer, odstavců, prázdných řádků a poznámek pro sebe.
Takto:
Ahoj,
tohle je dopis.
(poznámka: nezapomeň říct blah blah…)
Měj se.
Čau.
Když dopis následně posíláte kamarádovi, uděláte z toho hezkou přehlednou větu:
Ahoj, tohle je dopis. Měj se. Čau.
Obsah je tedy ve finále úplně stejný, jen je to kratší, čistí a rychlejší na přečtení.
A takhle nějak tedy vypadá i minifikace kódu (příklad prosím berte s nadhledem:)).
Ukázka minifikace CSS souboru v praxi
Na webu máme jednoduchý kus CSS kódu:
/* hlavní styl stránky */
body {
margin: 0;
color: #333333;
}
Minifikace s výše uvedeným kódem udělá následující:
body{margin:0;color:#333}
CSS funguje úplně stejně, jen je to menší.
Minifikace souborů ve WordPressu
WordPress defaultně minifikaci souborů nenabízí, proto je potřeba sáhnout po některém z dostupných optimalizačních pluginů (většina z nich nabízí minifikaci souborů zcela zdarma).
Pluginy, které nabízí minifikaci:
- Autoptimize: minifikuje CSS, JS a HTML, umožňuje kombinovat soubory a deferovat načítání skriptů.
- WP Rocket (placený): má vlastní funkce pro minifikaci a kombinaci souborů, lazy load, cache a další optimalizace.
- Fast Velocity Minify: zdarma, spolehlivě minifikuje CSS a JS, možnost nastavení priority skriptů.
Existuje také méně praktická možnost manuální minifikace pomocí online nástrojů:
