Sunday, April 19, 2009

Wordpress Optimization: speed up or get out of the way


(While this is another one of these technical posts, I'm posting my notes as I run into getting a web business operating online - so you can learn from my efforts and mistakes.)

Ran into this when running Wordpress MU on a site (setting up subdomain mini-sites) and finding all about bandwidth - by running out in the first week of a new month. And then again, the second week. Got it bumped up twice, but it took me off my regular game of posting content over into figuring out how to optimize a site for fast loading. (And this was with just two mini-sites running...)

Luckily, the Internet is full of answers. Lots of surfing with different sites (sorry I can't link to you all) gave me a few simple rules:
  • Smaller is faster.
  • Don't call up more than you want to chew.
  • No pix, no slows.
Smaller is faster.
Essentially, the static html page, text only, is the fastest loading page. The less content, the faster it loads. Kinda like security - if nothing gets through, then nothing can get leaked.

Obviously, since we like nice graphics and nice-looking text, and like to talk to each other - the above statements aren't workable.

Next up from that - CSS-styled pages which look nice but don't take a lot of time to load - meaning the server doesn't have to work at bringing these up. Means you want to compress all the line-breaks and white space out of these CSS pages so that they are more machine-friendly (and nearly impossible to read or edit.)

Don't call up more than you can chew.
Finish off your CSS loading before you call any Javascript - and keep those calls to a minimum. Again, ideally your CSS would be a single document, but the reality is that you have different style sheets for different aspects of the site - human editing benefits, mostly (although some would argue with me on that).

Javascript should load last so the page is there to be read, even if other stuff is coming in the background.

Enter database calls. Same deal. The more you call to your database, the slower the page is to load, and also you are going to use up more bandwidth. So your database has to be optimized internally so that it finds the data quickly and efficiently. Extra tables and entries are removed, which keep the files small and quickly accessed.

No pix, no slows.
Minimalist designs tend to be faster, because a single graphic can be bigger than the entire text on the rest of the page. The more graphics and icons you have on a page, the slower it's going to load.

Your graphics - if you have to have them - should be compressed as much as possible without degrading their quality. (And a two-color GIF still rules.) However, you can do a lot with colors in CSS, so don't think you're limited to a monochrome scene to get a fast-loading page.

While people like pictures on their sites - think these over carefully before you drop a bunch of stuff in there to make it look "pretty".

- - - -
Links:
http://wordpressgarage.com/tips/38-ways-to-optimize-and-speed-up-your-wordpress-blog/
http://plugins.trac.wordpress.org/wiki/css-compress
http://www.boydcreative.net/blogging/10-ways-to-optimize-wordpress-for-more-traffic/
http://www.johntp.com/2007/10/24/5-ways-to-increase-the-loading-speed-of-a-wordpress-blog/

- - - -
Tricks and Recommendations:
  1. Host your images on another site or a subdomain - this way they load in parallel to your text body.
  2. Host your feeds on Feedburner - doesn't speed up your page loads, but does preserve your bandwidth.
  3. Don't use an ecommerce plug-in on your WordPress install - host these externally as well. Scripts like ZenCart are amazingly fast as they are designed to specifically deal with ecommerce. WordPress is designed around blogging and ease of use. Make your external ecommerce script do that heavy lifting. (The ecommerce plug-in I used to use had all sorts of javascript calls - when I finally got under the hood to look at it. Now I'm looking at a simple PayPal button to do everything I want - but the jury is still out on that...)
  4. Always, always refine by function - actual use - rather than bells and whistles. Practically, leave entertainment on entertainment sites and then link or embed them. Let them pay the bandwidth and give you a sitelink as well.
  5. Skip ads, unless they are text links. a) People continue to look at fewer and fewer ads. b) Most are graphic heavy or javascript "endowed". c) Content pre-sells best - then link to the page which will give you PPC or affiliate commissions. (Adsense is still notoriously poor-paying.)
Bottom line:
Serve optimized text only from your server, then call to other hosts for the extras. Sounds austere - but if you keep these in mind with your designs, you won't have the big problems later when you have to find out how to make your site's bandwidth footprint much smaller out of necessity. (And I've already had a domain kicked off one host for violating their *ahem* terms of aggrement - you get what you pay for.)

Good Luck - and Good Surfing!

Post a Comment