Minify JavaScript and CSS in WordPress to Increase Page Load Speed.
A while back, I did a lot of study and research, particularly for WordPress blogs or websites, to improve my blog page load speed. Internet is full with lots of tutorials, tips and tricks to increase webpage speed. And one can easily get confused which method should be used or which should not be used. Trust me, I have tried almost all the methods and finally I come up with an easy solution to improve page speed. I found there are two easy methods to minify JavaScript and CSS of your WordPress website, which will intensely increase your page speed. I have tried these on my blog and got Google PageSpeed Insights Score from 68 to 93 and YSlow Grade from 70 to 92.
What is Minifying or Minification?
As its name implies, minification is a process to reduce size of your website CSS, JavaScript and HTML content to its optimum size and reduce number of request counts. Minification combines your website’s different CSS files in to one file, minification process does same for JavaScripts and HTML files, combines different files into one respective file.
Minifying process particularly removes any unwanted code from your website like unused spaces that is written in your CSS, unnecessary line-breaks in your HTML or unnecessary code written in your JavaScript. Therefore minification is very crucial and helpful to increase your page load speed. Your website’s CSS, JavaScript and HTML markup size should be minimum and number of external requests should be as less as possible in order to increase your webpage load speed.
But the problem with WP-Minify is that it loads the minified JS and CSS at the top. That means, when you will see the HTML source of your blog page, you will find minified JS and CSS loading even before the title and description meta. It is totally fine with the users but in case you are serious about throwing title, description, keyword meta data at the top of the page for SEO purpose, then I would suggest you to use HTML tags.
The developer of WP-Minify plugin named Thaya has added html tags from the version 0.8.0. Here is the template tag of the plugin.
<!– WP-Minify JS –>
<!– WP-Minify CSS –>
Paste the above code in the HTML template file i.e. header.php to place the minified JS and CSS at a location as per your need. I would recommend to add them just below the normal CSS and JS call in the header section of the template file.
This way you can place minified JS and CSS on your blog to let them load as per your choice. This will give you more control on the object loading for your blog as well as will let you serve SEO related meta data at first to the search engines like Google and Yahoo
REMOVE RENDER-BLOCKING JAVASCRIPT AND CSS IN WORDPRESS
Another reason we should remove Render Blocking JavaScript and CSS is, Web Page loading speed is a matter. It’s proven and officially announced by Google that, Decreasing page load time can rank your webpage better in search engine and Improve user experience. It also increases revenue as well.
So, Why you are still waiting and haven’t removed render blocking JavaScript & CSS from your web page. There can be two reasons, one is, you don’t know how to remove render blocking JavaScript & CSS and another is, You are still not informed about it. That’s why, through this article, I am informing you and showing you how to fix this issue in WordPress.