Minification is a concept of reducing the size of your web page, which results in speeding up your website. It refers to the process of removing unnecessary resources without affecting how the resources are processed by the browser. You can accomplish this by removing the unnecessary white spaces, codes, lines, characters from the source code. Google recommends minifying CSS and JavaScript files to ensure faster page load speed. So, if you are wondering how to minify JavaScript and CSS in WordPress without plugin, keep reading this guide. Here you will find everything you need to know about minifying these unwanted resources.
How to Minify JavaScript and CSS in WordPress Without Plugin
You may get a recommendation like minifying your CSS, and JavaScript files when testing your site speed in PageSpeed insights. The reason behind that is, due to the unnecessary resources, your page takes a huge time to load.
According to Yoast, minifying the JS and CSS files can save up to 30 to 40% or even 50% of file size in slime cases. Let’s see how it works. Here is an example of usual CSS that you may find in a stylesheet-
|
1
|
a:link { color: gray; } a:visited { color: green; } a:hover { color: rebeccapurple; } a:active { color: teal; } |
And, the minified version of the above CSS will look like this.
|
1
|
a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal} |
As you can see, the difference between the above two examples is significant. The minified CSS version takes much less space than the original version. Usually, minification takes place on the webserver before the browser request is sent.
So, once the minification is done, the web server will use the smaller and minified version of the CSS and JS files instead of the original ones. This results in faster page loading without any functionality loss.
So, here’s how to minify JavaScript and CSS in WordPress without plugins.
Back-Up the Entire Website
It is recommended to back up the entire website before starting the process of minifying your website’s CSS and JS files. Or, you can make a backup of individual files. Also, before making any changes to your live site, you can minify your files on a staging site. In this way, you can ensure everything is working in order.
Also, don’t forget to test your site speed with Google PageSpeed Insights and note down the score. It will help you to compare the scoring after the minification process.
Minifying Files Manually
Minifying the CSS and JS files doesn’t mean going through each file and removing the empty spaces, lines, and characters. This will take a huge amount of time, effort, and allows more room for human error. In that case, you can use the online minification tools that will help you to copy and paste codes from and to your site. Here are some of the popular tools-
- Minify Code
- CSS Minifier
- JavaScript Minifier
- CSS Compressor
- JSCompress
- Minify
These tools are pretty simple to use and have a user-friendly interface. Simply select the CSS minifier or JS minifier tab and paste your code. Then click on the minify or compress button and after a few moments, you will get the minified version of your CSS or JS file. Just copy it and transfer it to your original file.
Minifying via WordPress Dashboard
- Log in to your WordPress Dashboard and navigate to Appearance.
- Click on the Appearance menu and go to the Editor tab, then open the function.php file.
- Now, copy this Minifying Code and paste it to your function.php file.
- Click the Update File button at the bottom of the page, and it’s good to go.
Test the Page Speed
Use the speed testing tool to see how much minifying CSS and JS speed up your website’s loading speed. You can use Google PageSpeed Insights and compare the score with the previous score.
Final Verdict
Your website should load within 3 seconds or less. Minification of the website’s CSS and JS files is one of the essential ways to ensure this loading speed. As the file size becomes small after minification, the download size of your site will be reduced. Therefore, the site visitors can load and access your page faster.
Hopefully, you have already learned how to minify JavaScript and CSS in WordPress without plugins from this guide. So, start minifying your site’s CSS and JS files to improve the website performance and achieve a better page loading speed. Good luck!
