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?
Static Unchanging Resources
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
For example, the original file may be called:
And so the minified file should be named:
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.
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.
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.