CODEWITHSUNDEEP
javascriptjquerycssperformanceoptimization
user823871
user823871

Reputation:

Include separate CSS and JS files into the header OR all code in one CSS and one JS file?

I'm trying to optimize my website. I have a few plugins to include (jquery plugins with CSS), and my own javascript code.

Now I have the CSS in separate files for different plugins, as I downloaded them. And if I need one on the actual page, I generate code to include that. The same with the JS files. But when it comes to render a complex page with a lot of stuff, 9 CSS files can be called and 7 or 8 JS files, each of which are HTTP requests.

Should I put the CSS into one big file to reduce the number of included CSS files? But then everything will be interpreted by the browser even if the current page doesn't need so much stuff.

I've thought of a third way: generate CSS and JS files with PHP. Then it'll be always one JS and one CSS file, and only with the things which are needed. Or is it an absurd way?

What do you say, which to use to reduce page load time?

Upvotes: 1

Views: 704

Answers (4)

Adam Jurczyk
Adam Jurczyk

Reputation: 2131

For me, the best way is somewhere in the middle - for CSS files, you better grab them all, join and compress to one file. For JS code - make for example 3+ files: one with compressed and joined external libs, one with your common stuff, and maybe next files for each bigger section - but I dont think its needed. Maybe splitting your JS code on part needed before user login, and after user login.

Remember to minify and consider asynch loading (with LAB.js for example).

Oh, and this php script... I dont think it is good idea - better use/write some script which joins and minifies your statics on compile (or deploy, or even run by hand), so there is no need to generate everythin over and over again.

Upvotes: 0

Jan Hančič
Jan Hančič

Reputation: 53931

This depends largely on how your users use your page. If most of the users just view one page then it makes sense to only send them the stuff that they need to display that one page (combining everything into as few requests as possible). On the other hand if most of users view multiple pages then it makes sense to send them more than they need so they will already have the CSS&JS on the next page view. But in this case you have to make sure that you are always generating the same CSS&JS with the same URI, so that the browser will not re-download the same content under a different name. You also have to setup proper HTTP caching.

What I usually do is split JS/CSS in two parts. Every page has a "common.css" and "common.js", which has stuff that every page needs (header/footer/... styles for CSS, and then jquery/common js/... for JS). Then every subpage has it's own JS&CSS that has just the stuff you need for that page (if required).

Upvotes: 0

Abbas Mousavi
Abbas Mousavi

Reputation: 486

It is better to include all CSS in a file and all JS in a file and the minify them using many online services that minify and compress CSS and Javascript. this will reduce the number of http requests as well as volume of data to be downloaded.

If you generate CSS with php then the CSS and JS should be downloaded with every page and generating them takes some time, but if you pack them in one file it downloads once and the browsers caches it.

if your site has many different sections and packing all css in a file makes a huge file then you can pack CSS in two or three file and in each section load the related one.

reducing number of http request is very important.

Upvotes: 2

Guillaume Cisco
Guillaume Cisco

Reputation: 2945

I think your last solution is the best one.

Generate one js file and one css file from php, and don't forget to minimized/gziped them :)

Here is a very good article about optimization : http://developer.yahoo.com/performance/rules.html

Upvotes: 0

Related Questions