Valid Web Designs » whycss » lower cost

Lower Hosting Costs

Some hosting providers have payment plans for their customers that are based on the amount of bandwidth that is used each month. Bandwidth is the amount of traffic that is permitted to occur between your website and the rest of the Internet. The example used in the previous point, 1. Faster Page Loading, illustrates the difference in load times between a web page using a table-based layout (.25 - .4 seconds) versus that same web page using a CSS-based layout (.1 - .12 seconds). In that example, the table-based layout's file size was approximately 16kb (images not included) while the CSS-based layout's file size was 8kb (images not included). We also mentioned in the above example that the style sheet was contained internally within the HTML file. If one were to remove the style sheet from the HTML file and link it as an external style sheet, then the size of the CSS-based HTML file would be 4kb. 4kb! That is a reduction in file size of 75% (compared to the table-based layout's file size).

So what does this mean and does it apply to you?

Each person who opts to pay a hosting company to host their website must choose a hosting plan. There are tons of different plans available, and unless your hosting plan includes unlimited bandwidth, then the aforementioned example is something that should concern you.

As an example, lets pretend that your current hosting plan allows for 1 gigabyte of bandwidth per month. If your website only had the table-based layout page on it, then that would allow for about 65,536 page views of that page. Under most hosting plans, once you go over your allotted bandwidth, you either:

  1. Pay additional, marked up fees, based on the volume of additional traffic (think of going over your cell phone plan's minutes, being charged per minute for each minute used outside of your predetermined plan, and at the end of the month being surprised by a huge bill).
  2. Your website is temporarily shut down until you purchase a chunk of more bandwidth or upgrade your plan.

In comparison, if your website only has the CSS-based layout page, then that would allow for about 131,072 page views. Thats 2x the amount of traffic compared to using the table-based layout page!

Although this is an example of a single page, the numbers really start to become shocking when you have several pages on a website (like most people do). If you're using a table-based approach, then each web page will load the content AND the style information independently, each time a new page is loaded. However, if you're using a CSS-based approach and have an external style sheet attached to all of your files, then that style information will only be loaded a single time.

The numbers don't lie

The bottom line is that the amount of bandwidth (and consequently, money) you can save using a CSS-based approach are quite astonishing compared to using a table-based approach. The numbers don't lie (and neither do the higher hosting bills you will receive when using a table-based approach).