Archive

Archive for the ‘Hacks’ Category

Compress your WordPress website

January 11, 2010 13 comments

    This tutorial (like most of the others found here) assumes you are running your WordPress site on a Linux/Apache configuration, and you have direct access to your .htaccess file. This article will teach you how to compress all the JavaScript, CSS, PHP, HTML for your WordPress site, which should result in a faster site with less burden on your server (especially if you use shared hosting).

    Note that these techniques are a compendium of advice found on various websites such as

    First you should go to http://www.websiteoptimization.com/services/analyze/ and check the results for your website or blog. You should see .js, .css, .php and .html files are all being transmitted as full-size by the server. You might also want to check ismyblogworking.com for more compression stats.

1. Compress JavaScript

    To compress the JavaScript on a site-wide level, you’ll need to create a PHP file called compress_js.php (really it could be called anything, but we want an obvious name). Put it in your root folder (although technically it could be placed anywhere). Here are the contents of compress_js.php:

<?php
ob_start ("ob_gzhandler");
header ("content-type: text/javascript; charset: UTF-8");
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "Expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
?>

    This starts PHP’s output buffer. It sets an Expires header, so the script will not only be compressed, but also cached for a short period.

Then add the following into your .htaccess file (or create one if needed):

# javascript compression
ForceType application/x-httpd-php
php_value auto_prepend_file http://www.yoursite.com/compress_js.php

    This tells the server that any JavaScript files should be processed like PHP files, with compress_js.php (our super-duper compression/cache code from above) pre-pended to each PHP file. This is site-wide, so ALL JavaScript files (including ones from your theme and any plugins) will be passed through the script!

    Now go back to http://www.websiteoptimization.com/services/analyze/ and check the results. Any .js files should now show as compressed.

Congratulations! On to CSS compression.

2. Compress CSS

    This one is a bit tougher, because the CSS files must be in their own folder with no other files. Generally this would be a subfolder of your theme or a plugin. Some plugin authors do not use CSS subfolders, making this a tough hack! Once you do it a couple of times, however, it will get easier.

    If the CSS file(s) you want to compress are not in their own folder, create a subfolder called css and put it/them there. You may want to disable the plugin you’re working on to do this. If you’re doing it to WordPress, a plugin like Maintenance Mode should be used so that visitors don’t see any weirdness while you’re moving css files around.

    This is a plugin hack, so unfortunately you’ll need to repeat this process every time you update the plugin (unless you update manually). Fortunately it only takes a few moments to do this. I encourage anyone reading this to write to their favorite plugin developer and ask them to abstract out their CSS (if any) to a subfolder, to make this process easier. Even better, ask them to include the .htaccess and compress_css.php files with their plugin! Let’s start a “Compression Now!” Movement and encourage smarter development.

    Create a file called compress_css.php and put it in the css subfolder (the one you probably just created). Here’s what the file should contain:

<?php
ob_start ("ob_gzhandler");
header ("content-type: text/css; charset: UTF-8");
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "Expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
?>

    This does the same thing as we did with JavaScript, except the content type is ‘css’ instead of ‘javascript’, to serve css files properly. Create a .htaccess file and put it into the css subfolder. Then add the following into the .htaccess file:

# css compression
AddHandler application/x-httpd-php .css
php_value auto_prepend_file http://path/to/your/compress_css.php

    This pre-pends compress_css.php (from the root folder, where you placed it earlier) to each CSS file in the same folder, which will compress and cache the CSS files in the current folder.

    You’ll then have to manually edit the plugin’s PHP file(s) and ‘point’ it to the new location for the CSS file(s). All of the plugins I’ve seen so far have only one place where the CSS file location is defined. After that you should move the css file(s) into the subfolder. You’re done!

    You’ll need to repeat this process for every plugin or folder that has CSS you want to optimize.

  1. Create css subfolder (if needed)
  2. Create .htaccess file in css subfolder (and make sure compress_css.php path matches the path in .htaccess)
  3. Edit PHP file(s) to point to css subfolder
  4. Move css file(s) to subfolder

    The wp-admin/css folder is a perfect candidate to test out this technique, since it contains only CSS files. You won’t need to edit any PHP to practice on this folder.

    Check http://www.websiteoptimization.com/services/analyze/ again. Your .js AND .css files should now show as compressed. Excellent!

3. Compress PHP

    A lot of “WordPress speed” websites tell you to use mod_deflate to compress your server output. The problem is, what if your web host doesn’t allow it? mod_deflate uses more CPU, so you can see why some web hosts don’t want to enable it. But you can still compress your PHP output, uzing zlib. As a last resort, we can use the technique above. First you do want to check if it’s enabled.

    Your web host may have an option to check php version info, installed modules, etc. If not, you’ll need to do it by hand.

    Start with an empty text file and place the following:

<?php phpinfo(); ?>

    Save it as test.php, upload to your site and load it in your browser. Search the resulting page for the keyword “zlib” and look for “zlib.output_compression”. If it’s “On”, we’re in business. Place the following in your root .htaccess file:

# php compression
php_flag zlib.output_compression On
php_value zlib.output_compression_level number

where “number” is a number from 1 to 9. You’ll need to experiment to see what value works for your site.

    If you can’t use zlib, see below for how we can adapt the above technique for compressing PHP.

4. Compress HTML

    Create the following file in your root folder and call it compress_html.php:

<?php
ob_start ("ob_gzhandler");
header ("content-type: text/html; charset: UTF-8");
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "Expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
?>

    And put the following into your root .htaccess file:

# html compression
ForceType application/x-httpd-php
php_value auto_prepend_file http://path/to/your/compress_html.php

    As above, this passes all .htm and .html files through the PHP script, which compresses and caches it.

    If you want to include PHP files (for example, your web host doesn’t allow zlib compression), edit .htaccess and add the PHP file-type to the regex as follows:

Change

<FilesMatch "\.(htm|html)">

to

<FilesMatch "\.(htm|html|php)">

since the Content-Type for PHP is also text/html, this is a simple addition that makes a big difference and is so easy to do.

    If you check http://www.websiteoptimization.com/services/analyze/ again, you should see that ALL your files are now compressed. If any CSS files are uncompressed, go back and apply the CSS technique above on the given folder. If little to nothing is compressed, get a better website host! Contact me privately and I’ll send you a link to a good host (I can’t post the link on wordpress.com).

5. Use WP-Super Cache plugin

This plugin is a must for any WP site with even moderate traffic. I started using it after my website started getting throttled by my webhost for repeated hits. My goal was to limit the amount of duplicate requests (especially the database calls). If you do nothing else, this will lower the amount of database calls your site has to make, resulting in a faster site and better browsing experience.

Categories: Hacks Tags: , , , , , ,