Optimizing javascript and css requests

Question

I need to optimize the loading speed of several existing websites. One of the issues that I have is the amount of requests per page. The websites have 7 or more different ty

Answer 1

I'm working on a really big project in the same area which has a lot of style definitions and different JS-Scripts for different tasks in the project. The site had the same problems => too many requests. Basically, we've implemented a fix as follows:

• The render component of the application remembers each necessary js include file and puts them together, minified at the end of the rendering process. the resulting output is being cached by the clients via caching headers and the HTTP ETag!
• the style sheets of the given application rely on each other. There is a huge basic style-sheet that cares about basic formatting and page objects (size, floats etc.) which is being extended by a basic color scheme, which may be extended by a custom overriding style sheet for different customers to enable custom colors, layout, icons etc.... All these stylesheets put together can exceed for example 300k in size because there are a lot of icons as background images... each icon has two definitions - one as a GIF for IE6 and a PNG image for all other Browsers.

And here we came to Problems.. at first the Stylesheets worked with @import rules. We wrote a wrapper script, which parsed all the styles and combined them into a single file. The result was, that all IE versions broke the layout when a style sheet exceedes about 250-270k in size. the formatting just looked like crap. So we changed this back, so that our wrapper only puts together two style sheets and writes all other sheets as @import rules at the top. Also, the wrapper uses caching headers and the ETag.

This solved the loading issues for us.

Regards

(Please, don't rant at me because we have a 300k stylesheet. Trust me, it just has to be for various reasons. :D)