Optimizing CSS Cascading Style Sheets
Cascading style sheets (CSS) have become the standard in controlling the look and feel of Web sites. Using CSS on Web pages including the selectors, helps Web designers control each element of a Web page down to the smallest details.
Style sheets are probably not the first element of a Web page that comes to mind when considering content optimization, but optimizing style sheets is nevertheless very important. Each time a browser loads a Web page the browser creates connections to the associated style sheet files and loads them separately. That means the fewer the style sheet files are the faster the Web page loads. Combining style sheet files into one file or include the style sheet code inside the Html code will help Web pages load faster.
The first table shows data obtained from few samples on the number of external style sheet files.
| CSS Style Sheet Links | ||||||||
|---|---|---|---|---|---|---|---|---|
| Observed Element | Observed Category | % Found | Average | Min | Max | Median | 80 Percentile Range | |
| Style Sheet Links | Web 2.0 Oriented | 84.57 | 2.38 | 1.00 | 25.00 | 1.00 | 1.00 - 4.00 | |
| Style SheetLinks | Web Design | 61.76 | 1.81 | 1.00 | 9.00 | 1.00 | 1.00 - 4.00 | |
| Style SheetLinks | Tech News and Blogs | 87.77 | 2.92 | 1.00 | 15.00 | 7.00 | 1.00 - 6.00 | |
| Style Sheet Links | Web Marketing | 58.83 | 2.31 | 1.00 | 25.00 | 1.00 | 1.00 - 5.00 | |
| Style Sheet Links | Small Business | 70.33 | 2.56 | 1.00 | 16.00 | 2.00 | 1.00 - 5.00 | |
The second table shows data from two larger samples of Web sites categorized into general and Web sites having prominent search engine positions.
| CSS Style Sheet Links | ||||||||
|---|---|---|---|---|---|---|---|---|
| Observed Element | Observed Category | % Found | Average | Min | Max | Median | 80 Percentile Range | |
| Stylesheet Links | Prominent SE Position | 63.03 | 2.65 | 1.00 | 25.00 | 4.00 | 1.00 - 5.67 | |
| Stylesheet Links | General | 69.80 | 2.41 | 1.00 | 25.00 | 2.67 | 1.00 - 4.83 | |
The third table shows data from the same larger samples on CSS code that is inline/on-page.
| Inline/On-page CSS Style Sheet Code Length | ||||||||
|---|---|---|---|---|---|---|---|---|
| Observed Element | Observed Category | % Found | Average | Min | Max | Median | 80 Percentile Range | |
| On-Page Stylesheets | General | 43.14 | 822.45 | 37.00 | 40,285.00 | 296.33 | 79.93 - 2,157.75 | |
| On-Page Stylesheets | Prominent SE Position | 48.46 | 1,017.40 | 16.00 | 17,229.00 | 574.86 | 83.70 - 2,913.46 | |
According to the above data, the average number of style sheet files is approximately 2.4 per Web page and less than 50% of sampled Web sites use inline/on-page CSS code, which leaves a lot of room to optimize by combining style sheet files or including the CSS code within the Html code. It also shows there are Web sites that use up to 25 style sheet files for a single Web page.
Related links on optmizing CSS style sheets:
