Minify CSS and JavaScript Files


Part One Chapter 08

CSS and JavaScript

Minifying files means removing unnecessary characters from code to reduce its file size, and it will result in improving page load speed.

  • All the comments and unnecessary spaces (including new lines, tabs, etc) are removed when a file is minified.
  • When minification is done on JavaScript files or CSS files, it will allow your mobile web pages to load faster as the size of the downloaded file is reduced.

Minification of CSS

The content of a typical CSS document may look like below, with a lot of spaces in between.

Body
{
background-color:#ffffff;
}
h1
{
color:blue;
text-align:center;
}

Leaving “Spaces” in codes makes it much easier for web developers during coding. When the “codes” are published to the web, “spaces” are unnecessary for CSS / JavaScript files anymore.

For the CSS document above, you can actually remove all the unnecessary spaces. The minified version of the CSS document will look like below.

body{background-color:#ffffff;}h1{color:blue;text-align:center;}

One of the free online tools that you can use to minify CSS documents is called Refresh SF:

  • refresh-sf.com

Minification of JavaScript

File size minification can also apply to JavaScript documents. The multi-line JavaScript codes shown below is a typical Google Analytics tracking code which has considerable spaces and new lines in between.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-63334315-1', 'auto');
ga('send', 'pageview');

Again, you can use the Refresh SF tool to remove all the unnecessary spaces and minify this JavaScript documents:

  • refresh-sf.com

Below is the minified version of the JavaScript.

  • The JavaScript codes are now all compressed in one single line.
  • The file size has been minified.
!function(e,a,t,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=a.createElement(t),s=a.getElementsByTagName(t)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-63334315-1","auto"),ga("send","pageview");

Good Practice

A good practice is to always keep a version of the normal non-minified document and a version of the minified document in two separate files.

  • You should use the minified versions of the CSS / JavaScript files on your actual mobile web pages on the web.
  • You should work from the non-minified versions of the files when making changes to JavaScript or CSS files.

For example, you should name the two versions of files differently:

File Type CSS Documents JavaScript Documents
Normal combined.css combined.js
Minified minify.css minify.js


Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book