Minify CSS, HTML and JavaScript – Google Page Speed Insights
This is part of our guide on improving page speed using the Google page speed insights developer tool. In this article we are discussing the Minify CSS, HTML and JavaScript section.
When CSS JavaScript and HTML are written it is common practice for good coders/developers to insert comments and adequate spacing making it easier for others to read and where need make any changes required in the future. While this makes perfect sense, and is still encouraged, it can increase the size of the files considerably.
Where speed is concerned these spaces and comments that don’t actually add anything from a computers point of view and if you remove them then a smaller file can be downloaded much faster. It may sound trivial but any saving in time, however small, can be very important when you consider the following statistic from Kiss Metrics.
“47% of consumers expect a web page to load in 2 seconds or less.”
And
“25% of users will abandon a site that takes more than 4 seconds to load”
How To Minify CSS, HTML and JavaScript?
Minifying is the process of removing everything from the file that is ignored by a computer, so any comments or spaces are removed and this can, in many cases, reduce the file to half its original size.
The two images above are of the same code for our 404 error page. The image on the left is the original HTML of the file and can’t fit on to the screen but you can see that it takes 103 lines of code despite being a relatively small file (57.1 kilobytes). The image on the right show the same code after it has been minified and as you can see it has been compressed onto a single line and easily fits onto just over half the screen.
The memory saved from this html file wasn’t much (about 0.80 kilobytes) as stated this was a small file and html tends to have less space and comments than CSS. In comparison my CSS file for the main site was 14,435 lines long and was 331 kilobytes. After I minified the file it became 219 kilobytes which is just over a third of its original.
Options to minify
If you are using a WordPress site there are several plugins you can use that will you automatically minify your code files for you.
Or you can use a CDN, many of which have many options to automatically minify your content as well as a host of other useful tools. I personally use Cloudflare and would definitely recommend them to everyone.
We will talk about CDN’s in another article. If you are interested in site speed and increased security, and let’s face it who isn’t, using a CDN is a must.
Additionally Google actually supplies you with a minified copy of your files you can simply replace the originals with using an ftp client. Or there are many online tools you can use to do the same job. I would however recommend you keep a copy of the originals. If you wish to make changes to the files later they are incredibly difficult for humans to read. Additionally I would recommend you follow the Reduce Server Response Time section of the tutorial before minifying any files.
Improving page speed using the Google page speed insights developer tool
Pingback: Google Page Speed Insights - Improve User Experience