{"id":2071,"date":"2019-04-08T09:54:51","date_gmt":"2019-04-08T09:54:51","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=2071"},"modified":"2019-07-12T23:45:05","modified_gmt":"2019-07-12T23:45:05","slug":"how-to-minify-your-wordpress-sites-css-html-javascript","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/how-to-minify-your-wordpress-sites-css-html-javascript\/","title":{"rendered":"How to Minify Your WordPress Site\u2019s CSS, HTML & JavaScript"},"content":{"rendered":"\n

Minification is a simple concept that is often recommended as a step towards speeding up your website. But the reality is, it frustrates many site owners no end when they attempt to minify their files and end up breaking their site.<\/p>\n\n\n\n

So what gives?<\/p>\n\n\n\n

Minification often requires a lot of experimentation. While there are many solutions available, how they behave will vary from site to site depending on what theme and plugins you are using.<\/p>\n\n\n\n

In this post, we\u2019ll explore what minification is, its benefits, and some of the more popular minification solutions available \u2013 both manual and plugins \u2013 to help point you to the right solution for your site.<\/p>\n\n\n\n

What is Minification?<\/h2>\n\n\n\n

Websites are made up of a lot of different files. If you test your site speed with Google PageSpeed Insights, you might get the recommendation to minify your HTML, CSS and JavaScript files.<\/p>\n\n\n\n

The problem? As humans, we write the code contained in these files so we can read them, but computers don\u2019t care about characters like comments, formatting, white space and new lines. So when they come across these unnecessary characters in website files they ignore them.<\/p>\n\n\n\n

That\u2019s where minification comes into the picture. Minification is a programming term that basically means removing any unnecessary characters that aren\u2019t required for code to execute. Minification works by analyzing and rewriting code to reduce the overall size of your files, thereby reducing the total size of your site so it loads faster in the user\u2019s browser.<\/p>\n\n\n\n

For example, here\u2019s some CSS you might find in a stylesheet:<\/p>\n\n\n\n

a:link {\n  color: gray;\n}\n\na:visited {\n  color: green;\n}\n\na:hover {\n  color: rebeccapurple;\n}\n\na:active {\n  color: teal;\n}<\/code><\/pre>\n\n\n\n
And here\u2019s minified version of the above CSS example:
<\/p>\n\n\n\n
a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}\ufeff<\/code><\/pre>\n\n\n\n
See how much more compressed the code is?<\/p>\n\n\n\n
Minification is performed on a web server before a response is sent. After minification, the web server uses the smaller minified \u2013 and much faster \u2013 files in place of the original ones, resulting in lower bandwidth without sacrificing functionality.<\/p>\n\n\n\n
As SEO expert Yoast explains<\/a>, minifying files can save up to 30-40%, or even 50% of file size in some cases.<\/p>\n\n\n\n
Why You Should Minify Your HTML, CSS and JavaScript Files<\/h2>\n\n\n\n
Having a fast website not only makes Google happy \u2013 and helps your website rank higher in search \u2013 but it provides a better user experience for your site visitors.<\/p>\n\n\n\n
There are many stats that make clear why site speed is crucial: 40% of people won\u2019t wait 3 seconds for your homepage to load<\/a> and Google recommends that sites should load within 2-3 seconds<\/a>.<\/p>\n\n\n\n
Minification has many benefits:<\/p>\n\n\n\n