Reduce Wordpress Bandwidth Usage and Improve Page Load TimeHow to use PHP output buffering and compression to reduce bandwidth usage and improve page load speeds, an important SEO metric.
I will now share with you how I was able to reduce WordPress bandwidth usage, with very little effort and only minimal PHP knowledge. All you need to do is copy and paste a few lines! It's that easy. As well as reducing bandwidth (and saving bandwidth costs!) it will also make the files faster to download, meaning your website will load quicker!
This technique involves compressing files before they are sent to the browser. You need to be running PHP with the GZip module loaded. If you're not sure if you have the module loaded, you can test by creating a phpinfo.php file with the following code:
<php echo phpinfo(); ?> Upload this to your server and access it. You will see lots of information about your server config. Scroll down to the section titled zlib, and under status, it should say Enabled. If not you will have to speak with your provider to get it enabled. Don't forget to delete the file when you're done looking - it could be a security threat.
Next, you will need to find out what files are hogging your bandwidth. You can use a free Apache log analyser to report on bandwidth by file.
My top bandwidth hogs were over a one-month period, for one site:
| File | Accesses | Data Transferred |
|---|---|---|
| prototype.js | 24205 | 945 MB |
| effects.js | 24025 | 377 MB |
| header.jpg | 22470 | 252 MB |
| lightbox.js | 24035 | 244 MB |
| style.css | 24190 | 133 MB |
We have to note that access isn't necessarily a download. The browser could just be getting the header of the file to see if it's been changed since the cached version was downloaded.
This technique only works on text files such as PHP files, CSS style sheets, Javascript/VBScript etc...
Unfortunately, it will not work on JPEG, GIF or PNG images as they are already compressed. It will work in almost 99% of browsers, and if it isn't supported then they just get the normal uncompressed version.
I am going to use my number one culprit for this example, prototype.js. Weighing in at a whopping 95kb, this Javascript file is used by WordPress and downloaded over 1000 times a day on one of my sites, that's 95MB per day or nearly 3 Gigabytes per month!!!
Prototype.js is usually installed in {BLOG_DIR}/includes/prototype.js, so we need to open up this file in a text editor and add the following line at the very start of the file. There must be no whitespace before this code otherwise it will not work. Please make a backup copy of any file you change, just in case something goes wrong.
<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: application/x-javascript"); ?> This will test if the zlib extension is loaded and if it is, start output buffering.
And at the very bottom of the file, no white space after, add this code:
<?php if(extension_loaded('zlib')){ob_end_flush();}?> This will test if the zlib extension is loaded and if it is, sends the compressed data to the browser.
Save the file and exit your editor. Now you need to create (or edit) the file called .htaccess, and add the following lines:
<Files prototype.js> ForceType application/x-httpd-php </Files>
This instructs Apache to treat the Javascript file as a PHP file, thus running our compression code. Save the file and exit. Now you need to upload the modified files to your site. Once that is done, you need to check your site still works correctly, type in the direct URL of the file you modified and make sure that there is no PHP code at the top. If there is, then the changes to .htaccess were not correct.
If your site works ok, and there is no PHP code in the javascript file, then the final test is online. Head over to a GZip Page tester, such as the GIDNetwork Page Tester and type in the URL to the file.
If everything is working properly, you should see a screen like this:
Now all you need to do is repeat the process for each different file you wish to compress. Don't forget to change the Content-Type: section of the PHP code according to the file being compressed. See below for the common MIME types to use.
- HTML - text/html
- PHP - text/html
- XHTML - application/xhtml+xml
- JavaScript - application/x-javascript
- CSS StyleSheet - text/css
Now wait a few days and have a look at your logs again, and you should see a decrease in bandwidth.
