Practical tips to save bandwidth and reduce server load

by Jean. 26 Comments -

Bandwidth (the data transfered from your web server to the client browser) is generally limited by hosting providers so, as a website owner, you have to make sure to use as less bandwidth as possible to avoid further problems.
In this article, I have compiled the most useful tips to save as much bandwidth as possible while making your website fast.

Use CSS instead of images

Images can definitely consume lots of bandwidth. As most browsers are now able to render graphics such as box shadows or rounded borders, you should definitely use CSS instead of images when possible, as CSS code consume a lot less bandwidth than images.

If you need your website to be compatible with old browsers such as the infamous IE6, the solution is to use an alternative stylesheet and images only for the old browser. Use a conditional comment to link to your IE6 only stylesheet:

<!--[if IE 6]>
<link href="ieonly.css" rel="stylesheet" />
<![endif]-->

Always make sure that your images are optimized

Although you can replace many images with CSS, images are still an important part of a website. But when you need to use images, you have to make sure they are optimized for being displayed online.

If you’re using Adobe Photoshop, you can use the “Save for web” option that allow you to easily find the best compromise between quality and image size. Another option is to use a free online service to reduce image size while keeping its quality high. This service is called Smush It and I can’t stop using it to optimize my images.

If you’re using WordPress, you’ll be happy to read that a free Smush It plugin is available. Install it, and it will automatically optimize any image you’ll upload to your WordPress site using the uploader. Cool, isn’t it?

Use a cache on your website

Caching is the action of retrieving data from a ready storage (called cache) instead of using resources to generate it every time the same information is needed.

The code below will add caching to files as such as .jpg, .gif, .swf. The cache will last 1 week. For other file types, you may adjust the cache life. For example, CSS and JavaScript files should be cached for 12 hours.
Paste it into your .htaccess file.

<filesmatch "\.(jpg|jpeg|png|gif|swf)$"="">
Header set Cache-Control "max-age=604800, public"
</filesmatch>

WordPress user? Then I definitely recommend installing the W3 Total Cache plugin. It is a free and complete caching solution that helps optimizing every aspect of your blog or website. It makes your site running faster and use less bandwidth.

Prevent bandwidth stealing and hotlinking

A bad but very common practice on the internet is hotlinking: What is hotlinking? Here is a quick example: Website A host an image to display on a html page. Website B wants to display the same image that website A use. Website B link to website A image, causing website A bandwidth to be consumed every time website B is loaded.

