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(B.css
,C.css
.... 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.
When
B.css
is loaded contextually, the aggregated file will containA.css + B.css
into one file. Lets call itX.css
. By this logic, whenC.css
is loaded, the aggregated file will containA.css + C.css
. Let's call itY.css
. But sinceX.css
andY.css
are two different files, this will not utilize browser's caching and will make http requests each time.When
B.css
is loaded contextually,A.css
andB.css
will load separately. And similarlyC.css
will be loaded separately when needed. By this logic,A.css
will be cached. AlsoB.css
andC.css
will be cached after being loaded once.
Which way it works(1 or 2)? How do I control it ?