Web Design that taps into the haromny and vision of your dreams.

Reduce Wordpress Bandwidth Usage and Page Load Time

Reduce WordPress bandwidth usage by compressing files

Written By on in PHP

780 words, estimated reading time 4 minutes.

I have recently discovered a method by which I can reduce my overall monthly bandwidth for this website by 500MB. Using the same technique I have reduced the bandwidth on another of my sites by 3500GB.

I will now share with you how I was able to reduce WordPress bandwidth usage, with very little effort and only minimal PHP knowledge. In fact, all you really 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.

PHP Info results
PHP Info results

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:

FileAccessesData Transferred
prototype.js24205945 MB
effects.js24025377 MB
header.jpg22470252 MB
lightbox.js24035244 MB
style.css24190133 MB

We have to note that an 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 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:

Testing GZip Output Compression
Testing GZip Output Compression

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.

Last updated on: Friday 8th September 2017

 

Comments
Santhosh for Agile virtua

Santhosh for Agile virtua

Seems so simple but I tried with my shared hosting in Windows, haeve latest wordpress and the moment I upload httpaccess, my site wont wont come and points to IIS refresh.

Reply to Santhosh for Agile virtua
Asad

Asad

thanks for helful tips and save my bandwidth :)

Reply to Asad
Alex h

Alex h

how could i know or monitor wich scrips cosume more bandwidth?

Reply to Alex h
Hussein EROL

Hussein EROL

Nice tips. Thanks.

Reply to Hussein EROL
?N

?N

it's a very good method, i'll have a try now. thx!

Reply to ?N

 

Leave a Reply

Your email address will not be published.





If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me