How to Minify CSS and Javascript from WordPress site


According to Google ranking website loading speed is the most important factor. There are several ways to speed up WordPress site in which minification also plays a very important role. In this tutorial, I'm going to share how to minify Javascript and CSS in WordPress to improve website loading speed.





What is Minify and Why It is so Important?





Minification reduces the number of requests on your site by minifying javascript, CSS, and HTML. In simple words, it removes unwanted codes from your website.





So, minify CSS and Javascript is very crucial and helpful to make your site blazing fast. Also, Google recommends to Minify JavaScript and CSS files from a site. Faster loading website performs better in search engines result and also improve the user experience.





How to Minify CSS and Javascript in WordPress site





Page load speed is very important to get high ranking in Google search and increase traffic to your blog. To minify CSS and Javascript, first you need to know what is the current score of your website. There are so many tools available for web page analysis. But I will recommend Google PageSpeed InsightsGTmetrix and Pingdom. These tools give better results by analyzing your site.





So let's come directly to the main topic now…





There are so many ways and plugins available to minify CSS and javascript. But here I will minify javascript and CSS using the plugin.





#1. W3 Total Cache





W3 Total Cache is one of the most popular caching plugin available in the market. It takes your website performance to a new level.





The plugin comes with dozens of features including Minify. If you use W3 Total Cache on your site, you can reduce load time by reducing the size and number of CSS and JS files using its minify feature.





Just navigate to the General Settings tab and scroll to the Minify settings then follow the screenshot,





Minify JavaScript and CSS in WordPress to Increase PageSpeed




This is basic settings. For advanced settings click on the Minify tab under the performance tab and follow screenshot below.









And that’s it! It will start minify javascript and css from your site.





#2. Autoptimize





Autoptimize is the most popular plugin that optimizes HTML, JavaScript and CSS Code on your site. It improves your site performance to great extent.





First, install and activate this plugin. Once activated, click on Settings >> Autoptimize. This will take you to the settings page of the plugin where you need to check Optimize HTML Code, Optimize JavaScript Code, Optimize CSS. Follow the screenshot below,





Minify JavaScript and CSS in WordPress to Increase PageSpeed




When you click on Save button, it will start optimizing CSS, Javascript and HTML on your site.





Autoptimize plugin also allows you to remove query strings, emojis and Google Fonts and speed up your WordPress site.





Minify JavaScript and CSS in WordPress to Increase PageSpeed




The plugin reduces HTTP requests by optimizing HTML, CSS & JS file and improve PageSpeed. Furthermore, Autoptimize plugin works perfectly with WP Super Cache, HyperCache, Comet Cache or KeyCDN’s Cache Enabler.





#3. WP Fastest Cache





WP Fastest Cache is an another most popular plugin with 5star rating. This plugin also has a built-in minify option. Just, you need to check the box. Follow the screenshot below.





Minify JavaScript and CSS in WordPress to Increase PageSpeed




The plugin also enables Gzip compression that reduces the size of files sent from your server.





#4. Fast Velocity Minify





Fast Velocity Minify Plugin specially design for minifying javascript and CSS file on your site. Once the plugin is activated, click on Setting >> Fast Velocity Minify. This will take you to the plugin’s setup page. Here click on the “Setting” tab and follow the screenshot below,





Minify JavaScript and CSS in WordPress to Increase PageSpeed




Congratulation! Plugin will strat minify CSS and Javascript in your WordPress site.





#5. WP Super Minify





WP Super Minify plugin combines, minifies, and caches inline JavaScript and CSS files and speed up page loads to great extent. Just install and activate the plugin then check the option





  • Compress JavaScript
  • Compress CSS




Minify JavaScript and CSS in WordPress to Increase PageSpeed




And that’s it!





Final Thought





Here's the 5 best plugin that helps to minify CSS and javascript in WordPress site. You can use any plugin on your site.





If you use any of the listed cache plugins on your site, then You will not need to install a minify plugin separately. The cache plugin will handle everything such as from caching to minifying.





Have any thoughts regarding how to minify JavaScript and CSS in WordPress to Increase PageSpeed? We’d love to hear what you think about it.





We're done, and it's now your turn! Find this article helpful? Don't forget to share!


Comments

Popular posts from this blog

Fix Submitted URL marked ‘noindex’ in Google Search Console Tool 2018

Keep these 12 things in mind before applying to Google AdSense

Best Autoptimize Settings 2019 (Updated)