Minify Gzip

Minify vs gzip

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

  1. Network transit time
  2. Response preparation (at server)
  3. Response parse (at client)
  4. 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 – 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.

Advertisements

One thought on “Minify vs gzip

  1. Pingback: Generate Gzipped Assets in Rails 4.2 + | Software Coolie

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s