Being a pursuer of optimized pages, I started checking for ways to optimize the output of WordPress.  By following Yahoo! Best Practices guide I surmise that the biggest factors in page load are:

• Reduce HTML elements.
• Join, Minify Javascript and CSS files.
• Cache files if server side calls are expensive.
• Use GZIP compression on files.

Reduce HTML Elements

A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example.

This step is quite easy. This is dependent on the theme chosen, which controls all of the output for the blog. I am currently using the Green-Park 2 theme designed by Andreas Jacob. Andreas is incredibly talented and has designed this theme to be lightweight from the ground up.

I am designing a theme which includes many of the tricks Andreas used in Green-Park 2, such as the addition of CSS3 effects that degrade down to CSS2.

Join, Minify Javascript and CSS files.

For themes or plugins that use large CSS or even multiple Javascript files this is a life saver. Joining these these smaller files into one larger file speeds up the page load. Reducing the amount of requests the browser has to perform is key to speeding up the page, creating connections and requesting files takes time. To add more insult to injury, most browsers limit concurrent Javascript file downloading when they are from the same domain.

Both Javascript and CSS can be reduced in size, a process called Minifying. Javascript and CSS can have comments removed, white space removed and other tricks to reduce file size. The resulting small file functions the same but is downloaded quicker due to less characters in the files.

Joining and minifying is usually a manual affair, performed by the owner of a blog. This becomes a pain when CSS needs updating or Javascript has to be changed or updated. My weapon of choice for manual minifying is the YUI Compressor codebase, which is a Java program to handle minifying a file at a time. To do this online, check out the Online YUI Compressor (not run by Yahoo!).

For automatic joining and minifying on WordPress I use the plugin WP Minify Plugin. This plugin uses the Minify codebase which uses JSMin for it’s Javascript minification. Minify supports swapping out JSmin for YUI, which I have yet to do. Another option for minification is the PHP Speedy system, which a WordPress plugin has been started, but not available for WordPress newer than 2.7.

Cache files if server side calls are expensive.

WordPress is incredibly powerful, but can be bogged down by PHP calls on every page load. This is usually insignificant to worry about, but when lots of visitors visit the blog those PHP calls can increase page load by a significant amount. A way to fight this slowdown is to cache the generated files and serve those generated files. On this blog I use WP Super Cache, which performs the caching automatically.

Use GZIP compression on files.

Gzipping generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip.

GZIP is an easy way to reduce page load size. The WP Minify Plugin enables this when joining and minifying Javascript and CSS. The caching by WP Super Cache GZIPs all of the page content, enabling compression where the Minify plugin can’t.