Speeding up a WordPress site takes time. There are so many things you can improve in order to remove that one little fraction of a second from loading time. But, the speed of your site matters both from visitors' and search engines' perspective. And, although you will have to go through different techniques and plugins to make the best out of your site, it will be worth it.

If you aren't sure how well does your WordPress site perform online, we suggest to put it under rigorous tests; we listed thirteen powerful tools that will test speed and performance of your site.

By using any of the tests, you will get an overall score and things to consider improving. We already showed you ten simple and quick ways to speed up your WordPress site. If you open the article, you will see that minification of CSS and JS files is one the list. In today's article, we are going into a bit more details. We will show you how to Minify Css and JavaScript files manually, and also list two plugins that will help you speed up your site. Ready?

What is minification?

Before you get your hands dirty on the files, let's quickly see what does it mean to minify CSS and JavaScript files in WordPress. As you probably already know, there are dozens and dozens of files needed for WordPress to run properly. When you add new themes and plugins, the number just keeps on growing. Simultaneously, the speed of your website keeps on decreasing. Luckily, you don't have to worry much about the code that powers WordPress, themes, and plugins. But you should know that you can make those files smaller and thus increase the speed of your blog.

Minification is a process of removing unnecessary characters from code. The process will make the affected files smaller, but won't change its functionality.

When you minify CSS and JavaScript files in WordPress, you will remove things like white spaces, new line characters, comments, and block delimiters. For each character removed from the code, you will speed up your site just a bit. Here's a simple example of CSS code before and after minification process.

CSS code before minification

body {
margin:10px;
color:#333333;
background:blue;
}

Although this is much easier on the human eye, it uses characters that a machine doesn't need to interpret the code.

CSS code after minification

body{margin:20px;color:#333;background:blue}

To a computer, this code looks the same as the previously shown one. New lines aren't something that a computer needs to run the code properly. If you take a look at the color, you can see that we even removed a few numbers; a computer will still know the correct color. Notice that there isn't a semicolon after the last element. In this simple example, we removed a few characters and made the code smaller. Now imagine what happens when you have thousands of lines of code.

Minify CSS and JavaScript files manually

When working on a custom theme or plugin for WordPress, you will want to minify CSS and JavaScript files you are working on. In that case, you won't have to install additional plugins to do the job for you. Instead, you can quickly minify only the files you need. By doing this, you can allow yourself the luxury of typing the code that's easy on your eyes, and still make it as fast possible afterward. If you're more serious in coding, you'll want to consider using CSS and JS preprocessors. These sophisticated apps can help you write the code and also minify and crunch it after you export the files.

Manually minify CSS

• https://cssminifier.com
• http://www.cleancss.com/css-minify
• http://csscompressor.com

Manually minify JavaScript

• http://www.minifier.org
• https://jscompress.com
• https://javascript-minifier.com

Best minification WordPress plugins

Services we showed you above will do a great job with your custom code. But if you want to minify all files on your WordPress site, it would be practically ludicrous to go through each and every file there is on your server. We are happy to let you know that some fantastic free plugins can minify CSS and JavaScript file in WordPress for you. Let us show you the best ones.

Autoptimize

With more than 200,000 active installs, Autoptimize is one of the most popular choices when it comes to optimizing your WordPress site. Among other amazing features, the plugin can minify scripts, styles, and HTML. It will compress the files, cache them and move the code in order to speed up your site.

1. Install and activate the plugin
2. Go to Settings -> Autoptimize
3. Click the Show Advanced Settings
4. Check the Optimize HTML Code, Optimize JavaScript Code, and Optimize CSS Code options
5. Save changes

W3 Total Cache

This popular plugin does it all. Of course, the plugin will cache the files for you in the first place. But if you are interested in removing query strings from static resources, W3 Total Cache will do it for you. Similarly, it will minify CSS and JavaScript files, and it will even do the same for your posts, pages, and RSS. You just have to check it out.

1. Install and active the plugin
2. Navigate to Performance -> Minify
3. Make sure to keep the Rewrite URL structure checked
4. Enable HTML minify settings, JS minify settings, and CSS minify settings
5. Save all settings

As you can see, minification process is fairly straightforward. If you are using a WordPress plugin, you really don't have an excuse. Minify CSS and JS files on your site, and head back to online speed & performance test of your choice. We're sure you'll get a much better score and a thank you note from your visitors and search engines.

The post How to minify CSS and JavaScript files in WordPress to speed up your site appeared first on WP Loop.