So definitely, you don’t want to pay bandwidth to others, right? To do so, create an image (it can be a 1*1 transparent gif image, or an image stating “don’t steal my images” and upload it to your server, or even better to a free image hosting website. Then, add the following code into your site .htaccess file. Don’t forget to update the code with your own website and image urls:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://yourserver.com/yourimage.gif [NC,R,L]

Use Minify to compress CSS and JavaScript files

Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Please not that Minify is included in the WordPress W3 Total Cache plugin, so if you already installed this plugin you have nothing else to do to minify your blog.

Use hosting websites to host big files

If you have to host big files (videos, photoshop psd files, big images, etc) you should definitely rely on a third party service such as Dropbox to host your files. That way, when someone will download it, it will not consume your server bandwidth but instead the bandwidth of the third party service.

Use GZip compression on your PHP files

GZip compression is a technique that compress data being sent out from your web server, and have the browser decompress this data on the fly, thus reducing the amount of data sent and increasing the page display speed. Recent browsers all supports GZip compression.

To achieve GZip compression on your website, you have to create 2 files. Name the first one gzip_header.php:

<?php
$phpver = phpversion();
$useragent = (isset($_SERVER["HTTP_USER_AGENT"]) ) ? $_SERVER["HTTP_USER_AGENT"] : $HTTP_USER_AGENT;

if ( $phpver >= '4.0.4pl1' && ( strstr($useragent,'compatible') || strstr($useragent,'Gecko') ) ) {
if ( extension_loaded('zlib') ) {
ob_start('ob_gzhandler');
}
} else if ( $phpver > '4.0' ) {
if ( strstr($HTTP_SERVER_VARS['HTTP_ACCEPT_ENCODING'], 'gzip') ) {
if ( extension_loaded('zlib') ) {
$do_gzip_compress = true;
ob_start();
ob_implicit_flush(0);
header('Content-Encoding: gzip');
}
}
}
?>

Now, create a second file and name it gzip_footer.php:

<?php
$gzip_contents = ob_get_contents();
ob_end_clean();

$gzip_size = strlen($gzip_contents);
$gzip_crc = crc32($gzip_contents);

$gzip_contents = gzcompress($gzip_contents, 9);
$gzip_contents = substr($gzip_contents, 0, strlen($gzip_contents) - 4);

echo "\x1f\x8b\x08\x00\x00\x00\x00\x00";
echo $gzip_contents;
echo pack('V', $gzip_crc);
echo pack('V', $gzip_size);
?>

Once you have created the gzip_header.php and the gzip_footer.php files, you can create a new file which includes your regular template between the gzip_header.php and the gzip_footer.php files:

<?php
include('gzip_header.php');
include('your_template_file.php');
include('gzip_footer.php');
?>

Source article for the codes: http://www.techiecorner.com/7/speed-up-and-save-your-website…

Use a reliable web hosting

At last but not least, it is obvious that you should use a reliable web host if you want your website to be fast. I’ve used lots of web hosts and some are really good and some other sucks. For example, you should definitely avoid Phpnet.org and Maven Hosting, both of them shut my websites down just because they were receiving too many visits.

On the other hand, I was pleased with WP Web Host, which is really good if you’re hosting a small or medium WordPress site or blog. If you have a popular and/or large website, I definitely recommend Vidahost, which is CatsWhoCode webhost. My site is still fast although I receive lots of traffic. If you want to get some hosting from Vidahost, don’t forget to use my custom coupon CATSWHOCODE to get 10% off anything.

Comments (26) - Leave yours

  1. Keith said:

    Very helpful and concise article, thanks! I’d like to mention, as an addition to the image optimization section, that there’s a free service called “TinyPNG” (www.tinypng.org) which compresses 24-bit PNGs with alpha to 8-bit PNGs while retaining the alpha! I highly recommend checking it out.

  2. Pon said:

    Hint: use the new Kraken.io – beta.kraken.io for image optimization. Kraken is world ahead of smush.it and others.

  3. peter said:

    I tried caching and adding the following to my .htaccess file but it just returned internal server error:

    Header set Cache-Control “max-age=604800, public”

  4. Gregory P. Smith said:

    When optimizing can also use the free page load speed analysis tools such as https://developers.google.com/speed/pagespeed/ and http://developer.yahoo.com/yslow/ to figure out where you’ll get the most benefit for your effort to reduce load time.

  5. Lumbendil said:

    I’d recommend configuring Apache to do the GZip instead of PHP, no extra code. It’s done using mod_deflate.

  6. Daniel Roch said:

    You can also use a CDN on a subdomain. You will reduce bandwith by removing cookies from static content.

    And you can minify HTML too in order to improve speed and bandwidth.

  7. Jamie said:

    Definitely practical. Most of those who are in change of the websites may not pay attention to the bandwidth but it is really a factor that can make or break your site.

  8. Chris finiksopoulos said:

    Hi there,

    What hosting company would you suggest for a small-medium eshop ?? (Preferably for magento platform)
    Thank you :)

  9. Troy said:

    Works fine by just adding the code to you header.php, and footer.php in your theme directory just save a backup so if you encounter any issues you can restore your original files.

  10. Jonas said:

    That’s some pretty neat tricks. Never thought about the problem about hitlinking. Boy do I have to make some changes on a couple of websites :)

  11. Reynolds Digital said:

    Another example would be to use Google Fonts, I’m using a bunch on some of my wordpress sites like www.reynoldsdigital.com to make it really stand off the page AND load much faster than using embedded fonts.

  12. Streetjerk said:

    which loads faster ? a website having its images in its image folder ?? or the images hosted in some image hosting website?

    to be more specific can i make my images or the whole website load faster(which contains images) by sharing the image hosting site’s bandwidth ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!