Combine CSS with JS and make it into a single download!

DotNetKicks.com — Tue, 01 May 2007 15:57:45 GMT

You've been kicked (a good thing) - Trackback from DotNetKicks.com

re: Combine CSS with JS and make it into a single download!

Andrew Sazonov — Tue, 01 May 2007 18:39:43 GMT

Oh, very interesting technique - thank you for your article!

Btw, I suppose that it's possible have some another trick to eliminate CSS at all - instead of writing it using ordinary CSS rules, I think it's possible to code it directly in JavaScript via manipulations on styles objects (so such file will not rely on specifics of parsers implementation in different browsers).

Do you think it could be practical?

re: Combine CSS with JS and make it into a single download!

DAH — Tue, 01 May 2007 18:40:39 GMT

Which versions of IE and Firefox? What about other browsers?

re: Combine CSS with JS and make it into a single download!

Franklin — Wed, 02 May 2007 07:09:19 GMT

Combining it all into JS wouldn't be practical, as different browsers have different stylesheet doms, and Opera as of 9 didn't have a stylesheet dom at all

re: Combine CSS with JS and make it into a single download!

Chitty — Wed, 02 May 2007 10:21:00 GMT

In response to: Andrew Sazonov

Whist I think this is a fine idea, the problem is anyone with javascript disabled would lose their styles too.

re: Combine CSS with JS and make it into a single download!

Jeff Schiller — Wed, 02 May 2007 16:47:34 GMT

This prevents effective caching. Every time my JS changes, the "CSS" file also has to be downloaded and vice versa. Separating the files allows them to be separately cached.

re: Combine CSS with JS and make it into a single download!

Martin Bialasinski — Wed, 02 May 2007 17:11:05 GMT

So this depends on specific bug-correcting implementations of the parser that may or may not change in the future. And at least the JS parsing will break with a true XHTML-parser.

In other words: it is a hack and a future liability to support, if it gets used.

How about serving gzip'ed files, with an expire header one year in the future. The files will get fetched once, after that the browser will use the ones in the cache without checking with the server. And when the path to the files contains a version number, you can easily deploy a new version of the files.

Standard, proven techniques. Far better than messing around like described in this blog post.

re: Combine CSS with JS and make it into a single download!

Jordan — Wed, 02 May 2007 17:23:53 GMT

By analogy I bet you could also squeeze your HTML into the same file! Just end the comments with a  line and then start your HTML. --Joking of course.

re: Combine CSS with JS and make it into a single download!

GaB — Wed, 02 May 2007 18:05:48 GMT

Great stuff, thx !

re: Combine CSS with JS and make it into a single download!

Sjoerd Visscher — Wed, 02 May 2007 18:56:44 GMT

It looks like that, for this to work, you have to have a comment start for each line of CSS.

re: Combine CSS with JS and make it into a single download!

shivap — Wed, 02 May 2007 19:08:47 GMT

@Jeff - I agree.

@Martin - True - this is a hack. However, allowing <!-- tokens in javascript has been there right from the beginning for hiding it from older versions of browsers and i personally believe the browsers would never break that. As for <!-- tokens in CSS, even the w3C CSS validator accepts it positively.

@Sjoerd - You can remove the newlines from the CSS content so that you need to have <!-- token only once. I do this in my sample app.

re: Combine CSS with JS and make it into a single download!

Mike — Wed, 02 May 2007 19:57:49 GMT

So after reading all of these comments - which method is better?

re: Combine CSS with JS and make it into a single download!

shivap — Wed, 02 May 2007 20:22:16 GMT

@Mike - I would suggest that you consider this method only if the page load time bothers you much. If you are already happy with your website's load time all you need to do is to remember that you can come back to this technique when the load time starts bothering you.

re: Combine CSS with JS and make it into a single download!

Anastasiosyal — Wed, 02 May 2007 21:33:10 GMT

This is an interesting hack, but I would say this is a 'oh look you can also do this', rather than a best practice that people should follow.

The bandwidth advantage you are gaining is minimal in comparison to the obfuscation overhead you are adding to your files...

Lets say for example that your js file is 2 kb and css file is another 2kb.

All you are saying is put them both together in a 4kb file...

So what is the advantage of this? Advantage is you are skipping one request to the server... This ofcourse comes with its trade offs... One is required to sacrifice code readability, modularity and seperate caching of js and css files simply to squeeze out the overhead of one request of a file from the server.

