How to Minify Your WordPress Site’s CSS, HTML & JavaScript

The Way to Minify Your WordPress Site's CSS, HTML & JavaScript

Minification is a very simple concept that is frequently advocated as a step towards speeding up your site. But the truth is, it frustrates many website owners no end when they attempt to minify their files and wind up breaking their website.

So what gives?

Minification often demands a great deal of experimentation. When there are lots of solutions available, the way they behave will vary from site to site based on what plugins and theme you're using.

In this post, we will explore what minification is, its benefits, and some of the very popular minification alternatives available -- both plugins and manual -- to help point you to the ideal solution for your site.

What's Minification?
Websites are made up of lots of different files. If you test your website speed with Google PageSpeed Insights, you may find the recommendation to minify your HTML, CSS and JavaScript files.

The issue? As humans, we compose the code in these files so we can read, but computers do not care about characters such as opinions, formatting, white space and new lines. So when they come across these unnecessary characters in site files they ignore them.

That's where minification enters the picture. Minification is a programming term that basically means eliminating any unnecessary characters that are not needed for code to do. Minification operates by analyzing and rewriting code to decrease the overall size of your documents, thus reducing the entire size of your site so it loads faster in the user's browser.

For example, here's some CSS you might find in a stylesheet:

And here's minified version of the aforementioned CSS example:

A:linkcolor:graya:visitedcolor:greena:hovercolor:#663399a:activecolor:teal
See how much more compressed the code is?

Minification is performed on a web server in front of a response is sent. After minification, the web server uses the smaller minified -- and much faster -- documents in place of their original ones, leading to reduced bandwidth without sacrificing functionality.

As SEO expert Yoast clarifies, minifying files can save up to 30-40%, or even 50 percent of file size sometimes.

Why You Should Minify Your Own HTML, CSS and JavaScript Files
Having a speedy website not only makes Google happy -- also helps your website rank high in search but it provides a much better user experience for your site visitors.

There are various stats that produce clear why website speed is crucial: 40% of people will not wait 3 minutes for your own homepage to load and Google recommends that sites should load within 2-3 minutes.

Minification has many benefits:

Smaller files means the total download size of your site is decreased,
Site visitors will have the ability to load and get your pages faster,
Website visitors will have an identical user experience without having to download larger files, along with
Website owners will get reduced bandwidth prices as less data is transmitted over the network.

How to Minify Your Own HTML, CSS and JavaScript Files
Before minifying your website's files, it is a good idea to conduct a backup. Better still, minify your documents onto a staging website so you can check everything is in working order before making changes to your live website.

Additionally, it is very important to benchmark your page speed before and following minifying your files so that you can compare the results and see if minification has made any effect.

My favorite speed test website is GTmetrix. It assesses your webpage rate performance using both Google PageSpeed Insights and YSlow, an open resource performance testing instrument. It then generates scores and provides recommendations for website optimization improvements.

Other excellent speed evaluation tools I can recommend comprise Pingdom Website Speed Test and WebPageTest and Test your cellular speed.

Minifying Files Manually
Minifying files manually takes a significant quantity of time and energy. I mean, who's got the time to eliminate individual white spaces, lines and unneeded code from documents? Boring! In addition, it allows more room for human error. I wouldn't advise this method for minifying files.

Fortunately, there are lots of free internet minification tools available that let you copy and paste code from and to your site. Following is a concise collection of tools and I invite you to research other options which may work better to your website.

1. Can Peavy's HTML Minifier
Will Peavy's Minifier tool.

To use the application, just paste your HTML into the text area, such as any CSS of all JavaScript on your markup, and then click the "Minify" button. To ensure that your scripts operate after minification, it's recommended that you terminate JavaScript statements with a semicolon and use * * syntax for comments.

2.CSS Minifier
The online CSS minification tool

Another free tool, CSS Minifier operates by minifying CSS that you simply copy and paste into the "Input CSS" text section. There are choices for downloading the minified output for a file. For programmers, this tool also offers an API.

3. Compress JS
JSCompress is an online JavaScript compressor that lets you compress and minify your JS files by around 80% of the original size. To use it, copy and paste your code or upload and combine a number of files and then click "Compress JavaScript". This instrument is based on UglifyJS 3 and babili-standalone.

For developers looking for more innovative options, Google recommends these HTML, CSS and JavaScript minification tools:

CSSNano -- A modular minifier, built on top of the PostCSS ecosystem.
csso -- A CSS minifier with structural optimizations.
Google's Closure Compiler is a marketing tool for JavaScript. Instead of compiling from a source language into machine code, it compiles from JavaScript to make better JavaScript. It parses your code, assesses it, removes dead code and rewrites and minimizes what's left. This instrument assesses syntax, variable references, and forms, and warns about common JavaScript pitfalls.

