Practical tips to save bandwidth and reduce server load

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.

via CatsWhoCode.com http://www.catswhocode.com/blog/practical-tips-to-save-bandwidth-and-reduce-server-load