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:

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.

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:

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:

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.

Share this article

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.

Pon

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

http://www.wprecipes.com Jean-Baptiste Jung

Is there a Kraken.io plugin for WP? That’d be great!

Jim

Use public CDNs like cdnjs.com and jsdelivr.com

http://superdit.com aditia

you can found it on google hosting too, another one is google webfonts hosting

Adam Miner

…wasn’t this site showing a bandwidth exceeded message just last week?

http://www.wprecipes.com Jean-Baptiste Jung

Yes, it was, and it inspired me to check some possible flaws on my site, read a lot, and write this article. I learn a lot from my errors

http://www.blueinkdesign.com Adam

The Smush.it WordPress plugin no longer works.

peter

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”

https://plus.google.com/114757086782429944364/posts Gregory P. Smith

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.

Lumbendil

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

http://www.seomix.fr/ Daniel Roch

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.

http://www.youtube.com/watch?v=x5fWPcmo6uk Jamie

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.

Chris finiksopoulos

Hi there,

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

http://explorewindows8.com Troy

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.

http://www.youtube.com/watch?v=x5fWPcmo6uk Jamie

CSS instead of images – definitely a practical and very helpful tip. And of course the rest on the list are useful too.

http://www.fullondesign.co.uk/ Mike Rogers

Also, use a CDN (Such as CloudFront) & cookieless (Make a cdn.yourdomain.com & set your cookies to only work on www.) domain for serving files.

http://teamcody.org/ Kim Costas

The small and medium-sized online shop, you will propose what hosting company ?

http://goask.it Jonas

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

http://dieselgeneratorsnepal.com Priya

Great post for reducing load time of websites. Hope these tips will work in my website. Thank you so much for this article

http://todaweb7.com/ Jimmy – Estrada

Brother you saved my life this article was looking like crazy!

until it is in truth a lot but thank you very much for taking the time to write.

Greetings!

http://feed2.me David

You’re recommending us to abuse Dropbox’s free service and use it as some sort of “cdn”?

http://www.reynoldsdigital.com Reynolds Digital

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.

Streetjerk

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 ?

http://www.tutorialwebiz.com Kimm

We can use a plugin to compress PHP file, right?!..

Thanks, very helpful information.

Mittul Chauhan

i like hotlinking point .. very informative .. thanks for this.

ANouar Agr

Thank you so much ! can you please review my website and tell me whats missing !? | http://adf-ly.bl.ee