Minifying Files with Plugins
There are some terrific plugins available, both free and premium, which can minify your files without you having to perform manual actions.

Note: For this list, I've only included free plugins that are available in the WordPress Plugin Repository which are up-to-date and analyzedcompatible with the latest versions of WordPress. For premium choices, scroll down. /

1. HTML Minify
This easy, lightweight and no-hassles plugin allows you to minify the HTML output of your website. To use it, all you have to do is install and activate the plugin and it will automatically minify your mark without needing to configure any settings.

2. Minify HTML
I adore the WordPress.org description for this plugin: "Ever look at the HTML markup of your site and notice how sloppy and amateurish it looks?" This plugin brightens up and minifies disorganized markup.

Unlike the HTML Minify plugin, this tool provides more options. It includes optional minification for JavaScript and CSS, though it doesn't mess with text places or preformatted text. Additionally, there are options for removing HTML, CSS and JavaScript remarks (leaving MSIE conditional comments), eliminating unnecessary XHTML final tags from HTML5 void elements, and eliminating unnecessary comparative schemes and domain names from hyperlinks.

3. Merge + Minify + Refresh -- WordPress Plugins
This plugin will do more than just minify your code. It combines your CSS and JavaScript files and then minifies the generated files using Minify (such as CSS) and Google Closure (for JavaScript). Minification is performed via WP-Cron so that it will not affect your site rate.

When the contents of your CSS or JS files vary, they are re-processed so there is no need to empty your cache. Multisite consumers will be delighted to know that this plugin works well on networks.

4. JCH Boost
The JCH Optimize plugin.

JCH Optimize includes a lot of nice features for a free plugin: It unites and minifies CSS and JavaScript, minifies HTML, there is GZip compression for unites files, sprite generation for background pictures, and you can exclude particular files from blending to resolve conflicts.

There is a pro version available with much more optimization features, such as loading JavaScript asynchronously, optimizing CSS delivery to eliminate render blocking, CDN/cookie-less domain support, and idle loading and optimization to get pictures.

5. CSS Minify
The CSS Minifier plugin.

Minifying your own CSS on this plugin could not be any simpler -- simply install, activate, go to Settings > CSS Minify to enable only 1 option: Optimize and minify CSS code.

The code inside this plugin was forked in the favorite Autoptimize plugin (more on this plugin below). The plugin's author Peter Pfeiffer has a similar plugin available for JavaScript, Minify JavaScript.

6. Fast Velocity Minify
The Speedy Velocity Minify plugin.

With more than 20,000 active installs and a five-star evaluation, this is one of the more popular options out there for minifying files. There, you'll find a stack of options for configuring the plugin, such as innovative alternatives for developers JavaScript and CSS exceptions, including CDN alternatives, as well server details.

The plugin performs minification in real time on the front-end and just during the first uncached request. When the initial request is processed, any other webpages that need exactly the same set of CSS and JavaScript will be served that same static cache file.

7. Autoptimize
With over 400,000 active installs, Autoptimize is easily the most popular minification tool at the WordPress Plugin Repository.

Autoptimize may aggregate, minify and cache programs and fashions, inject CSS into the page header by default and also transfer and defer scripts to the footer. There are lots of advanced options for programmers and also an extensive API available so you can you tailor made Autoptimize to satisfy your website's special needs.

8. Hummingbird Page Rate Optimization
Hummingbird is a relatively new plugin to the WordPress Plugin Repository, having started out as a premium plugin. The free version features a fantastic group of site optimization programs, including minification, permitting you to minify, position and combine files for best performance.

There's also a excellent scanning quality that allows you to test your site's performance and receive actionable recommendations for improving your website, directly from inside the plugin.

Minification for a Feature in WordPress Caching Plugins
Minification is normally a standard feature you'll find in caching plugins. Here are the plugins I've tested and will recommend:

WP Rocket
W3 Total Cache
WP Super Cache
Conclusion
I hope this article has demystified minification for you and supplied a solid understanding of exactly what it is and the way you can apply it to your site.

It's important to remember that minification is more of a fine-tuning measure -- you may see a little progress in your site rate, but it will not be important. Nevertheless, it is a best practice worth implementing in addition to other performance and optimization methods, like blending files.

Also, make sure that you configure, test, reconfigure, retest, tweak and assess what works best for your website when minifying your documents because every website is different.

If you enjoyed this post, have a look at 6 Finest WordPress Caching Plugins Compared for more advice about how best to speed up your website.
Read More:- Free HTML editor