Cascading Style Sheets (CSS) can be very useful. Style Sheet's come in very handy when trying to enhance the design of your page that cannot normally be done through HTML. On JoeUser we have used Style Sheets for two primary reasons:

1) To Reduce the amount of HTML in our pages
2) To make changing the style (look and color) of the site easier

When trying to do complicated site designs you may find yourself trying to nest tables within each other to obtain a certain look. Especially when you want to use 1 pixel width borders. However, this can lead to a large amount of HTML overhead on your page causing it to be slow. So using CSS to define the look of your site can dramatically decrease the amount HTML that is required to create the look of your site.

This is the route that we have taken on JoeUser.com. When developing the site one of my prime directives was to put as much as possible in to the Style Sheets. The result of this had some negative side effects. JoeUser uses quite a few graphics to obtain it's look and those graphics were embedded into the style sheets. Turn's out that this is not a good idea. The speed of JoeUser started to become a problem. Page loading times were getting worse as we went along. Getting to the point that even on a fast connection you didn't want to wait for the page to load and just left the site. I couldn't imagine what it was like on a dial-up. Ugh!

So over the course of the last two weeks we have been pulling our hair out trying to find the cause of why the site is loading so slow. We have tweaked the code, reduced the number of tables we were using, removed white space to make the amount of data we are sending less, compressed the images more and most importantly, we have removed graphics from being defined in the Style Sheets to being code directly into the HTML.

Having our graphics coded directly into the styles sheets for BackGround images and such turned out to be a bad idea. It appears that by having your images coded into CSS that they do not get cached and have to be redownload with each page load. And on top of that, the CSS Styles do not get applied until after the page is loaded, so you get to see the style being applied (and watch the images download) after page has been fetched.

So we have overhauled JoeUser and removed the images from CSS and put them directly into HTML. Hopefully you should see an improvement in speed to the site.