[Re]Encoded.com

Save on Bandwidth!

Save on Bandwidth!
Paying close attention to your bandwidth really makes a huge difference, and your server will love you for it! In most cases, popular sites will have been monetized for the best possible load to the browser without “wasting” any of their own server bandwidth, or for avoidance of server crashes and downtime. When you’re dealing with traffic in the millions, you can be sure that every kilobit counts!

The efforts made to provide content to such a large number of people without incurring massive server loads are very basic, and start right from the very beginning.

In this article, I’ll present some tips to reduce server load and save bandwidth for your growing websites; I have picked out the ones that are the most economical for saving time and effort.

The Most Obvious
More than 50 percent of the bandwidth on most websites is used by images! Optimizing images is the best way to improve the bandwidth used on your web server and by most cases the easiest.

Use jpeg or gif files for graphics and primary imagery, as these are naturally optimized for the web. (For slick web 2.0 style design, PNG files can be used with alpha transparency) – A good guideline to use is to keep the size of an image or graphic below 10KB.  Though this can be especially hard with some animations, but if you can do it, you’ll notice the difference in bandwidth and loads on your server instantly.

To get this result, you can use various image conversion programs available all over the – be sure to get an optimization program that will be able to retain the image quality while drastically reducing its size. If I were to recommend anything it would be Fireworks CS4. Ever since its launch it has blown away the ever popular Adobe Imageready (remember that program??) and most image optimization programs with its many features for, jpg, gif and png graphics.

NOTE: When you have an image with lots of colors or some gradients, you should go for JPEG or PNG. Play around with the quality to change the file size and see what you can come up with you will be surprised!

CSS to Big?
CSS files can also be massive, with lots of useless breaks and spaces. CSS shorthand properties are great and cut down the load and have the same result. They’re a great way to reduce the amount of code contained in a CSS document, allowing for faster download times and easier editing.

Remove the junk!
You can limit your pages size by getting rid of unnecessary white space in your HTML code, even removing the comments helps! (if you don’t need them). Whether you use WYSIWYG editors or text editors; your HTML most likely contains unneeded spaces, returns, tags, default values in HTML, etc.

Without looking through lines and lines of code trying to figure out how you can improve your HTML performance, which takes forever (but is technically the proper way to do it) you may find it easier to find what I call a “page-squeezer” – I don’t have much luck when it comes to letting other software do the hard work for me, so I cannot guarantee the results, though I have heard good things about Wordoff (http://wordoff.org/), so you may want to check that out!

Use AJAX! (wherever you can)
AJAX is a technology for a web page to communicate with a server using JavaScript without reloading the page. Most often, related pages on a website consist of much content that is common between them. Using traditional methods, that content would have to be reloaded on every request to the server. However, using Ajax, a web application can request only the content that needs to be updated, thus drastically reducing bandwidth usage and load time.

Hot link this!
For those of you that don’t know, hot linking refers to linking images or downloads from your website to other website(s). Basically the images are on your website and other websites just link image tags to your website, stealing your bandwidth. If people are ‘hot linking’ to your image files, they are using your bandwidth which you will ultimately pay for!

Unless you don’t mind, and like using hot linking from your website as a sort of viral marketing practice, you can stop this from happening by placing an “.htaccess” file in the folder where your images are stored. This will only allow requests from your own pages to display the images – anyone linking to them from outside of your website, or any website you choose, will have the “red x” display instead of the image – which is a sneaky treat for stealers! Also by request you can build access URLS in the .htaccess document that allows whoever you wish to get your images (advanced).

GZIP it!
If you are using PHP on your server then you can use “mod_gzip” for Apache to compress your content. Gzip is a module for Apache setups (lives on updated windows and Unix/Linux versions of apache as of 2008) that significantly lower the size of a webpage in real time, when it is requested by a browser that can understand compressed content (most modern browsers). Remember, the great thing is that the compression on the server is activated only if the browsers requests compressed content, in case the browser does not understand compressed content or does not request for it, the server simply servers plain, uncompressed content!

Let them deal with it!
If you want to share (big) files and not let your bandwidth get chewed up, host the file on free or paid image/file hosting website! This will save an incredible amount of bandwidth on your server. Before doing this, however, make sure you are permitted by your service provider to do that (oops!) Also for video content, a trick would be the most obvious choice as YouTube, appending their embedded player to stream high quality or HD video into your site is a sweet little trick. Another great place that takes care of this is Vimeo which boasts a fully customizable player and naturally spits out high quality video!

Caching
Caching is the only method of retrieving data from a ready storage (cache) instead of using resources to generate it every time the same information is needed that makes any sense. Enable caching on your website! If it’s not dynamic content, it will allow your visitors to read from your server once in a while, the rest of the times it will read from its own backup copies until they expire – which you can also set. If most of the images on your site never change and most of the graphics and logos stay in their place it may be a good idea is to cache your entire website!

In closing…
Without using any of these tips or familiarizing yourself just a little bit with bandwidth loads you are most likely headed for disaster should your website start generating good traffic, OR if you are interested in going for any kind of site promotion that drives major amounts traffic to your site!. A little organization and practice lets your server breathe easier and your website flow naturally so that you don’t have to worry! (servers are our friends)