Improving Website Performance - Minifying CSS, HTML and JavaScript

Introduction

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

Table of Contents

Step 1 — Locating unminified CSS, HTML, JavaScript files.
Step 2 — Replacing unminified files
Step 3 — Testing the changes

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.

minify-css-1.
minify-js-1.

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:

CloudFlare Performance section.

CloudFlare Auto Minify.

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:

minify-css-2.
minify-js-2.