While discussing some common optimisation techniques for the web, a discussion ensued on why are assets both minified and gzip’ed? Is it good for performance? Is there a benefit in minifying and then gzipping? Is it okay to gzip for HTTPS? What the heck, does HTTPS have to do with compression?
The average size of top 1,000 web pages is 1961kb today, compared to 1720kb in Aug 2014. This is a 14% growth, in just a year! ~ HTTP Archive stats
Amount of data downloaded, by browsers to render a page has been steadily increasing. On the other hand, the performance requirements for end-users aren’t getting any better. Talking about web performance entails talking about 4 things
- Network transit time
- Response preparation (at server)
- Response parse (at client)
- Execution time (time taken to apply response on the page)
Given that, we can’t necessarily reduce data that gets generated, the only other way is to reduce its size for network transit (wire weight).
Minification is the practice of removing unnecessary characters (ex: comments, whitespace) from code
.. to reduce its size thereby improving load times. The browser can read and use it just like the original file. But since now, the wire weight is reduced, the page will load relatively faster. It also bundles various files into one, thus reducing the amount of requests to the web server.
Gzipping looks for repeating strings and replaces them with a pointer to the first occurrence
..The browser must decompress any compressed files before using them and this adds to the response parse time. We might have shaved off on some network transit time, but added to the response parse times.
Statistics to prove that gzip and minify is important
|Normal||Minified||Gzipped||Minified and gzipped|
|JQUERY 2.1.3||241.59 KB||82.34 KB||71.68 KB||28.87 KB|
|bootstrap-3.1.1.css||118 KB||98 KB||80 KB||17 KB|
gzip -6 file.js — the default compression level is
6 on a scale from
1 (fastest, but less compression) to
9 (slowest, but best compression).
A quick calculation gives us this.. On a 100 Mbps link,
|Time to download||Size|
|18.4319 ms||241.59 KB.|
|2.20261 ms||28.87 KB.|
Needless to say, that this clearly tells us, to ensure static assets should always be minified and gzipped both.