One major decision when it comes to performance optimizing your site is how to merge your CSS files, if at all.
Let's say that you have a few pages within your site that require additional CSS styling, beyond your standard template. There are two options:
- Create a separate CSS file, and import it in your <head>.
- Add an id or class attribute to the individual page body and prefix your page-specific styles with that id.
The first option is fairly simple, and makes sense if you have a large number of CSS styles for the given page, and there is no need for them to be loaded on all pages.
However, if you need only modify or add a small number of page-specific styles, it is far more optimal, performance-wise, to keep them in your "main" css file. The primary reason is that creating another http connection to load the separate file would take far more time than loading a few more bytes from a file that already has an open connection.
A nice trick to help provide page-specific styling without affecting other pages is to reference the page path and filename in the body tag class attribute. For example:
<body class="page-products-staplers">
In ColdFusion, you might do the following:
<body class="<cfoutput>page-#ListFirst(ListChangeDelims(CGI.SCRIPT_NAME, "-", "/"),".")#</cfoutput>">