CSS embeded within dwt vs external style sheet

Question

I created a new website with 46 pages: http://www.lampshade111.com/ I use Microsoft Expression Web 4 employing a dynamic web template. All css was embedded within the heading of the dwt page and updated to every individual web page. Everything looks and works perfectly - no problems.

However, everything I have read suggests using an external style sheet. So in the spirit of "good practice", I removed css from the dwt heading and employed (linked) an external style sheet to the dwt. Of course the individual pages are updated by the dwt and the linked css file is shown on every page. Again, everything looks and works perfectly as before.

Problem: When viewing my website after employing an external style sheet, the website is much slower in my browser.

I have another website with 256 pages and all css is embedded within the heading of the master dwt - no external style sheet. http://www.hoylelamps.com/ It has worked fine for many years.

Questions: Is there any reason to not use css in the heading of a dwt ? Is this suppose to be more efficient (faster) than an external style sheet ? I cannot find any information on this subject.

Thanks for any help ? - Jim

Answer 1

I can't imagine why an external style sheet is "much slower" than an external one. A linked style sheet will be cached as soon as it is loaded and will not have to be loaded a second time. That means the second and third pages you load should be faster, unless you are using totally different formatting on each page.

Embedded style sheets will run faster at first, because only one resource has to be loaded. But over time the work needed to maintain multiple pages with embedded style sheets will be much more of a burden. Remember every time you change even one CSS rule in any page, you will have to make that change in every single page and upload all those pages again. If you don't, you will have individual pages formatted differently throughout the site.

An external linked style sheet precludes this problem. One style sheet, one file to correct and to upload. The only things I can think of that would make your page load or respond more slowly are the following:

• Very large style sheet
• Using "import" instead of "link" command (some browsers react differently to these commands)
• You are using non-standard CSS or very dense styling commands.

Without seeing the CSS I really can't give you any more suggestions. The fact that the browser has to load two files at first, will cause it to function slightly slower. But it's hard to understand why the entire site runs more slowly.

Here are some suggestions:

• Have you checked and tested your pages in other browsers and other computers? Maybe it's not the page at all. Maybe it's the browser or the computer you are using.
• If your style sheet is large, break it into logical components. I have style sheets that format tables, forms and special components that don't appear on every page. Load only the CSS that is pertinent to that page. Have one main style sheet and then specialized style sheets for specific types of components, like those mentioned.
• Check the types of commands you are using. Are you making best advantage of Cascade, Inheritance, and specificity? Try to create CSS that is as efficient as possible.

Keeping embedded style sheets may be easy at first, but updating and maintaining a large website with embedded style sheets would be much more burdensome.

Hope that helps.