Impact of CSS on Performance of Page

Hi,

I am using an existing application where they have created various components and for each component they have individual CSS which is kept under /iwadmin, but before creating the pages we have to run a script which merge all the css into one common.css and this common.css we include in every page instead of including individual css of components which are inculed in that page so that user has no confusion which css is related to which component.

But don't you think that if we have only four components in our page, wouldn't it impact on performance of loading the page where it will try to load the compete css.

My question is, Is this the correct approach or what can be the better design to implement the same.

Thanks in advance

Find more posts tagged with

Comments

Faizi

Hi,

I am using an existing application where they have created various components and for each component they have individual CSS which is kept under /iwadmin, but before creating the pages we have to run a script which merge all the css into one common.css and this common.css we include in every page instead of including individual css of components which are inculed in that page so that user has no confusion which css is related to which component.

But don't you think that if we have only four components in our page, wouldn't it impact on performance of loading the page where it will try to load the compete css.

My question is, Is this the correct approach or what can be the better design to implement the same.

Thanks in advance

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

SE123

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

My style sheet and scripts are varying from page to page. But for every page loading the whole style sheet is the good practice?? because I think it will directly impact on the performance of page while loading whole CSS for evry page.

Adam Stoller

My style sheet and scripts are varying from page to page. But for every page loading the whole style sheet is the good practice?? because I think it will directly impact on the performance of page while loading whole CSS for evry page.

IMO - if you need different CSS for different pages, it makes sense to only load the CSS for the page you are viewing - however, loading a single monolithic CSS is likely to be more efficient than loading N CSS files per page based on the components that exist on the page (as mentioned, each CSS reference involves a distinct http connection, and that's where most performance tends to be lost)

On the other hand, loading a single 10,000 line CSS file that covers every conceivable page on your site, versus loading four 100 line CSS files that apply specifically to the page being viewed would require some performance testing to determine which is better in terms of performance; which also needs to take into account the general performance characteristics of your servers and networks.