New Optimize Prime! - Everybody Staze...

So, thanks to a friend, I’ve started plugging away at my site again to make things run faster, take less bandwidth, and score higher on YSlow and Google Pagespeed (oh, and webpagetest.org, which I’ll get to later).

So, first thing I did was get some baselines. I ran my site through Yslow and Pagespeed again, and got a 84/100 and 94/100 respectively. When looking at Pagespeed, there was really nothing that wrong (or at least, nothing Google was telling me was egregious). Yslow, on the other hand, had a lot to say. The main thing, and something I’d wrestled with before, was CSS and JS minification (combining all of them, stripping out whitespace/comments, and compressing). So, I went back to work on getting that working. Turns out, in the theme I use (the seemingly wildly popular iNove) doesn’t load CSS or JS in the proper way. It would load them with normal HTML, and a PHP call to fill in there location. This is not correct. What SHOULD be done is a wp_enqueue_style or wp_enqueue_script to add the style/script to a queue, so that they can all be added by WordPress. This was preventing WP-Minify (a minifying plugin for WordPress) from intercepting the stylesheets and scripts, and minifying them. So, some hacking of my theme later, and viola! it works.

header.php script loading code:
wp_enqueue_script('base', '/wp-content/themes/inove/js/base.js' ); wp_enqueue_script('menu', '/wp-content/themes/inove/js/menu.js', 'base');

Make sure to remove the old JS loading stuff. And do the same thing for CSS, just change the enqueue to style.

This resulted in an instant increase of 4 points on Yslow, and 3 on PageSpeed. After plugging around some more, I really couldn’t get much more out of either of those tools (I’m currently stuck at 89/100 on YSlow, and 98/100 on PageSpeed)… largely because I don’t use a CDN for static content. Also, I could move to using CSS sprites for my various style elements, which would help YSlow, but I haven’t gotten there yet. I hope to soon. Oh, and I could host ga.js (google analytics JS) on my server, so that it can be compressed, and decent expires headers could be set, but I’m waiting to have an easy (upgradable) way to do that. Hopefully soon… though I doubt it’ll get me up to 90/100 on Yslow).

So, I started looking around some more for additional testing, and found webpagetest.org. This actually breaks down elements, and shows what’s going on. First thing I noticed was my previous Etags setting was incorrect. Etags should be turned off. So, I changed my apache config to say “FileETag none”. This fixed part of my score an this page. The other issue was harder to track down. For some reason, it was seeing Keep-Alives (persistent connections), disabled. After a lot of sleuthing, I found the answer. IE (which webpagetest.org emulates), used to have issues with persistent connections over SSL. So, Apache (in their ham-handed way), disabled persistent connections for all sites if SSL was enabled at all. Great. The offending code for me was in my httpd.conf, and said “SetEnvIf User-Agent “.*MSIE.*” nokeepalive ssl-unclean-shutdown”. So, I removed this from httpd.conf, and added it to my virtual host conf file for my SSL domain. Restarted apache, and bingo. That problem solved. In fairness, I never even saw this issue since I don’t really test my site against IE (I don’t have any PCs in the house, and I rarely fire up VMWare to use Windows). The rest of webpagetest was basically complaining about me not using a CDN. Really, I don’t care that much. I should, but I’m not going to drop that kind of cash to pay for one. Maybe someone will write a nifty hack to use google-docs, or mobileme as a CDN. =P

Lastly, I went back and re-implemented this better rewrite code for WordPress. It’s so much faster, it’s sick. Really wish the devs for WP weren’t such curmudgeons when it comes to making this simple, and significant improvement.

So, the moral of the story? Optimization is fun, and hair pulling at the same time. You really can work and work and get only a couple points out of each change, but eventually, you’ll have a site that runs faster, and uses less resources on your server. My whole front page is only 150KB at this point, and takes 1.266 seconds to load. That’s not to bad when you consider the graphics and all that. I hope to get down a bit more (1 second flat would be nice), but I’m not sure my poor old cable modem is capable of that. That said, that’s a blind visit. Loading other pages is much faster since almost everything is already cached in your browser.

All and all, have fun. Make your page go fast. There are good tools out there to help you do all of this. Also, don’t forget Google Analytics, and Google Webmaster Tools. Both are invaluable for figuring out almost everything about your site.

Here are some good links that I found for tips/tricks, though many I had already done: