It’s a common question! Where do I begin with the optimization process. Should I start with JavaScript or with some simple Apache optimizations? The answer is pretty simple and it’s related to a very, very simple technique.

Look what Firebug is saying

Yeah, look at the Firebug. You can check what’s taking most of the time to load. If it’s some server site script you can try caching it, if it’s a JavaScript file load, than you can try minify/compile it. Another good tool is the Safari developer tool. Than you can graphically understand what part of the sites’ components are slowing down the loading process. Whether the images or the JavaScript, well check that out with the Safari browser.

Finally what I do?

Once you know what’s the thing slowing down the site, start with its optimization! It’s really simple.

Optimize every image

The first thing that you can do to improve your site image is to optimize them. Sometimes the files you put on the site as they are JPEG, GIF and PNGs can be improved just by using some software that strips useless information from their headers and using various algorithms to smooth the similar pixels. As you may know in the case of PNG and GIF this is particularly natural. Stoyan Stefanov a lead Yahoo! developer is know as guru when it comes image optimization. You can check more detailed information about software and tools on his blog here. The reality is that you don’t need extra info into the images, as useless information about the camera, which is often setup into the image header, and when it comes to the web that’s really good. In fact according to some researches this can spend you more than 30% of traffic.

Use CSS sprites

What are CSS sprites? Well you possibly already know. I’ve written some articles about that, so I won’t mention it again, but what’s the point. The CSS sprite usage helps you merge all the images you use into your site into one single image and to manipulate the site’s outlook only by changing the element background position. That’s really nice, it requires a bit concentration to track different elements background, but it’s not difficult at all. In fact there are some tools that can help to automate this. The good thing is that thus you replace all the background images with one single image and thus with one single request. So if you’ve one CSS file with twenty background images by using one CSS sprite there is only two requests instead of twenty one requests. Even more, you can go even further with this optimization technique and to replace the CSS sprite call by http by built into the CSS file base64 string. With that simple trick you got only one! request. Yes this becomes more difficult to maintain, but it’s really close to extreme optimization.

Use base64 to improve http request number when possible

That’s not a news, but however if you like to switch from multiple to one request the answer is base64. The good thing with base64 is that it can send to the client multiple images with single request and it natively eliminates the extra info from the image you convert. It has to be used with care, because sometimes even if it’s slower using multiple requests via HTTP for the images gives the user the feeling of faster site, just because the user sees response from the server earlier.

That’s all I can say about image optimization in one site. You can search in detail about tools and software, as well as other techniques explained here.

• HTML
• CSS
• JavaScript
• Flash or Silverlight
• Server side scripting language, like PHP, ASP or whatever
• Database server

I’d like to add one category more and that’s the images we use in every website to construct the desirable layout. They are extremely important when optimizing a web page, because almost always they make more than half of the traffic of a page.

In few posts I’ll write what and how can be optimized, according to my experience and according to the articles I’ve read. I won’t mention again why the optimization is important – I’ve written already some posts about that and the web is full of articles.

As I can say nowadays this is the most important topic of the web development. Almost everyone’s speaking about it and I’d like to give some references in my talks, just to make it more clear and to give you some basic points from where you can start optimizing.