The following example is a hack to combine CSS and JavaScript into a single file thus reducing page load speeds. This technique is based on the way current browsers react in certain situations and should be used cautiously.

Now, if you have by any chance worked on page load optimizations, you would know how costly each resource download is. The more the number of external resources that you refer to, the more the time it takes for the page load to complete.

Typically, web pages refer to many external CSS and JS files and hence incur many resource downloads. The advice from the PLT (page load time) gurus is to combine all the CSS files into one and all the JS files into one so as to reduce the number of resource downloads to just two. This, without any doubt, would help boost your PLT.

If you feel that two downloads still isn’t the best, I concur. In this post, we’ll look at a technique to combine CSS with JS and get the resource download count to one! I discovered this technique while desperately trying to improve the page load time for the pages in Microsoft Office Live. Read on…

The technique relies on how CSS and JS parser behaves in IE and Firefox.

* When the CSS parser encounters a HTML comment token (<!–) in CSS content, the token gets ignored.
* When the JS parser encounters a HTML comment token (<!–) in JS content, the token is treated similar to the line comment (//) and hence the rest of the line following the HTML comment token gets ignored

Look at the below JS+CSS code snippet…

<!– /*
function t(){}
<!– */
<!– body { background-color: Aqua; }

When the CSS parser parses the above content, the HTML comment tokens would be dropped and the snippet would become equivalent to the one below…

/*
function t(){}
*/
body { background-color: Aqua; }

As you can see above, the CSS parser will get to see only the CSS code and the script code would appear to be within the comments (/* … */).

In similar lines, when the JS parser parses the content, the HTML comment tokens would be treated as line comments (//) and hence the code snippet would become equivalent to the one below…

// /*
function t(){}
// */
// body { background-color: Aqua; }

As you can see above, the JS parser will get to see only the script code and the rest of the contents would look like comments.

You can refer to the above content in both the SCRIPT and LINK tags in your HTML page. For e.g.,

<link type=”text/css” rel=”stylesheet” href=”test.jscss” />
<script type=”text/javascript” language=”javascript” src=”test.jscss”></script>

Note above that both the tags refer to the same source and hence it would be downloaded once and used as appropriate (as CSS and SCRIPT).

To round it off, there is just one more thing that you need to take care of - the response content type - it needs to be set to */* in order to affirm to Firefox that the contents can be treated as anything as appropriate.