{"id":205543,"date":"2015-07-27T10:16:24","date_gmt":"2015-07-27T17:16:24","guid":{"rendered":"http:\/\/css-tricks.com\/?p=205543"},"modified":"2015-07-27T10:16:24","modified_gmt":"2015-07-27T17:16:24","slug":"the-difference-between-minification-and-gzipping","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-difference-between-minification-and-gzipping\/","title":{"rendered":"The Difference Between Minification and Gzipping"},"content":{"rendered":"

These are both things that you do to assets on your website (things like .css files and .js files). They are both things that reduce the size of the file, making it more efficient in crossing the network between servers and browsers. As in, good for performance. The network is the speed bottleneck of the web and reducing file size helps.<\/p>\n

But these two things are distinctly different. If you didn’t already know that, it’s worth understanding.<\/p>\n

<\/p>\n

Minification does things like removing whitespace, removing comments, removing non-required semicolons, reducing hex code lengths…<\/h3>\n

… and stuff like that. The file remains perfectly valid code. You wouldn’t want to try to read it or work with it, but it’s not breaking any rules. The browser can read it and use it just like it could the original file.<\/p>\n

Minification creates a new file that you ultimately use. For instance, you’d create a `style.css` that you work with. Then you could minify it into `style.min.css`.<\/p>\n

Gzipping finds all repetitive strings and replaces them with pointers to the first instance of that string.<\/h3>\n

Julia Evans created a wonderful way to understand this (see her post and video<\/a>). See this first paragraph of a poem:<\/p>\n

\nOnce upon a midnight dreary, while I {pon}<\/span>dered weak an{d wea}<\/span>{ry,}<\/span>
\nOver many{ a }<\/span>quaint{ and }<\/span>curious volume of forgotten lore,
\nW{hile I }<\/span>nodded, n{ear}<\/span>ly napping, su{dde}<\/span>n{ly }<\/span>th{ere}<\/span> ca{me }<\/span>a t{apping,}<\/span>
\nAs{ of }<\/span>so{me o}<\/span>ne gent{ly }<\/span>r{apping, }<\/span>{rapping}<\/span> at my chamb{er }<\/span>door.
\n`’Tis{ some }<\/span>visitor,’{ I }<\/span>mu{tte}<\/span>r{ed, }<\/span>`t{apping at my chamber door}<\/span> –
\nO{nly th}<\/span>is,{ and }<\/span>no{thi}<\/span>{ng }<\/span>m{ore}<\/span>.\n<\/p><\/blockquote>\n

The text within the curly brackets has been discovered by gzip to be repetitive. Thus will be replaced with a pointer that uses less space than the text itself does.<\/p>\n

This can be incredibly effective at reducing file size, especially with code, since code be incredibly repetitive. Imagine how many instances of <div <\/code> there are in an HTML file or { <\/code> in a CSS file.<\/p>\n

You can create gzipped version of files (i.e. style.css.zip) but you rarely ever do that<\/strong> and the browser won’t know what to do with it<\/strong>. <\/p>\n

On the web, gzipping is done directly by your server. It’s a matter of configuring the server to do it. Once that’s done, gzipping automatically happens, there isn’t any ongoing work you have to do. The server compresses the file and sends it across the network like that. The browser receives the file and unzipped it before using it. I’ve never heard anyone mention anything about the overhead of zipping and unzipping, so I just assume it’s negligible and the benefits far outweigh the overhead.<\/p>\n

Here’s how to enable it on Apache servers<\/a>, where it uses the mod_deflate<\/code> module. And H5BP offers server configurations<\/a> for all the popular servers that include gzipping.<\/p>\n

An Example<\/h3>\n

We’ll use the CSS file from Bootstrap<\/a> since it’s such a common asset.<\/p>\n

<\/figure>\n

You’ll save about 17% minifying the CSS, 85% gzipping, or 86% if you do both.<\/p>\n

Here’s the ideal situation when checking everything is working from DevTools:<\/p>\n

<\/figure>\n

Gzipping is far more effective. Doing both is ideal.<\/h3>\n

Gzipping reduces the file size about five times as much as minifying does. But, you get a little<\/a> boost<\/a> from minifying as well, and since it likely requires little additional effort in a build step, you might as well. <\/p>\n

There is also some evidence<\/a> that browsers can read and parse a minified file faster:<\/p>\n

As expected, minification helps parse-n-load in addition to network transmission time. This is probably due to the absence of comments and extra whitespace.<\/p><\/blockquote>\n

Microsoft is also starting to optimize their parsers<\/a> for it:<\/p>\n

So in Windows 10 and Microsoft Edge, we’ve added new fast paths, improved inlining and optimized some heuristics in Chakra’s JIT compiler to ensure that minified code runs as fast, if not faster than the non-minified versions. With these changes, the performance of individual code patterns minified using UglifyJS that we tested, improved between 20-50%.<\/p><\/blockquote>\n

\n

Caching<\/em> assets is also related to this conversation, as nothing is faster than a browser that doesn’t have to request an asset at all! There is plenty of information on that around the web (or in books<\/a>), but we may just do a post on it soon with some tricks.<\/p>\n","protected":false},"excerpt":{"rendered":"

These are both things that you do to assets on your website (things like .css files and .js files). They are both things that reduce the size of the file, making it more efficient in crossing the network between servers and browsers. As in, good for performance. The network is the speed bottleneck of the […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":251495,"url":"https:\/\/css-tricks.com\/http2-real-world-performance-test-analysis\/","url_meta":{"origin":205543,"position":0},"title":"HTTP\/2 – A Real-World Performance Test and Analysis","date":"February 21, 2017","format":false,"excerpt":"Perhaps you've heard of HTTP\/2? It's not just an idea, it's a real technology and slowly but surely, hosting companies and CDN services have been releasing it to their servers. Much has been said about the benefits of using HTTP\/2 instead of HTTP1.x, but the proof the the pudding is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":158177,"url":"https:\/\/css-tricks.com\/grunt-people-think-things-like-grunt-weird-hard\/","url_meta":{"origin":205543,"position":1},"title":"Grunt for People Who Think Things Like Grunt are Weird and Hard","date":"December 11, 2013","format":false,"excerpt":"Front-end developers are often told to do certain things: Work in as small chunks of CSS and JavaScript as makes sense to you, then concatenate them together for the production website. Compress your CSS and minify your JavaScript to make their file sizes as small as possible for your production\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":294015,"url":"https:\/\/css-tricks.com\/in-search-of-a-stack-that-monitors-the-quality-and-complexity-of-css\/","url_meta":{"origin":205543,"position":2},"title":"In Search of a Stack That Monitors the Quality and Complexity of CSS","date":"August 12, 2019","format":false,"excerpt":"Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have excellent linters like StyleLint and CSSLint, but they only help at preventing mistakes at a micro level. Using a wrong color\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/css-sparkle-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":337261,"url":"https:\/\/css-tricks.com\/fixing-a-slow-site-iteratively\/","url_meta":{"origin":205543,"position":3},"title":"Fixing a slow site iteratively","date":"April 1, 2021","format":false,"excerpt":"Site performance is potentially the most important metric. The better the performance, the better chance that users stay on a page, read content, make purchases, or just about whatever they need to do. A 2017 study by Akamai says as much when it found that even a 100ms delay in\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/website-xray-blueprint.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":265703,"url":"https:\/\/css-tricks.com\/css-basics-syntax-matters-syntax-doesnt\/","url_meta":{"origin":205543,"position":4},"title":"CSS Basics: The Syntax That Matters & The Syntax That Doesn’t","date":"February 12, 2018","format":false,"excerpt":"When you're starting to play around with CSS at the very beginning, like any other language, you have to get used to the syntax. Like any syntax, there are a bunch of little things you need to know. Some characters and the placement of them is very important and required\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/syntax-basics.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363179,"url":"https:\/\/css-tricks.com\/subsetting-font-awesome-to-improve-performance\/","url_meta":{"origin":205543,"position":5},"title":"Subsetting Font Awesome to Improve Performance","date":"February 17, 2022","format":false,"excerpt":"Font Awesome is an incredibly popular icon library. Unfortunately, it\u2019s somewhat easy to use in a way that results in less-than-ideal performance. By subsetting Font Awesome, we can remove any unused glyphs from the font files it provides. This will reduce the number of bytes transmitted over the wire, and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/subsetting-fonts.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/205543"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=205543"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/205543\/revisions"}],"predecessor-version":[{"id":205640,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/205543\/revisions\/205640"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=205543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=205543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=205543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}