CSS / Page Loading Speed

Question

Hi,

Just wanted to get a few opinions really, i'm trying to increase the loading speed of my site, and one way that google pagespeed has suggested is to remove the unused CSS from my css file for each page.

At the moment I am using one master CSS file for every page on the site.

My question is would having individual CSS files for each page make overall loading times quicker ? I guess the first page would load quicker, but then each page would have a different CSS file which could potentially end up taking longer over a whole site visit ?

Also pagespeed seems to warn against including multiple CSS files so I guess I can't really 'layer' them up...

Any thoughts gratefully recieved!

Thanks

Stu

Answer 1

If the CSS file is cached then including multiple files will not be an advantage.

Note

For performance rules regarding CSS you can

1. Try minifying your CSS

2. Optimize CSS Sprites

3. Avoid Filters

4. Avoid CSS Expressions

For more detailed reading go through this

Best Practices for Speeding Up Your Web Site

Answer 2

I wouldn't worry about it too much. Run your CSS through a filter to strip comments and whitespace, be aware of small shortcuts like padding: 1em 3em .5em 5px etc, make sure the file is being cached properly, and sent from your server with gzipping, and you'll be fine. CSS is usually such a small fraction of the payload, it's not worth losing sleep over.

The only time where I'd split up a CSS file (for delivery to the client) would be if there were large sections of my site which called for unique styles where most people would never venture: eg, an administration section.

Answer 3

Do a little thinking about how the typical user will use your sight. If (like many sites) the average user only views a single page before moving on, then having dedicated CSS files for each page may just be worth it.

However, in the vast majority of cases, a single css file would definitely be the preferred solution

Answer 4

CSS files are cached by browsers anyway, so either you have a single file or many split, it won't matter after all of them got loaded on the first use.

Answer 5

Use just one CSS for all pages. Once your css is cached then there will be no overhead of downloading that css again and again.
Also, ad adam said Minify your css

Answer 6

Download and install YSlow, it will give you an accurate picture of how fast your page is as well as practical steps to improve performance.

Answer 7

DustMeSelectors is the extension you need. It will go through all of your site (and providing all of these are inter-linked) will fetch which selectors in your css are not used anywhere.

Answer 8

There are two optimisation directives that contradict each other in this case. Of course you should reduce the size of the files if possible, but you should also have as few requests as possible. Using a global style sheet reduces the number of requests, but it means a larger file.

You just have to look into where your needs are. If you need to reduce the initial load time, you should move styles out of the global style sheet. If you need to reduce the number of requests, you should use a global style sheet rather than individual page style sheets.