Subscribe to the RSS Feed : Read our Blog Posts from the convenience of your favourite Reader

Optimizing CSS and Javascript

January 11th, 2011 . by Anup



Once you’re done optimizing images , you should work on CSS and Javascript files. One way to do this is by aggregating all your CSS files into one big CSS file and all your JavaScript files into one big Javascript file.

This helps reduce http requests which in turn leads to faster loading times for your website.

Another tip would be to delete redundant CSS declarations. Remove CSS declarations that are not in use.

Move CSS on top and Javascript to the Bottom.

CSS declarations or file includes should be in between the section. This way browsers will know how to display the page before they even get to the HTML .

JavaScript files belong at the bottom , right before the </body> tag.  This prevents JavaScript code from rendering the page while things are still being requested.

Minify CSS and JavaScript

We’re going to use Minify and JSLint for this next part.

Copy all your JavaScript onto the clipboard onto the corresponding input field in Minify.

Then click “Hit Me”. and use the resulting JavaScript on your website.

Minify – http://www.reneschmidt.de/tools/minify/

JSLint – http://www.jslint.com

Make sure you check the JavaScript once again after it is minified to ensure it is still working before replacing existing JavaScript files.

Making CSS and JavaScript External

It is considered good practice to not use inline CSS and JavaScript. Always have them in external files. That way they’re easier to edit, reduce the size of the page, cache easier and reduce load times which leads to a better user experience.

That brings us to the end of the optimizing JavaScript and CSS post.

Until Next Time.

GameTap - Buy and Download Hundreds of PC Hits!

Optimize Your Website Using YSlow

January 5th, 2011 . by Anup



Have a lot of people leaving your site too fast ? Your high bounce rates could be due to a slow loading website. People these days simply don’t wait for 5 or 10 seconds for a page to load.  A slow loading page affects everything else you do . You can say bye bye to those sales and leads. Therefore it is important that you optimize your websites. Lets forget usability or anything else that would affect sales. We’re going to concentrate on making your site more responsive i.e load faster. Want another reason ? Okay then .

Here’s something that happened to me a while back.Now serving niches is a relatively small site / blog. There are only a few 100 posts. You don’t exactly see it and expect it be heavy on the server.

As it turns out I had just deleted older posts which I thought were longer relevant and some I thought didn’t live up what we are trying to achieve here. Now as it turns out the blog was loading a bit faster after I had deleted a lot of older posts, atleast I thought so.  I felt content and logged out.

Next day I check my email and there’s an email from my hosting provider.

First I sit there and scratch my head thinking what on earth could they be emailing me about on this day of the week.

Turns out my small site was so slow loading and so heavy on resources and the server, it was starting to affect the other sites on the server. So they had to temporarily suspend my account and stop all traffic to it until I speed it up.

Needless to say I was shocked. Well okay first I was confused and then I was shocked. My teeny blog is causing problems ? So they agreed to let me in provided I fix stuff or lease out an entire server. Of course they weren’t exactly going to throw me out. There weren’t going to let in any traffic unless I had fixed the problem.

That is where YSlow came to the rescue. I ran it and well it gave me an F . But it also told me how to go about fixing the blog and site .

The next few blog posts are going to be all about Website and Blog Optimization. First we’ll begin with Yslow. We’re going to take it a bit further than that in later blog posts. But first YSlow.

Today is the simplest part . Installing Yslow and related Components.

You need to get the Firefox Browser first . Download the browser from http://mozilla.org and install .

Now you need the firefox browser and and add on called firebug. YSlow is  a plug in for Firebug. Firebug is pretty cool itself but its features are out of the scope of this blog post. Back to installing YSlow.

Go to http://www.getfirebug.com and install Firebug

Then go to https://addons.mozilla.org/firefox/addon/5369 to install YSlow

Once all these are installed , You are now ready to run Yslow. Restart your FireFox Browser.

You should see something like the picture below at the bottom right of your firefox browser.


Once you have restarted Firefox, open your website.

Go to “Tools > Firebug > Open Firebug”.

A split window should open . Click YSlow . Choose appropriate Ruleset. It doesn’t really matter .

It will analyse your website and give you a grade.

We’re going to work on improving that Grade in the next blog post.


To learn more about Firebug check out

http://www.packtpub.com/article/installation-and-getting-started-with-firebug

Get Unlimited Access to Hundreds of Games