Is Creating Separate CSS Files Per Page To Speed Up Load Time Overkill?

Question

I've been using Google PageSpeed to improve my site's performance. One of its recommendations is eliminating unused CSS in my app. Although a lot of the CSS is unused for a given page, it is used elsehwere in the app.

What's the right approach here? I'm considering creating a base CSS file for common CSS and then separate files for each individual page. Luckily there aren't that many pages. Is this overkill? And is there a better approach?

This is a Rails app, and I'm using asset_packager to minify my CSS and Javascript

Thanks! Moe

Answer 1

It won't speed up your application because you will be adding new http requests, while if you pack all CSS into one file, that file will stay in the cache and you won't have to have an http-request for it for subsequent pages.

Google PageSpeed simply mean that you shouldn't provide styles you don't use anywhere in your application or only in pages that a user can't visit, for example the admin area.

Answer 2

That'll depend on the size of the file(s) and the way people use your site. If the file isn't huge to begin with and people will often go to many different pages, having page-specific css files will forfeit the benefit of caching, which is generally going to garner more benefit.

Answer 3

The overhead of an extra HTTP request to download yet another CSS file greatly outweighs the overhead of an extra few KB in the master CSS file.

Answer 4

As people in here mentioned, definitely not. You will just add new http requests. You should really keep in mind that pagespeed will probably always show that you have unused css on a given page, but that's not really a big issue.

Take a look at the other recommandations page speed is showing like enabling compression, optimizing the images (consider using css sprites if you aren't already) and more.

See also yahoo best practices to speed up your site.

Answer 5

I think it is best to componentise your stylesheets. For example, you might have a base css that provides the layout for your pages. Then you might have a theme css that provides colours, images, borders - visual elements. Then you might have separate css files for individual UI components, e.g. popup.css, calendar.css etc.

base.css
theme-blue.css
theme-blue-popup.css
theme-blue-calendar.css

This approach makes it easier to manage your styles (and switch them if you need to). More relevant to your question however, is that you now have the ability to specify what stylesheets are needed for each page on your site. Now if the user visits the homepage of your site only, and the homepage has no popups or calendars, then they haven't downloaded the styles for the components they aren't using. As they proceed further into the site, they will get the required stylesheets as and when they need them.