Minify is a programming term that refers to a process of removing any unnecessary characters that are not needed for the code to execute. Minifying code speeds up your page loading, which results in happy visitors and search engines. In short, this process will remove unnecessary white space characters, new line characters, comments and block delimiters from your code. These types of characters are used for readability and visual purposes, but they are not required for the code to execute properly. In the final result, minification will speed up downloading, parsing, and execution time.
What you’ll need
Before you begin this guide you’ll need the following:
- FTP access
Step 1 — Locating unminified CSS, HTML, JavaScript files.
For this step, I would recommend using GTMetrix. I have analyzed a quickly created WordPress and received a list of files that can be minified.
Step 2 — Replacing unminified files
IMPORTANT! Safety always comes first. Before making any further changes, make sure to perform a backup of your current WordPress site or a backup of the separate files that are going to be replaced.
Option 1. Manual replacement
The fantastic thing about GTMetrix is that you can immediately see the optimized version of CSS, JS and HTML files by pressing the See optimized version button next to the filename. After that, the optimized file will either be downloaded or opened in the browser. Using any FTP client, replace the old files with the exact same filename as before or copy and replace the code itself.
Option 2. CMS plug-ins
WordPress users can use plugins such as Better WordPress Minify or W3 Total Cache to reach the same goal. You can refer to this guide for detailed instructions on how install W3 Total Cache plugin.
Option 3. CloudFlare
CloudFlare – a free service that speeds up and protects your site by being a proxy between the visitors and website hosts server. It offers protection against DDoS attacks and best of all, it’s free. One of the features that the free plan includes is a tool to minify CSS, HTML and JS. You can enable minification of resources via Performance -> Auto-Minify section:
IMPORTANT! It is not recommended to use CloudFlare’s Auto Minify if you are already using a minification plugin such as W3 Total Cache. Also, CloudFlare does not minify third-party scripts and links (Facebook, Twitter).
Step 3 — Testing the changes
After replacing the files/code with the minified version, the last thing left to do is to test. This can be done by running another analysis with GTMetrix. For comparison, here are the results after replacing old files with the minified ones:
Conclusion
In this short guide, we have learned how to increase the performance of your website by minifying CSS, JavaScript and HTML.
Related guides:
Improving website performance: leveraging browser cache
Improving website performance: gzip compression
Improving website performance: serving scaled images
Improving website performance: Using Progressive JPEG images
Add Comment