Ten Tips On Saving Bandwidth
June 29, 2011 | Taylor Jasko
Saving bandwidth on your website is one ideal way to reduce the bills you need to pay. Like many shared hosting companies, you may have "unlimited" bandwidth and it may not be a huge factor to you, but what should be is your site's reliability, uptime, and performance. If you're receiving too many visitors, they can potentially shut down your website for all the content they are downloading off your server.
If your website is slow, it's most likely the case that your website is too large. Here are our tips on how to save bandwidth without doing all too much!
- Images are bloated; make sure they're optimized! It's clear that images take up a major part of any modern website, but the question is, what can you really do? The only thing you can do is make sure they're optimized! Too keep it simple, make sure to use the functionality of Photoshop's "Save for Web" features. Using Photohop's web features, you're able to create images that are optimized and not too large to download. If you want more information on image optimization, we have a whole post written on just this! Vist our image optimization post for more details. Also, you should use sprite maps, which are simply images stuck together, on your website. To do this, take a look at this article on CSS-Tricks and SpriteMe.
- Pay attention to how much code you use! This is one obvious fact, but the more code you use for your website, the longer it'll take to download and the bigger it'll be. When writing HTML, try to keep it in an orderly format without using too much code. You can use services like HTMLTidy to compress your HTML documents. Just like HTML, you can also compress your CSS files also using services like Clean CSS. CSS and HTML comments will also add bloat, so try to use them sparingly in a production website. There are plugins for WordPress you can use, like W3 Total Cache, to compress your source code files entirely.
- Take advantage of GZIP compression! Not only can you compress your source code into some hard-to-read file, your server can also compress your files using GZIP automatically. GZIP will compress your files delivered to your users, if their browser supports it (all modern browsers do), and will be uncompressed once they receive the file. To enable GZIP, take a look at the Apache module "deflate" or the GZIP module available in Nginx.
- People might steal your bandwidth! When people are linking to your images on your server, they are "stealing" your bandwidth via hotlinking, or linking to your content on a different server directly. This could become expensive in case the file is placed on a popular site. Luckily, you can disable this easily and save bandwidth if it's happening to you!
- Use CSS styling as much as you can! CSS has been given to you for one reason, to style websites without images! CSS does one amazing job and with CSS3, you can achieve more like rounded corners and shadows without using any images. If you can do it using CSS, go for it.
- Tables are so Web 1.0; use <DIV>/<SPAN>/CSS to style your website! That's right web developers! Don't be lazy and use those tables! You should rather turn divs and spans into a styled table instead of using the table attribute in HTML. The table attribute is too old and takes too much code to manage; using divs and spans will reduce the size of your HTML file.
- Repeated images are not old school! Even though repeated images can be associated with those old websites back in the early days of the internet, let's not think of that. Instead, when you are designing your website, design it in a way that if you have any type of repeating pattering, save it as a tiny image and let CSS repeat the image for you.
- Take advantage of CDNs! One easy-to-achieve way of saving bandwidth is to direct your files elsewhere, or in this case, a CDN like us :). Not only will a CDN speed up your website, it will also save you bandwidth as it's directing the content elsewhere.
- Search engines will crawl on you! Search engines, especially Google, will crawl your sites like bandwidth is never ending. You can use Google Webmaster Tools to reduce how often they will go through your website.
- AJAX is there to help! AJAX was made for one reason, loading content dynamically without refreshing your browser. Because of this, durring that refresh, a good portion of your site content is left unchanged. You could implement AJAX so when a user clicks on a link, it'll only load the needed content. If the theme of your website is constant, AJAX is one possibility for you. Besides, you could add in some fancy transitions too and your users will love you for having them! Think of Twitter or Facebook as they both rely on AJAX quite a bit.