I cannot see this a good technique. Js and css are seperate for a reason. One is client side code, the other is design. Keeping design and code seperate makes it all together more maintainable, especially in a team environment where you can have seperate coders and designers... Not to mention that this is not future proof. For future versions of browsers might require the content type of files returned by the server to always be css for css files and js for javascript files due to some security issue that may arise...

This is an interesting find, but i would suggest that people do not use this in production.

re: Combine CSS with JS and make it into a single download!

shivap — Thu, 03 May 2007 02:53:49 GMT

@Anastasiosyal - thanks for your comment. Your point about readability, maintainability etc. has already been made and answered - i.e., keep the js, css files separate on disk and combine them at runtime - please check my sample app.

I agree with your point about future reliability but there are good reasons why browsers won't break their backward compat as HTML comments were allowed into JS and CSS in the first place with a reason.

re: Combine CSS with JS and make it into a single download!

Craig Francis — Thu, 03 May 2007 11:07:10 GMT

I would suggest that you should avoid this technique at all costs... this is going with non-standard features which will hopefully be removed from the two (of many) browsers in the future.

Take for example the huge security hole in IE6/7 where JavaScript can be placed in an image and still be executed... allowing any site with an image upload feature (gallery) to be compromised by an XSS attack... I am hoping that this security hole will be fixed, and in a similar way, it might fix this potential security hole (a site which allows users customise their profile page with their own CSS could allow anyone to upload any JavaScript!)

For more info, this is a good overview:

http://adblockplus.org/blog/the-hazards-of-mime-sniffing

And for the reality of XSS:

http://www.betanews.com/article/CrossSite_Scripting_Worm_Hits_MySpace/1129232391

re: Combine CSS with JS and make it into a single download!

shivap — Thu, 03 May 2007 11:57:35 GMT

@Craig - thanks for the pointers. I've posted to sla.ckers.org to figure out whether this technique can be exploited.

re: Combine CSS with JS and make it into a single download!

shivap — Thu, 03 May 2007 15:56:35 GMT

Copy pasted from sla.ckers.org

Comment made by trev...

"I don't think there is anything dangerous about this technique (users who can upload CSS can run JavaScript already, due to expression() and -moz-binding)."

re: Combine CSS with JS and make it into a single download!

shivap — Fri, 04 May 2007 03:11:44 GMT

Good discussion happening in Ajaxian on this technique... http://ajaxian.com/archives/squeeze-css-and-js-into-one-file

CSS and Javascript in a single file

Hackszine.com — Fri, 04 May 2007 08:38:40 GMT

If you're really crazy about optimizing page load time for your website, here's an interesting trick. By abusing some parser quirks in common browsers like Firefox and IE, you can actually combine a CSS file and a Javascript file into...

re: Combine CSS with JS and make it into a single download!

ekang — Sat, 05 May 2007 12:56:35 GMT

I think this is a good idea

re: Combine CSS with JS and make it into a single download!

Nick — Sun, 06 May 2007 05:06:02 GMT

So, if you're doing this on the server side anyway, why download css and javascript separately from the HTML at all? Just include it in the page requested by the user.

You can still keep separate css, js, and html (aspx/ashx) files and then either write a custom control that outputs the css+js into the html or extend the page parser to do it when it compiles your pages.

My method does break caching, but so does yours.

In all fairness, your method is a neat hack, but it's not a robust solution to the problem.

re: Combine CSS with JS and make it into a single download!

shivap — Sun, 06 May 2007 07:02:13 GMT

@Nick - Combining js and css and keeping them as an external resource, I agree that it will need to be refreshed every time the js or the css changes, but then how frequently do you expect such changes to happen on a production site? As for inlining them into the HTML, I think the disadvantages here are too obvious to even write further.

re: Combine CSS with JS and make it into a single download!

Sergey Koksharov — Mon, 28 May 2007 19:12:45 GMT

Wow, its really cool tips! Thanks a lot!

re: Combine CSS with JS and make it into a single download!

Dead Krolik — Mon, 11 Jun 2007 10:19:44 GMT

Thanks a lot. Really good tips.

link

PukiWiki Plus! (PukiWiki/TrackBack 0.4) — Wed, 15 Apr 2009 13:22:29 GMT

link 【レポート】IE8で互換性の実現や新機能を利用するには? - MSがサイト管理者向けガイド (1) IE8準拠のための見直しポイント | パソコン | マイコミジャーナル -- 2009-04-15 (水) 19:20:52 １つのファイルにJavaScriptとCSSをまとめて記述する方法 phpspot開発日...