Minifikace - zrychlujeme po třetí

Tento článek patří do seriálu Zrychlení webu a dev stack. Ostatní články seriálu:

1. Cachujeme, GZipujeme, zrychlujeme
2. SVG a PNG Sprite, zrychlujeme podruhé
3. Minifikace - zrychlujeme po třetí
4. DataURI - zrychlujeme po čtvrté
5. Webpack lusknutím prstu - Laravel Mix - Alternativa ke Gruntu a Gulpu
6. Fiddler - web debugger
7. Nastavení GZip komprese u souborů s fonty
8. Automatizace s Gruntem - Automatizace ostatních technik ze seriálu
9. Systém SVG ikon s Gulpem

---

Minifikace JS a CSS

Jako první si ukážeme nejjednodušší metodu, zmenšení CSS a JS souborů. Obojí naleznete na stránce http://gpbmike.github.io/refresh-sf/. Tento online nástroj využívá Clean-CSS pro minifikaci CSSek a UglifyJS2 pro JavaScripty.

Jak minifikuje CSS?

Minifikace u CSSek není příliš složitá. Ve zkratce odstraní přebytečné mezery, odřádkování, komentáře, poslední středník před uzavírací závorkou a mnoho dalšího. Zkracuje ale některé zápisy, viz mini příklad

margin: 0px 5px 0px 0px; /* jeden řádek originálu */
margin:0 5px 0 0; /* přepsání minifikátorem */

Jak minifikuje JS?

Zde je to trochu složitější, takže to nebudeme rozebírat. Nástroje přímo procházejí kód, a proměnné přejmenovávají na 1 znakové názvy, provádí obfuskaci a refactoring kódu.

Zmenšení PNG

Nástrojů pro zmenšování velikosti obrázků bez ztráty nebo i se ztrátou kvality je mnoho. Já zde ukážu jeden velmi schopný nástroj TinyPNG. Ač tento kompresor je ztrátový, ve výsledku rozdíl nejde poznat, a ušetření přenášených dat se pohybuje v mém případě mezi 50 - 80%.

Obrázek vlevo je bez komprese (9,45kB) a vpravo s kompresí (3,54kB). Ušetřeno 62,5%. Poznáš rozdíl?

---

Poděl se s námi v komentářích, jaké znáš jiné nástroje nebo se zkušenostmi.