gzip Archives - WarpConduit Computing

There are so many plug-ins designed to speed up WordPress, but which ones actually work? I’ve taken the time to try out some of the more popular plug-ins and found the most efficient solution on my eyes.

Cache Plugin Comparison

Before going into the procedure of installing my preferred cache and compression solution I’ll share with you my findings between some of the most popular cache and compression plugins.

	Control	W3 Total Cache	WP Super Cache	Quick Cache	W3TC + Scripts Gzip	WPSC + Scripts Gzip	QC + Scripts Gzip
Page Speed Score	78	79	77	77	88	85	85
YSlow Score	73	81	73	75	91	85	84

Testing: I used Mozilla Firefox 3.6.12 with the Firebug, Page Speed, and YSlow add-ons. For each combination I would load the page first without cache (Ctrl+F5) and then refresh the page a couple times, and then finally run Page Speed and YSlow to get the scores. I had done load time tests for each combination as well, but decided to not publish them because of inconsistent results, perhaps due to the site being on shared hosting and my wireless Internet connection.

Winner: While all plugins perform well, W3 Total Cache took first place because of it’s wide array of options and out-of-the-box performance rating from Google Page Speed and YSlow. Paired with Scripts Gzip W3TC blasts past the other plugins.

Step 1: Prepare for Installation

Disable all PHP output buffer handlers – open your PHP.ini and make sure that output_handler = Off and zlib.output_compression = Off, this will prevent double compression resulting in garbled output to the browser
Remove any mod_deflate and any old rewrite rules from .htaccess – try to leave only the standard WordPress rewrite rules and your custom rewrites
Deactivate and delete any previous caching plugins – start fresh and free of clutter
Optimize your WordPress database – decrease database bloat

Step 2: Install W3 Total Cache

Login to your WordPress admin interface, click Plugins on the admin menu, and then Add New
This will present you with the Install Plugins screen, type “w3 total cache” into the search box and click Search Plugins, and then click Install Now under the entry for W3 Total Cache
After Installation has completed go ahead and activate the plugin

Step 3: Configure W3 Total Cache

This plugin has lots of options, but it’s still pretty easy to configure. Let’s get started by clicking on the the Performance admin menu item. Now, the default options are great, but let’s at least go ahead and enable Object Cache and Save changes , then go into the Browser Cache settings and under the General section enable Expires headers, Cache Control headers, eTags, W3 Total Cache header, and Gzip Compression and Save changes.

Click on the Performance menu item to get back to the main options and where it says Preview Mode click Disable. After the page reloads click Empty all caches to clean everything up.

Note: W3 Total Cache does have support for memory-based storage options (APC, eAccelerator, etc.) instead of saving everything to the server’s hard disk, so if these options are available to you it may be advantageous to try them out.

Step 4: Testing

At this point you want to open up your website in your browser and pull up a few posts and pages to make sure things are working correctly. If everything is coming up quickly and correctly you’ve done it, a properly cached and compressed WordPress site! Now to test whether different parts of your site are being compressed you can use this handy Gzip Test tool to test a blog post or page URL, a Stylesheet URL, and a Javascript URL. Make sure the Stylesheet and Javascript urls you are testing point to your website and not an external site. You want each result of this test to say, “Webpage compressed? Yes.” If your CSS and JS files are not testing as compressed then you will want to check out Appendix A: Scripts Gzip.

Appendix A: Scripts Gzip

If using W3 Total Cache does not result in your Javascript and CSS being served up as Gzip compressed files then you need this script. It will try it’s best to combine all your Javascript and CSS files into single files, one with all your local Javascript and one with all your local CSS. Works great, and reduces HTTP requests to boot!

Login to your WordPress admin interface, click Plugins on the admin menu, and then Add New
This will present you with the Install Plugins screen, type “scripts gzip” into the search box and click Search Plugins, and then click Install Now under the entry for Scripts Gzip
After Installation has completed go ahead and activate the plugin
Modify your theme’s footer.php file and insert  just above the call to the wp_footer() function, this will cause your Javascript to load at the bottom of the document, which is recommended (CSS at the top, JS at the bottom)
Repeat Step 4: Testing to make sure your local CSS and JS files are being compressed

Normally you can easily enable Gzip compression using mod_deflate by adding the following lines to your .htaccess file:


AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript

But for those of you on shared hosts that don’t allow the mod_deflate module and run PHP in CGI/FastCGI mode you can’t go with the easy method.

So, to serve up your PHP, CSS, and JS files you can try the following method.

Note 1: Your shared web hosting account must support custom php.ini and .htaccess files.

Note 2: Be careful when mixing this solution with other cache/compression applications.

Step 1: PHP Configuration

Add or modify the following lines in your custom php.ini file:

output_handler = Off
zlib.output_compression = On
zlib.output_handler = ob_gzhandler

Now this will take care of gzipping all PHP files.

Step 2: .htaccess Configuration

Add the following lines to the bottom of a .htaccess file in the root of your website.


RewriteEngine On
RewriteRule ^(.*\.js) gzip.php?type=js&file=$1
RewriteRule ^(.*\.css) gzip.php?type=css&file=$1

This will redirect all requests for .css and .js files through gzip.php, which we will create in the next step.

Step 3: File Processing PHP Script

The following PHP script will inherently use the PHP compression you’ve already enabled and also add headers to your files take advantage of your client’s browser cache to make subsequent loads faster.

Create a file named gzip.php in your website’s root and add the following lines to it:

Great! With these steps in place your css and javascript files will be processed by gzip.php and output using PHP’s gzip compression library (zlib).

This method can be extended to more filetypes by adding to the allowed file types in gzip.php and adding more lines to your .htaccess file.

Speed Up WordPress Using Cache & Compression