Compression of html, css and js files on a website

Question

I am really sorry for the title of the question. I had no idea what proper title shall I give to this question.

The question is referring to this link:

http://iarouse.com/admin-transform-alt/dist-v1.2.1/index.html#/pages/signin

This is priview of a template. When I open dev tool in Chrome and check the network I/O, on the size column there it shows me different file size and content size. for example ui.js is about 200kb of size but it has 800kb of content.

How could that be? What kind of compression is it?

Also when I downloaded this template and ran on my local, it showed the same file size as well as the content size. :( How can I get this type of thing in my website. The template is pretty and needs a lot of time to load. An kind of leads or info would be of great help.

Answer 1

The size is smaller than the content because of compression, probably gzip. Gzip is regularly used with http to make text resources faster to load. Most web servers support gzip compression. Look at the documentation for your web server to find out how to turn it on.

Answer 2

Okay found it!

This is a gzip compression of HTML, CSS and JS files which typically saves around fifty to seventy percent of the file size.

Source: http://www.feedthebot.com/pagespeed/enable-compression.html

Now since mine is running on a NodeJs server which is using Express, I enabled this by adding the following line to app.js file.

app.use(express.compress());

Refer: Node.js: Gzip compression?