Minifikace - zrychlujeme po třetí

Zrychlení webu, JavaScript, CSS

Pokračujeme ve zrychlování webu za pomocí minifikace. Nyní minifikujeme CSS a JS soubory připravenými nástroji. Ale snížíme velikost PNG obrázků, kde můžeme dosáhnout až 80% ušetření velikosti, bez okem znatelné ztráty kvality.

Minifikace - zrychlujeme po třetí

1. díl: Cachujeme, GZipujeme, zrychlujeme
2. díl: SVG a PNG Sprite, zrychlujeme podruhé
3. díl: Minifikace - zrychlujeme po třetí
4. díl: DataURI - zrychlujeme po čtvrté
5. díl: Fiddler - web debugger 
6. díl: Nastavení GZip komprese u souborů s fonty
Bonus: Automatizace s Gruntem - většinu zde popsaných technik můžete zautomatizovat pomocí Gruntu, ušetří vám to čas i námahu

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?

Logo bez TinyPNGLogo s kompresí TinyPNG


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

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Novinky z blogu

LocalStorage a Lockr

Ukládání dat v prohlížeči pomocí LocalStorage má své úskalí. Od toho je tady mini knihovna, která tyto problémy řeší a hodně práci hodně...

Další články