eren emre kanal, UI Designer & Coder

YSlow!

I’m trying to make Erenemre.com better everyday. I do some detail works on design, optimize XHTML/CSS and other things.

One of the things that I’m working on nowadays is YSlow!’s performance optimization rules. If you don’t have any idea on what YSlow! is: it’s a Firefox Firebug add-on. YSlow! checks your web pages and tells you why they are slow based on the Yahoo!’s rules of high performance web sites article. It simply gives a grade to your web page.

Mine was 64 (Grade: D) when I first installed Wordpress and implemented my design. At that point I didn’t do anything about performance optimization. So, my score was expectable.

Now, it’s 86 (Grade: B). I know, it’s not the best but it means a 35% increase. It could be better if I use Content Delivery Network (the only rule that gives me an F). Maybe in the future. Here is a list about my optimization:

• Erenemre.com uses YUI grids and base CSS files. They are linked to YUI’s original locations, Yahoo! servers. This is kind of a CDN method and also since most of YUI users use YUI with this method; YUI may be cached in visitors’ browsers.
• I use CSS sprites method. This is a method to decrease HTTP requests by using all similar images in one master image file.
• I installed GZippy Wordpress plugin. GZippy re-enables Gzip compression under Wordpress. I also installed Wp Super Cache plugin but it didn’t change anything.
• There are some Wordpress plugins for Gzipping CSS file called WP CSS and CSS Compress, but they didn’t help at all.
• .htaccess hacks didn’t help me to Gzip my CSS file. So I did it manually. Simply I created a PHP file and wrote a few lines of PHP Header code and then put my CSS codes in it. I edited my templates header.php file and changed CSS file to this PHP file.
• I applied some Apache caching (Expires) rules to my .htaccess file by using the codes on this page. That increased my “add an Expires header” score from E to A.
• Also my ETags score was F. So I added these codes to my .htaccess file. It’s now a B. Why not A? Because, there is a JavaScript file for my web statistics and I cannot modify it.

These are some ways I used to increase my score. In theory, they work. But if you are using other platforms or have other kinds of low scores I strongly suggest you to read this sweet article.