However, there are a number of other factors that affect page rendering times—that is, the time between pressing the Enter key or clicking a link, and the page being fully displayed in the browser. These factors include network latency, server speeds, number of requests required (each image, external style sheet, and JavaScript fi le is a separate request), and the complexity of the CSS and any JavaScript that renders content to the screen. Some of these things are within your control, and some not. Yahoo!’s Yslow is a Firefox add-on that extends Firebug’s capability and can help you further understand what is affecting your pages’ performance. If you run a large Web site, I recommend you run your pages through Firebug and look at the Yslow tab also. Discussion around site performance and links to these and other tools can be found at http://davidherron.com/book-page/190-measuring-website-speed.
CSS and Site Performance
Organizing your styles across multiple style sheets can really help you manage the numerous styles for your sites. However, don’t split up your CSS for any given page into a very large number of style sheets. If you load more than say, five style sheets per page, even if they are not very big in kilobytes individually, you may start to see a slower page load performance. Often, more time is required to send the request and establish the connection for each fi e transfer than the time spent actually moving the data itself from server to browser. If you think this is happening, baseline the download speed with the multiple style sheets using Firebug (a debugging add-on for your Firefox browser—search www.getfirefox.com > Add-ons). Then copy all the styles into one style sheet, link your page to only that one style sheet, and measure again. If you see a noticeable difference, then you might want to start consolidating your styles into fewer style sheets.
Color styles in CSS
I usually make a copy of the text_n_colors.css style sheet in the CSS folder of the project, and then, so I don’t have to modify those styles directly, I add the styles specifi c to the site at the end of this style sheet, allowing me to override the preceding styles that I want to change. I will do this in the example that follows.
The text_n_colors.css style sheet which I copy from the library into each site’s CSS folder, as I did previously, is currently a few hundred lines long as a I have a number of color schemes set up in it. At the end of the styling process, I tend to go back into this style sheet and remove all the sets of styles I didn’t need—if I based my design on the set of color styles with the lime class, I might as well strip out the other color sets. To save space here, I won’t show all the styles in this style sheet; I’ll just show you the styles I kept from the original text_n_colors.css after completing the design for this site. Here they are, broken into sections with my comments between each section.
0