Jump to content

Css: Actual Bandwidth Savings


owatagal

Recommended Posts

A lot of times on this forum we talk about the benefits of CSS in terms of updating sites--how it's easier to manage the layout from a single file and so on. Smaller page size is a benefit, too, but it's sometimes hard to estimate how much smaller CSS actually makes a site. So here's a completely unscientific case study, using the numbers from a site I'm currently working on.

 

Someone else started this site; it was made using HTML table layouts. No CSS in sight. The navigation menu uses Javascript image rollovers. The current average page size (including all images) is 85 K.

 

Just deleting "font-face" junk in the HTML and using pure paragraph tags (styled by CSS) cut the page size by 2-3 K.

 

Converting the table layouts to pure CSS cuts another 10K. This is NOT a complicated layout: it's a two-column layout with a header. It takes three -div- tags to create the effect of 10K of table layout HTML.

 

Converting the Javascript menu to a text menu with CSS rollover effects cuts another 15K (mostly in image weight).

 

All told, a pure CSS layout cuts 27-30K per page, making them roughly 35% smaller.

 

35% smaller. Now think of that in terms of bandwidth savings and decreased visitor load time. Nice, huh?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...