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:

  1. Create a separate CSS file, and import it in your <head>.
  2. 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>">


Leave a Reply

Your email address will not be published. Required fields are marked *