Recently, a person I follow on Twitter was expressing concern over the fact that their custom CSS file wasn’t being placed in the appropriate part of the website’s generated markup.
And then a friend of mine provided a quick and easy solution:
While this solution was something I knew about for some time, I took a look at a site I was working on and noticed I wasn’t even using it. There it was, a CSS file being referenced right in the middle of the page’s source code. If you’re wondering why this is an issue, or what we can do to address it, read on.
Yahoo! published a wonderful article called Best Practices for Speeding up Your Website, which outlines several performance oriented rules to follow while you’re constructing your website. One of those rules is “Put Stylesheets at the Top.”
They also provide a tool, YSlow, which is a plug-in for the FireFox browser that helps developers analyze their site to see how well they follow these widely accepted (if not definitive) rules for performance.
YSlow provides a concise description on why you should follow the “Put Stylesheets at the Top” rule:
Moving style sheets to the document HEAD element helps pages appear to load quicker since this allows pages to render progressively.
So, you may be thinking that this rule is easy enough to follow, except for when it comes to your DotNetNuke websites. Not so fast!
The core DotNetNuke framework does, in fact, provide us with a very easy way to put the stylesheet at the top. If you’re referencing this stylesheet in a DotNetNuke skin or module you can simply call a framework method called “AddStyleSheet.”
This method allows you to supply the value for the id and href properties of the link element.
So, if you wanted to embed the following:
You could do the following in a user control in DotNetNuke:
Here is the method signature for the method being called. You can see it has two parameters, one sets the id of the generated link element, and the other sets the href parameter.
In addition, you have the ability to determine whether the CSS file should be placed before the other CSS files present in the head. In that case, you would provide a third parameter with the value of true or false. Read more about CSS precedence and the particulars of CSS precedence in DotNetNuke.
By following these simple steps, you should achieve a better grade on your YSlow report card.
