WordPress site optimization is very important for seo. If you check webmaster tool than you will now importance of minify css and javascript. Here we given some tips and tricks of wordpress optimization. For WordPress SEO get installed Smart wordpress SEO plugin to your wordpress website.

You decided to read this post because you must be interested in making your blog load faster! After all, who loves a blog that loads slow like a snail? No one, I can assure you that. Slow loading blogs have been noticed to have negative traits like- high bounce rate, lack of ‘repeating’ visitors, less user engagement etc. And believe me, page speed also has an impact on SERP (Search Engine Results Page) standings also! Thus, investing some time in minifying CSS (Cascading Style Sheets) and JS (JavaScript) files to boost page speed is highly recommended! And I’ll teach how to accomplish this task easily!

WordPress Optimization: Minify CSS and JavaScript

First of all, before we jump into the ‘optimization’ aspects, let’s know the baddies- CSS and JS files a bit closer. Err, they aren’t baddies actually. They are pretty crucial components of a blog. CSS lends a big hand in shaping up the ‘appearance’ of your blog. With it, you can turn your blog’s looks from Arun (myself) to Brad Freaking Pitt! I’m not kidding, CSS is that powerful!

Now, let us talk about JavaScript (JS). It is used to add functions to your blog. For example- JS can be used to deal with animations, interactive content (that requires action from user’s end), dynamic actions etc. In short, it is also freaking crucial to a blog’s functionality.

But they turn baddies when they affect page speed negatively. You see, these very useful files are also somewhat ‘bulky’ and ‘lazy’. If you observe the components of your blog, CSS and JS will fall into the category of ‘heavy’ files (well, most of them).

If you analyze your blog’s loading speed using Google’s PageSpeed Insights, you’ll see how render blocking JS and CSS slows your blog down. They are actually CSS and JS files belonging to your blog’s theme and plugins.

Let me explain how they reduce a blog’s loading speed. When a visitor visits your blog, his/her web browser is actually downloading the above mentioned files and HTML files of your blog one by one. Like- it grabs the themes CSS file, then it grabs a plugin’s CSS file, then it grabs another plugin’s JS file etc. This process goes on until all files are loaded up and your blog is rendered ‘completely’.

All this repeated downloading requires much time and resources (of your server). And, to make matters worse, sometimes the blog won’t load up until all the CSS and JS files are loaded (blocking files and scripts)! This is what actually makes a blog load insanely slow!

But, you can’t remove the above mentioned files also. Because, if you do so, your blog’s crucial aspects like its appearance, plugins’ functionality etc will be compromised, leaving your blog useless! So what’s the remedy, you might ask. This is when minifying comes handy!

What is minifying?

I described above about how a browser loads the heavy files one by one to render a blog. If this ‘one by one’ process could be merged to form a single process, it could save truckloads of time! And minifying is one such process!

Minifying is all about gathering these individual ‘calls for downloading files’ and merging them into one single file. Naturally, if we gather so many heavy files and gather them into a single file, it will become ‘super heavy’, won’t it? Actually no, the final stage of minifying process is to compress the hell out of this file and make it as ‘light’ as practically possible! This enables fast loading possible. And this process will also help solve the ‘render blocking JavaScript and CSS’ issue also!

How to minify CSS and JS files of a WordPress blog?

First of all, I’d ask my readers to take a PageSpeed test and take note of the CSS and JS files that are too slow. Then analyze which plugins does those files belongs to. After the analysis, ask yourself if you really need those plugins or not.

If you don’t need them, deactivate them and delete all files associated with them. This will not only get rid of unwanted files, but also free up server resources.

But, under normal circumstances, the above method won’t be of much use. Because we us use only those plugins, which are really useful. Removing them, fearing CSS and JS files is not practical! This is when the following tools and plugins come handy-

#1 Autoptimize

This plugin performs a number of tasks that makes your page literally ‘featherweight’! It gathers all files, compresses it, adds expires headers to it before delivering the final output!

To make matter easier, it forwards the style sheets file to the header and the script files to the footer. I’ve tried this plugin on my blogs and got amazing results. It won’t disappoint you at all!

The set-up is pretty easy. You just need to select the files to be optimized- CSS, JS and HTML. The default set-up will work fine for laymen. If you know how to play around with codes, you may give advanced settings a try! You may even exclude certain files from being minified. It works well with other caching plugins and creates no conflict at all. Overall, a great plugin!

#2 Better WordPress Minify

This plugin is pretty stable and ‘conflict free’. Works well with almost all essential plugins. It does tasks like- gathering files, minifying them and compressing them.

The customization options that it offers are impressive. It gives you much better control, you know. You can decide which component gets minified and which component is to be excluded. Plus this plugin relies on the PHP Library minify and uses WordPress’ enqueueing system. This makes the plugin stable, which I mentioned above.

#3 W3 Total Cache

Many rate this as the best ‘Optimization’ plugin out there for WordPress blogs. Basically, it is a plugin meant for Caching purpose. But being the ‘multi-purpose’ plugin that it is, it also deals with the aspect of minifying!

By turning on the ‘minify’ function, you may save bandwidth by minifying JS, CSS and HTML files. By using this plugin, you are getting two things done- caching and minifying. Thus, you can get rid of an extra plugin (for minifying) by using it! The only problem with this plugin is that there have been some recurring reports of conflicts being created.

#4 CloudFlare CDN

CDN stands for Content Delivery Network. Basicall, a CDN will host files and components of your blog on their ‘super optimized’ and ‘super fast’ servers. This frees up the resources on your blog’s servers and ensures smooth functioning of it.

That was the description of the ‘classic’ CDN. CloudFlare is a bit different though. It is not exactly the classic CDN. But is it a cool tool!

When a visitor accesses your CloudFlare enabled blog, its servers ping your blog’s server. Then it waits for your server to pass on the files and various components to it. It then optimizes and delivers the content through their servers.

By optimization, I mean minifying CSS, JS and HTML! Yes, CloudFlare has this option of minifying your blog’s components. You may even choose to make those files load asynchronously by using the ‘Rocket Loader’ feature.

Enabling CloudFlare on your blog is ridiculously simple. Register at their site, add your blog, change your domain’s nameservers, add CloudFlare’s plugin on your blog, enter the API key and your e mail address and it is done!

#5 WP Minify

I used to love this plugin. Setting it up was very easy and it worked like a charm. That was until the plugin broke my blog’s CSS! When I checked the WordPress plugin repository while writing this article, I saw a remark that the plugin is ‘broken’.

I asked some of my friends who have been using it. After my little investigation, I found that some folks claimed that the plugin is working perfectly fine. While some folks claimed that it ruined their blog’s CSS. In my case, it affected my blog’s CSS and changed its looks. Also, the plugin hasn’t been updated since 2012!

Still, if you are in a mood to experiment, do try it out. If it messes up the CSS, deactivate it and delete files associated with it. It’ll restore your blog’s CSS. But remember to take backup before experimenting!

I’m eagerly waiting for the authors of this plugin to update it. Because it used to work so well in the past!

I’m about to end this article

I’ve mentioned some plugins that I’ve used/ been using to minify CSS, JS and HTML files of my blog. If you want to mention your own choice of plugin or your own method, feel free to do so in the comment section. And I’ve got an awesome set of social sharing buttons. Make use of them and share this post with your friends!