How to make your blog load faster - PART 2 - Optimizing CSS, JavaScript and Images

In the earlier post, we discussed how we can find the troublesome areas by using Firebug and YSlow. So, when are we actually going to do anything about it? Here’s the scoop on certain methods that can really give you a real performance boost.

Before going any further, I must state that it is extremely necessary you back your files up in case something goes wrong.

Compressing JavaScript

If you’re loading JavaScript file in your plugins - or maybe whole libraries, it would take your blog an awful lot of time to load everything. Certainly, the easiest thing would be to let go of certain JavaScript files if you don’t need them. But that’s not really going to work for the ones that you absolutely need right? In the earlier post when you were exploring your components, you might not have had the birds-eye view unless you played around the ‘net’ tab of Yslow.

This tab tells you everything about the different components in your blog and their loading times. Images, JavaScript files and CSS files, you name it!

Alright, at this moment, we can actually compress the JavaScript files that are taking a whole lot of time to download, to cut down on the loading time. What we do is, we get the appropriate file from your blog’s installation directory, copy the whole text in the file, and input it into a JavaScript Compressor.

After the compression, copy the compressed text out and replace the uncompressed(original) JavaScript code in the file - which will make the file size shrink. You don’t need to worry - it’s the same code, presented in a different manner, and nothing can go wrong with your blog.

Compressing CSS

The same goes for CSS file. Do you know that all the comments and the whitespaces in your CSS can add an unwanted weight to your loading time?

So, what we’re going to do is remove all the unwanted clutter from your theme/plugin CSS. Like before, you can bring up the ‘net’ tab and hunt down the CSS files with large ‘bars’. After you seek them out, do the same thing that you did to JavaScript files, only now, you’ll be using a CSS Compressor. This handy tool will shrink your CSS down dramatically.

As before, it’s the same CSS code, presented differently.

Optimizing the Images

One of the best ways to cut down the response time of your blog is to shrink the images down a bit. There are a couple of ways in which you can achieve this. But before we start it off, you should know when to use different image types, namely, JPEG, GIF and PNG.

• If you’re saving an image that has sharper qualities, such as solid color text on a solid color background (without any smooth shades of color or gradients), use GIF.
• If you’re having images with gradients and lots of shading variants - such as glows, shadows, blurs, use JPEG.
• If you’re having a mix of these two, use PNG. PNG seems to work fine with both of them.

To optimize your images, it would be best if you can get your hands on a copy of the Adobe Photoshop. The latest version is CS3, but anything above 7.0 should do for the optimizations. Simply open you image and go to “File > Save for Web” or “Save for Web and Devices”. It’s pretty easy to figure out what you should do thereafter since it’ll give you a few optimization options and live previews.

If not, the easiest thing to do is go for an Online Image Optimizer. You wouldn’t get everything that Photoshop has to offer, but it still beats the un-optimized images. Input the image, and it will give you few previews and the sizes of optimized images with preset settings.

So, I guess that brings closure to our two part series on “How to make your blog load faster”. I know that this had been a rather geeky how-to series, so if you need any assistance anywhere, just shoot me a mail or a comment and I’ll try my best to help you out.