Saturday, January 19, 2008

Site performance - javascript & css aggregation, and CSS sprites

About a month ago we started working hard on improving the performance of our Traxtuff website. After some research we came to the conclusion that it was our many css and javascript files that were causing most of the performance problems. Also - every css and javascript file were called many times on each page, causing very strange firebug problems. So we decided to add a javascript and css aggregation mechanism to our project.

Basically how it should work is by replacing all the calls to javascript and css by one call to a file containing all the concatenated javascript and css files. It should recognize when the cache is out of date and regenerate it. It should include each javascript and css only once inside of the cache.

Now, I am very loath to write "frameworks". Why? Because I would much rather find someone else's framework and use it. Most likely they already went through all the debugging and testing of the framework. Still, I couldn't find someone else's php code that does this. Drupal 5 has css aggregation, and Drupal 6 has css and js aggregation, but since we don't use Drupal in Traxtuff, I wanted to write clean code that would do this for me.

So after a long and arduous debugging process where almost every day I received an emotional email from Yonatan about another bug in the caching mechanism, I finished writing our very own javascript and css aggregator for PHP (Amazing how many bugs 175 lines of code can contain).

I released it in google code here. There are many problems with this project, it is not really a "framework" yet, but more ugly patchy code. But I feel it is good enough to let other programmers look at, and maybe copy paste relevant portions into their projects. I hope to "componentize" this code in the near future.

I can safely say our site now loads about 5 times faster than it did before we introduced this caching mechanism.

However, as our site's design gets more complex, we bumped into another problem - the site is starting to slow down again because of having too many images (many of them quite small). The best solution for this kind of problem is to use sprites (basically a technique of slapping all of your images into one large image and using CSS to display only the appropriate portions). You can read about it in A List Apart. We haven't done this yet, but I found a really cool sprite and css generator we can use.

To learn about improving your site's performance, I really recommend reading Yahoo's best practices for speeding up your website, and also installing the really really cool YSlow firefox plugin to check how well you applied those practices to your site.

6 comments:

Uzbekjon said...

Great write up.

For those of you who is interested in your own javascript code performance testing you can find a nice article here:

http://jquery-howto.blogspot.com/2008/12/how-to-test-javascript-performance.html

products said...

China Wholesale has been described as the world’s factory. This phenomenom is typified by the rise of buy products wholesalebusiness. Incredible range of products available with wholesale from china“Low Price and High Quality” not only reaches directly to their target clients worldwide but also ensures that China Wholesalers from China means margins you cannot find elsewhere and China Wholesale will skyroket your profits.

products said...

nike shoes & Puma Shoes Online- tn nike,puma shoes,puma cat, baskets cheap nike shox, air max.cheap nike shox r4 torch, cheap nike air, nike running shoes air max, puma speed and more. Paypal payment.nike running shoes Enjoy your shopping experience on Nike & Puma Shoes Online Store.

products said...

Lacoste Polo Shirts, , Burberry Polo Shirts.wholesale Lacoste polo shirts and cheap polo shirtswith great price. clothingol.com offers lot of 10ralph lauren polo lacoste polo shirts and lot of 20 Burberry Polo Shirts. clothingol.com offers classic fit polo shirts. polo clothingCheap Brand Jeans ShopMen Jeans - True Religion Jeans, burberry polo shirtsGUCCI Jeans, Levi's Jeans, D&G Jeans, RED MONKEY Jeans, Cheap JeansArmani Jeans, Diesel Jeans, Ed hardy Jeans, Evisu Jeans, Women JeansJack&Jones Jeans..

ryan said...

This approach circumvents the Achilles heel found in traditional chronograph .
http://www.watchestoo.com
replica watches
Men’s watches
Fake watches
watches
IWC
iwc-62646
iwc-62647
iwc-62648
iwc-62649
iwc-62650
iwc-62651
iwc-62652
iwc-62653
IWC Pilot's watches Classics Antoine de Saint-Exupery

IW320104

IWC Pilot's watches Classics BIG PILOT 7DAYS IW5004-01
IWC Pilot's watches Classics BIG PILOT WATCH IW500201
IWC Pilot's watches Classics CHRONO-AUTOMATIC IW371701

dingdang said...

Christian Louboutin Sale have a good reputation in the market world wide. Christian Louboutin Pumps are known for the products which exactly the original brand. All the famous designs whether it is the Sling back Pump or the Christian Louboutin Boots , are imitated perfectly. Imagine if they look so marvelous in the catalogue then how gorgeous Christian Louboutin Sandals would look on your feet. So do not waste your time, remember nothing in the market can offer you such great quality at such low prices.