A lot can be gained in terms of website performance by the wise use of cascading stylesheets and styles on the website, and these are relatively easy things to accomplish. They revolve around styles and stylesheet placement.
Stylesheets at the top
One important rule is placing stylesheets at the top, within the HEAD tags. While most browsers will load all styles eventually regardless of placement on the page, putting styles in the HEAD helps the page load progressively, giving users visual feedback that hey, something is loading. One of the worst things that could happen if your styles aren’t in the <head> tag is that the page does load–but there are no styles attached to your HTML elements, and then the page flickers to include the styles. It’s like going out without your clothes on, and then going back in to put them on.
Externalizing stylesheets
Styles can be included in the page source code itself in two ways: either within <style>...</style> tags, or within the style attribute of an HTML element. These are the “easiest” to do, however, it’s better if you put style rules in an external .css file, for a number of reasons:
- CSS files can be cached for users, and subsequent returns to your page serves the CSS from the user’s cache instead of asking your server for a copy for download. Your page file size is smaller since it doesn’t have style rules associated with it, and the external stylesheet itself isn’t downloaded on subsequent visits if it’s stored in the visitor’s cache.
- Other pages on your website can reuse this same external stylesheet. The optimization gains to this obviously means that all your pages will have a smaller size since there aren’t any styles on the source code itself. The development gains, however, are even better: one change in one file can update all your styles for your pages.
If your website uses a lot of inline styles, it may be quite a challenge to move them out to external stylesheets. It will usually mean a lot of editing and updating of files, the complexity of which depends on how fragmented your styles are.
Linking stylesheets instead of importing
There are two ways of including external stylesheets: via the use of the <link> tag, or @import. The former links your stylesheet to your page, and the latter imports one stylesheet into another. The two ways look like below:
<link href="styles.css" type="text/css">
<style type="text/css">@import URL("styles.css");</style>
@import can be used to hide styles from earlier browsers, but in Internet Explorer, it behaves the same as using <link> at the bottom of the page–which pretty much negates the above best practices I’ve talked about.
CSS expressions are evil
Okay, so Internet Explorer is quirky. Sometimes CSS expressions seem to be the only way to fix it–I’ve seen a couple of IE fixes/hacks that require CSS expressions. They look similar to:
width:expression(document.body.clientWidth > 799? "800px": "auto" );
Unfortunately, they’re run pretty much every time the user interacts with the page: they’re run on page render, on browser resize, on page scroll, or even if the mouse moves over the page. If one needs to dynamically set styles, use JavaScript. If you really, really need to use an expression, use one that, in the end, overrides the style declaration so that it’s only run once.
IE filters are also evil
The most frequent use nowadays of IE CSS filters are to fix PNG images in Internet Explorer 6 via the AlphaImageLoader filter:
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pngimage.png',sizingMethod='scale');"></div>
However, this filter stops rendering and freezes the browser while the image is being downloaded, and since it’s done per element and not per image, each time this element shows up in the browser, you’ll get a bit of a freeze. It’s better to gracefully degrade to using PNG8 which works fine in IE6. If there’s no way out of using the AlphaImageLoader filter, user the underscore hack (_filter) or other IE6-only hacks to keep the style rule limited to IE6 users.
Good luck with optimizing your stylesheets! You can take a look at the other posts in this optimization series below:
- Website Optimization
- Minimizing HTTP Requests
