How to minify WordPress files: HTML, CSS and Javascript

by

HOW TO MINIFY WORDPRESS FILES: HTML, CSS AND JAVASCRIPT

Minification is one of those things you’ll often see recommended in articles about speeding up your WordPress site.

It’s also one of those things that can easily break your WordPress site, causing frustration and headaches for the average WordPress owner.

So what exactly is minification and should you use it on your WordPress site?

What Is Minification In WordPress?

I didn’t know this, but minification is actually a real word. It doesn’t show up in many spell checkers but it’s been around since the 19th century.

Minification in our context means making a file as small as possible without affecting how it works. It does this by removing all unnecessary content in the file.

Unnecessary content includes

  • Spaces
  • Code comments
  • Formatting
  • Line breaks
  • Carriage returns

Minification usually also includes concatenation, which simply means joining together. If you have fifteen CSS files on your website, these can be joined together into one. Instead of downloading those fifteen files from your web server, a browser only needs to download one. Obviously, this reduces the number of round trips to the server.

The first important thing to understand is that minification is not going to give you the biggest speed gains on your site. Other things will have a much bigger impact than minification on your site, such as

If you haven’t used any of these tactics to speed up your WordPress site, follow the links above and do them first. Then you can come back here and use minification as a fine-tuning tactic.

The best way to understand how minification works is with an example.

How Minification Works With Examples In HTML And CSS

WordPress loads many files to present a single page of your website in a browser. Let’s say one of those files is a HTML file containing the following code (this is for demonstration purposes only so it doesn’t matter what the code does or why):

<html>
<head>
<style>
/* styles for front page paragraph */
.front-page { font-size: 120%; }
.front-page { width: 85%; }
</style>
</head>
<body>
<!-- front page paragraph: START -->
<div>...SOME CONTENT IN HERE...</div>
<!-- front page paragraph: END -->
<script>
afunctioncall(); // a call to some function
</script>
</body>
</html>

The code above contains 363 characters, including whitespace.

There are a few things to note about the code above:

  • Comments (in red) are useful for a developer to understand why something was done. But they won’t affect the code meaning and they have no impact on the web page content – they can be removed.
  • Carriage returns and line breaks are useful for the same reason. But again, they’re meaningless to your browser – they can be removed.
  • Other whitespace like spaces between characters are again convenient for humans. And again meaningless to your browser – a lot of them can be removed.
  • A smart minification algorithm would notice that there are two lines defining a style for the same element, .front-page. These can be combined.

When we apply what we’ve noted above to our code, we get the following:

<pre><html><head><style>.front-page{font-size:120%;width:85%;}</style></head><body><div>...SOME CONTENT IN HERE...</div><script>afunctioncall();</script></body></html></pre>

Now the code contains 162 characters, a 56% reduction. It’s less than half the original size.

It’s clear to see that doing this on all the files that make up your website can reduce the size of files to be downloaded by a not-so-insignificant amount. Your web server can now send this minified file to a visitor’s browser instead of the original file.

Benefits of minification

  1. Your WordPress website loads faster for your visitors because only data essential to the web page is downloaded.
    • Your site uses less bandwidth per visitor because less data is transmitted over the network.

What can’t be minified:

Minification is only useful for text based files, i.e. all scripts and style sheets including HTML, PHP, CSS, JS etc.

Images, audio and video files are already compressed. Removing redundant information from them is unnecessary.

It’s also important to note that total minification is not always a good idea. It can break some things on your site, in particular things like image grid layouts and image sliders. For this reason, you should carefully test the level of minification you can safely use on your site.

How to minify files in WordPress

Minify using plugins

Most caching plugins include a feature to minify files. We use either WP Rocket and the relative new-comer Swift Performance on our clients’ sites.

There are also plugins specifically for minification but I’ve honestly never found the need to try them.

Manual minification

Yes, it is possible to minify code manually. For large scale programming projects it can have an impact but this isn’t usually practical in normal web development.

It can be done by

  • Removing unused code
  • Shortening variable names
  • Shortening function names

Of course, this should be done in such a way that the code doesn’t become unreadable for anyone else reading it.

Conclusion

Reducing the size of your web page is an important part of WordPress optimisation. First you should use high-impact techniques like image optimisation and caching. Once you’ve done those, minification is a useful way to get smaller speed gains with just a little effort on your part.

Minification is just one of the many items included on our speed checklist that we use on every website we look after. You can download that checklist right here.

Sources

https://developers.google.com/speed/docs/insights/MinifyResources
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#minification-preprocessing–context-specific-optimizations
https://wp-rocket.me/blog/minification-explained-in-plain-english/