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…
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.