CSS Performance
CSS PERFORMANCE
There are a few small areas of interest and a couple of popular performance “rules” that deserve some clarification.
CSS in the Document Head
With JavaScript, it is advantageous to load external scripts as late as possible. With CSS, the opposite is true. Most browsers delay rendering a page until the CSS has been downloaded to avoid a repaint/redraw, so it’s usually best to place links to external style sheets in the <head> of the document.
Unlike JavaScript, these links do not block, and the browser can happily continue with downloading other content.
Inline versus External
If you include the CSS inline, you eliminate an HTTP request but increase the size of the HTML document. If you use an external style sheet, you have an additional HTTP request, but the resource can be more readily cached. (Most of the time, you don’t want to cache the HTML document because it has been dynamically generated.)
Link versus @import
Most of the time, you want your stylesheet to be external, but you then have the choice of whether to use <link> or @import to load the resource. This is an easy decision. Stick with <link> because it is nonblocking, and can enable other resources to download in parallel.
Steve Souder’s has written an excellent article showing how different browsers implement @import, and what happens when you mix @import with <link>. All-cause blocking behavior to some extent, and because there isn’t a valid reason for favoring @import over <link> in the first place the solution is simply not to use it.
Redundant Selectors
Over time, your style sheets can become rather messy and out of sync — duplicate rules are added, elements are removed from the HTML document, but the developers forget to remove the CSS selectors, and so on. The result is redundant selectors adding unnecessary weight to your stylesheet. Of course, in theory, this shouldn’t happen. Your development and deployment process should be rigorous enough to ensure that the CSS is kept in sync. But, in practice, it does happen.
Dust-Me Selectors is a popular Firefox extension that can be used to find unused CSS selectors.
However, development of the product seems to have stopped, and it will not work in the latest versions of Firefox.
Instead, check out CSS Usage which is an extension for the always useful Firebug. Toward the bottom is a link enabling you to export the cleaned-up CSS if you are happy with the scan.
The big danger with an automated tool like this is that it might miss rules that actually are being used. For a global style sheet, you should scan every page of the site to be sure you haven’t missed a rule that is used on only one page, buried deep inside the site.
CSS Expressions
Avoiding the use of CSS expressions was once one of the most important rules for CSS performance. But the use of these beasties has been deprecated for a while now, so there’s no point wasting too much time covering them here.
CSS expressions were a way to set CSS attributes dynamically using JavaScript embedded in the style sheet. Unfortunately, the rules are re-evaluated every time the browser window is resized
or scrolled, or the mouse is moved. The result is that an expression can easily be re-evaluated thousands of times during a page view. Although the expressions are generally fairly light, with this number of executions, performance can suffer.
You can use expressions that will be evaluated only once, but almost always the same end result can be achieved using pure JavaScript — which isn’t IE-specific and isn’t deprecated.
Using Shorthand Properties
Many CSS properties support a shorthand notation that is much quicker to write, which can make a big impact on the size of the style sheet. One example is when specifying colors. Generally, a hex triplet is used, with two digits for each RGB part (for example, #F368C4, where F3 is the red component, 68 the green, and C4 the blue). When the two digits in each part are the same, you can omit one of them; thus, #FF99CC becomes #F9C. With the margin and padding properties, the longhand way is to write them like so:
margin-top:5px;
margin-bottom:4px
margin-left:3px;
margin-right:2px
However, this can be simplified to the following:
margin:5px 2px 4px 3px
Notice the order of the values. You start at the top and go around clockwise — so the top margin first, then the right margin, then bottom, and then left.
If the top and bottom values are the same, and so, too, are the left and right, you can simplify things further, as shown here:
margin: 10px 5px
With only two values passed, browsers assume that the first refers to the top and bottom margins,
and the second to the left and right margins.
Inheritance and Default Values
Some of the biggest savings in CSS come from knowing when properties can safely be omitted — either because they have been inherited from a parent element, or because the default value is appropriate. In many cases, the default value for a property is inherited. Check the online CSS documentation if you’re unsure.
Comments
Post a Comment