Speeding up a website with Minification

Minification can significantly reduce the size of your web pages and related CSS and Javascript files, resulting in faster web page load times.

If you are aiming to reduce your web page load time, Minification is a great place to start.  And, in turn, by minifying your HTML, CSS, and JavaScript, you’ll boost up your Google PageSpeed Insights score by a couple of points.

What is Minification

Simply put, you’re making the page or resource smaller by stripping out unrequired text, such as whitespace and comments, which only tend to only serve the purpose of being able to read or edit the code.

Why you should Minify your Website

As of 2016, nearly 60% of searches in Google were performed with a mobile device.  As more users begin to surf the web using a phone or tablet, the importance of ensuring you are making your website as fast as possible becomes ever increasingly more critical.

The reason for this is that mobile phones over an LTE (or even slower 3G) data connection are only a fraction as fast to load your web pages as a desktop computer would on wi-fi.  As desktop is now considered a “minority” of devices using it is concerned with providing the best results tuned for mobile devices.  And those results, in the search pages, must be optimized not just for content relevancy, but also for how well they display and load on a mobile device.

And such, Google is putting more weight on how fast your web pages load, as a part of its ranking algorithm.  We saw a similar push for mobile optimization when Google put more value on websites that were mobile responsive.

As mobile devices become even more ubiquitous, more and more emphasis will be placed on how well your website is optimized for those devices, in every aspect of the concept of “optimization”.

Before You Minify

About the only downside to minifying your resources is that if the code is no longer readable and effectively un-editable (because you can’t read it).  So, when you’re minifying your content, you should consider:

  • Am I ever going to need to edit this resource again?
  • Can I undo the minification of my resource?
  • Is keeping a backup that I edit in the future, and then re-minify, realistic?
  • Should I automate the minification of my web pages, CSS, and Javascript?

Static Unchanging Resources

There are some CSS and Javascript files that you will likely never need to modify, that are completely safe (and recommended) that you minify.   These resources would fall into the category of “libraries” or “modules” such as “jQuery”, “Bootstrap”, “Mootools“, or any other third party enhancement script or CSS that enriches your website.   You are unlikely to ever edit these files, and in fact, many of them come pre-minified.  If your local copy is not minified, you should definitely minify them — you could save yourself hundreds of kilobytes per file.

Minification and Un-Minification

There are online web services available to both manually minify and manually un-minify (or beautify) your resources.  It’s as simple as copying in your code (either original or un-minified) to their page, and clicking a submit button.

You’ll then copy that code back to your local copy of your website and publish it up to your server.

Keeping a Backup of Your Originals

You should absolutely keep a backup of your original CSS and Javascript files.  It is recommended that you name the minified version of your file with a “min”.

For example, the original file may be called:


And so the minified file should be named:


You would then change the reference in your HTML code to the new “/scripts/my-javascript-resource-1.2.0.min.js” file.

The same would go for any CSS files.  This will allow you to make changes in the future to any CSS or Javascript in the non-minified (original) versions of the file, which you can in turn then later re-minify and copy into the .min version of the resource.

However, keeping a backup of your HTML is more problematic.

Keeping a Backup if running a Traditional Website

If you are using a website editor such as Microsoft Expression Web or Adobe Dreamweaver, critical instructions, for the inclusion of library assets and the linking to dynamic web templates, are stripped from the HTML when the files are minified.  It means that the files are no longer editable using those website editors.

When using a website editor such as Expression Web or Dreamweaver, if you want to minify your HTML, you’ll need to keep a completely separate copy of your website as your working copy.  In the working (or “development”) copy, none of the HTML is minified, whereas in the “production” folder, your files would all be minified.

Minifying Web Pages in CMS systems such as WordPress

When running a CMS such as WordPress, minifying the HTML is usually an on-the-fly (meaning, happening at run-time) procedure that does not require that you keep a backup of your web pages.  And because all pages in a WordPress (or other CMS) are dynamically generated, it would be extremely difficult to go through each template and plugin and manually minify any HTML that may be generated.

Automating the Minification of HTML, CSS, and Javascript

If you like the idea of automating the process if minifying your web pages, and their dependent CSS and Javascript, you could save yourself an incredible amount of time.

Manually minifying means that each time you make a change to your website, you will need to re-minify at least one (if not many, in the case of updating a global asset file in a traditional website) file.  Automating the minification process means that you won’t have to worry about making sure your files are re-minified, because it just happens automatically for you.

There are two tools that can automate the minification of your website, along with applying other optimization techniques to speed up your web pages.

Numo Accelerator is a PageSpeed optimization plugin for traditional websites such as those edited with Adobe Dreamweaver or Microsoft Expression Web.

Pegasaas Accelerator is a speed optimization plugin for WordPress.  In addition to minification, it also defers render blocking resources, enables GZIP and browser caching, builds crititical-path CSS, and optimizes images.


Leave a Reply

Your email address will not be published. Required fields are marked *