I am building an application in Drupal 7.
There is one common CSS file
A.css with 1000 lines of code. There are other 5 CSS files(
F.css) with 100 lines each. I want to load the other 5 files contextually(only on the pages they are needed).
Regarding pagespeed, what are the pros and cons of combining all those CSS files into one or loading them separately(contextually) ?
AFAIK, If I load them contextually, then the weight of those 5 files will be avoided in the pages they are not required. But I am not sure how Drupal's aggregation works. There are two possibilities I can think of.
B.cssis loaded contextually, the aggregated file will contain
A.css + B.cssinto one file. Lets call it
X.css. By this logic, when
C.cssis loaded, the aggregated file will contain
A.css + C.css. Let's call it
Y.css. But since
Y.cssare two different files, this will not utilize browser's caching and will make http requests each time.
B.cssis loaded contextually,
B.csswill load separately. And similarly
C.csswill be loaded separately when needed. By this logic,
A.csswill be cached. Also
C.csswill be cached after being loaded once.
Which way it works(1 or 2)? How do I control it ?