WordPress Ajax, Compress CSS, Decrease Page Load Time on Your Blog

Sorry I have been so bad with consistent posts lately. I’m working on a couple of WordPress projects that are diverting my attention and which I’ll share with you once they’re up (in beta). Anyway, on one of the current projects I installed the WordPress plugin, AJAXed WordPress, and implemented a trick to compress my CSS stylesheets to decrease load time.

First, AJAXed WordPress is a great plugin that allows you not only to improve usability by decreasing page load times, it also implements some nice JavaScript like animated tricks to dazzle your blog users…sort of. AJAXed WordPress allows for inline paginated posts, inline comments, submitting comments with AJAX, and live comment preview for starters.

For those who haven’t the foggiest idea what AJAX is, in short, it’s a way of building interactive web applications in a way that seems to almost completely get rid of lag time between when you click on something on a web page and when it does what you wand it to do. Google Maps is an example of an AJAXed web application.

I installed AJAXed WP on this website. See how when you click on the “continue reading [name of post here” link on any one of the blog articles on the home page, the rest of the post appears without the rest of the web page having to reload or without having to go to the single post page. Fabulous huh! Install AJAXed WP and play around with it a bit.

I also discovered a nice little trick to compress CSS stylesheets (eliminating white space) so your browsers read the stylesheet faster. Put the following at the very top of your stylesheet (without the quotes):

“<?php if(extension_loaded(‘zlib’)){ob_start(‘ob_gzhandler’);} header(“Content-type: text/css”); ?>”

Put the following at the bottom of your stylesheet:

“<?php if(extension_loaded(‘zlib’)){ob_end_flush();}?>”

Rename your stylesheet by adding the .php extension to the end of it:

If your style sheet name is style.css, rename it “style.css.php”. I’d suggest saving and leaving the original (style.css) as is and wherever it is for future reference as well.

Last, remember to change the reference to the stylesheet’s path in your header:

change:

“<link rel=”stylesheet” href=”http://www.yourwebaddress.com/wp-content/themes/yourtheme/style.css” type=”text/css” media=”screen” />”

to:

“<link rel=”stylesheet” href=”http://www.yourwebaddress.com/wp-content/themes/yourtheme/style.css.php” type=”text/css” media=”screen” />”

I learned of a couple CSS stylesheet compression plugins like css-compress, but this actually gets rid of comment tags that may be in your stylesheets and may be used as necessary hacks to make certain styles show up. If you don’t have any hacks, then it won’t be a problem.

Well, hope some of this helps some of you. Until next time.