WarpConduit Computing

Speed Up WordPress Using Cache & Compression

by

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 <!--SCRIPTS_GZIP-JS--> 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

Enabling Gzip Compression of PHP, CSS, and JS Files Without mod_deflate

by

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.

Dynamically Load CSS and JS files using PHP

by

I’ve been working more and more with jQuery and plugins that go with it and it can be a pain to keep going back to the code and adding another <script> tag for each of these and then removing it again when you find out it isn’t quite what you needed.  I came up with a solution to look in a “js” folder and create the correct tags for loading the files.  Then i extended this to do CSS files as well.  All you need to do is drop js/css files into “js” and “css” directories and the page you have placed the PHP code onto will load those files.  To disable a file, just delete it or move it into a subfolder. Oh, you are worried about loading order you say?  Since readdir() lists the files in alphabetical order you can rename your files using numbers (01-jquery.js, 02-jquery-plugin.js, 03-global.js, etc.) to adjust the loading order.  If you find any issues leave a comment to help others figure it out.  Hope you find it useful in some application.

Directory Structure

css

01-style.css
02-morestyles.css
03-custom.css

js

01-jquery.min.js
02-jquery.plugin.min.js
03-custom.js

index.php

Code

Place the following code just before your document’s closing </head> tag.

' . "\n";
        }
    }
    closedir($handle);
    echo $js;
}
 
// FOR CSS FILES
$css = '';
$handle = '';
$file = '';
// open the "css" directory
if ($handle = opendir('css')) {
    // list directory contents
    while (false !== ($file = readdir($handle))) {
        // only grab file names
        if (is_file('css/' . $file)) {
            // insert HTML code for loading Javascript files
            $css .= '' . "\n";
        }
    }
    closedir($handle);
    echo $css;
}
?>

Result





Dynamically Load CSS and JS files using PHP











Hello World!

Notes

This code will not search subdirectories for files to load.  This code also doesn’t help when you are using a WYSIWYG editor such as Adobe Dreamweaver that will look for JS/CSS links in the HTML header and load the files.  These programs don’t run the PHP code and therefore don’t know what JS/CSS files are suppose to be loaded. You may need to adjust the path to the “js” and “css” directories based on the location of the page you enter the code onto.