Save the rainforests, and save your bandwidth – bandwidth, if you don’t know, is the amount of data that can run through your server at one time. Hosting companies will typically limit the amount of bandwidth you can use, and being careful means your site can keep operating as quickly as possible for anyone who visits it, including polar bears.

If your site loads more easily, that means you can process more browser requests at the same time and that you are generally conserving. No reason to run servers too hard and burn up energy – plus, obviously, it costs you money and slows down the speed at which your site loads.

For this piece I used information from a Jean-Baptiste Jung article for Cats who Code and an anonymous piece from Calomel.org.

Bonus Tip! Bonus bandwidth-saving tip: stop looking at the site yourself. You’re just using up your bandwidth. Also carefully vet people before allowing them to visit your site. Put up a pop-up on your landing page: “Are you sure you want to use up my bandwidth?” with “Yes, I’m Selfish,” and, “No, I’m a Good Person” buttons.

Tip 1: CSS Rather than Images

All the popular browsers are now able to pull up the complexities of graphics built with CSS, and CSS will use much less bandwidth than an image file will.

Some older browsers can’t view CSS graphics accurately. You can use the below piece of code to enable viewing for users of Internet Explorer 6. You’re forwarding them to an alternate stylesheet so that people who haven’t updated their software since August 27, 2001, can view your website just like everyone else. I still use IE6 myself. What’s all the hoopla about these new browsers and new versions? Twelve years later, I’m still sold. It’s called loyalty.

<!–[if IE 6]>

<link href=”ieonly.css” rel=”stylesheet” />

<![endif]–>

Tip 2: Compress Your Data

You want all the information on your site to be as tightly composed as possible. Data compression involves using code with fewer bits/bytes. (For the uninitiated, there are typically 8 bits in 1 byte, similarly as with letters and words. The functionality is similar to words too – to increase efficiency and memory by transferring data in small groups.) You can save up to 80% of bandwidth by compressing. You can also save up to 80% of room in your house by compressing your belongings.

Your server will typically have a module to allow for compression. For example, with lighttpd and Apache, the module is mod_compress (also a demand you can make to a “mod” individual to make themselves smaller and more manageable).  Newer releases of Apache version 2 also have a mod_deflate module (a very cruel thing to demand of a “mod”) that allows you to compress specified file types. You can compress CSS and HTML up to 90%. Do not compress the jpg’s though: they are already compressed.

Any page that you compress using mod_compress – and the reason this command is particularly useful – will be saved on the server. It compresses once and keeps the file for repeated use when it receives an additional request from another user.

Compression, unlike teaching emotionally-disturbed children how to steal from their parents without getting caught, has a downside. The server must package the data, meaning that encrypting and decrypting must take place locally. Your energy use on your server will still be affected then in CPU – but it’s not substantial. It doesn’t take more than a few seconds to compress a typical website. (A human being usually takes 7 to 12 minutes to compress, by comparison.)

Tip 3: Optimize Images

OK, so you’ve implemented CSS wherever you can. You still have some images though, because hey, everyone needs to see pictures of your custom dining sets (frankly, much less important than most custom dining set shops realize).

Optimize the images. Photoshop contains a “Save for Web” feature. This option reduces the size as much as it can without significantly losing quality. It’s like a brain without all the meat and blood – like a robot image size decider without a hormonal imbalance.

You can also use a free online service to reduce your image size. Here’s one called Smush It, per Jean-Baptiste. Here, as well, is a plugin for WordPress, if you use that (automatically “smushes” everything you upload). Men, here’s a good pickup line: “Baby, I want to make you an Internet star, but first I need to smush you … repeatedly.”

Tip 4: Caching & the Expires Header

Consider caching when you design your site. The way to control caching is via the Expires HTTP header. The header lets browsers know how long the content is valid, after which it re-accesses the server to check if the object has updated. OCD browsers, though, will keep checking and rechecking the server regardless whether it makes any logical sense or how many times you tell them they’re not helping.

Caching means that the data is stored locally on the site visitor’s machine. What this process allows is less reliance on your server to repeatedly deliver the same material. You not only minimize bandwidth usage with caching. You also greatly increase page load times, which is popular among people who aren’t using the Internet to develop patience so that they no longer need to use the stress ball their court-appointed physician demanded they use during probation until “marked progress” was evident.

Elements of the page that can be given longer expiration periods include logos, headers, and navigation bars.  Other parts of pages that change frequently should be given shorter expirations. Ranch salad dressing should be refreshed any time you have out-of-town company.

You can set expire times typically in three different ways: absolute, last access, or last modification. Absolute is a specified time without additional parameters, whereas access relates to when the data was most recently viewed by the user, and modification refers to when the server most recently updated the content.

The below code contains a sample tag for use on Apache servers. The tag would automatically refresh content after 2 hours, which would make sense in a case where you know that certain data will update at that interval.

# Expires mod

ExpiresActive On

ExpiresDefault “access plus 2 hours”

Tip 5: Prevention of Bandwidth Theft

It’s good to be generous with your bandwidth, which is why you should freely allow hotlinking on your site. A hotlink is when a person refers to your page and loads an image or other content located on your server to present on their own site. In other words, it means they are using your server to load elements of their own webpage.

The way to fight this is to create an image that says, “Don’t Steal My Image” or “Free Hotlinking Image – Please Post to Your Social Media.” You could either store it on your server or on a free image hosting site (the latter would be better because then they aren’t accessing the image even the first time it’s used).

Once you have created the image, save this code to your .htaccess file (updated with your own stuff of course – specifically, be sure to change “yourdomain.com” to “cutepicturesofkittens.xxx”).

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]

Tip 6: Minimize Connections by Users

Each object on the page represents a different connection. If you minimize your number of objects per page, your server will not be bombarded by requests every time someone accesses the site. For this reason, you probably just want to have some text in the middle of the page and that’s it. No media. In fact, you may not want to have anything on the site at all. Say to your customers, “There’s nothing on our website, because I respect your time.”

Number of connections doesn’t just apply to your own content. It also applies to advertising. If the server related to the advertising is not as fast as your site is, it will slow everything down. Typically, pages will load on a browser in order as they appear in the HTML file. Placing a bunch of ads at the top of your site will make your site itself look slow to whoever is viewing it. If ads are slow, consider placing a pop-up on your site that says, “Please wait while these guys I know try to sell you some stuff.”

Tip 7: For Huge Files, Use a Third Party

Obviously huge files take up a lot of bandwidth. No need to have those files on your server. A service like Dropbox can be used to host images that you’d rather move off your own server. Dropbox is a system built for large files, so it’s a great option when you don’t want to overload your own.

Examples of good files to host on Dropbox are all your customers’ personal information in unencrypted form in a file named “Highly Sensitive Information of Rich People.” You also may want to use Dropbox for your “Huge Amount of Uncompressed Nonsense” file.

Tip 8: Eyes Out for Bots

Bots like to look at your data as frequently as possible. If you do not want certain pages to be indexed, place them in the robots.txt file. You can keep the Google bot that looks for images from scanning yours, for example.

Your modified date/time is listed for each page, which is typically the last time you updated it. This information goes out to the bots as well as humans. The bot won’t recheck a page if it sees the page is unchanged. If you want bots to take another look, change HTML files to reflect the current time. The bots are awaiting your instructions. They are here to please you. All they ask if that you give them everything you have, except your heart. They will come later for your heart.

Conclusion

Hopefully a few of those tips will be useful for you. Save that bandwidth. Make yourself sleek and efficient. Smush everyone and everything in your path, including the bots.

by Kent Roberts and Richard Norwood