Pros and Cons of Combining CSS/JS files or loading contextually?

Question

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.

1. When B.css is loaded contextually, the aggregated file will contain A.css + B.css into one file. Lets call it X.css. By this logic, when C.css is loaded, the aggregated file will contain A.css + C.css. Let's call it Y.css. But since X.css and Y.css are two different files, this will not utilize browser's caching and will make http requests each time.

2. When B.css is loaded contextually, A.css and B.css will load separately. And similarly C.css will be loaded separately when needed. By this logic, A.css will be cached. Also B.css and C.css will be cached after being loaded once.

Which way it works(1 or 2)? How do I control it ?

Answer 1

As Drupal documentation says here: Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme,

Drupal uses a high-level principle: assets (CSS or JS) are still only loaded if you tell Drupal it should load them. Drupal does not load every assets on every page, because it slows down front-end performance.

You don't need to worry about loading libraries (CSS/JS) contextually. Drupal can load individual libraries for a certain block, or when a certain node type is being displayed. That's the purpose of the [theme-name].libraries.yml file, you can mention the specific blocks and page in there and tell it load the required library for that part.

You can attach the library to all pages, to specific Twig templates, or to a render element in a preprocess function.

For instance for a maintenance page:

maintenance-page:
 js:
  js/mobile.install.js: {}
 css:
  theme:
   css/maintenance-page.css: {}
 dependencies:
  - system/maintenance
  - thunder_admin/global-styling

Or for certain blocks or part of your page:

vertical-tabs:
 css:
  component:
   css/components/vertical-tabs.css: {}
dropzonejs.widget:
 css:
  component:
   css/components/dropzonejs.widget.css: {}

You can also use hooks like THEME_preprocess_HOOK() function in the .theme file. For instance, if you want to attach JavaScript to the maintenance page, the "HOOK" part is "maintenance_page", and your function would look like this:

function fluffiness_preprocess_maintenance_page(&$variables) {
    $variables['#attached']['library'][] = 'fluffiness/cuddly-slider';
}

Answer 2

AdvAgg's bundler sub module does a good job of balancing the browser cacheabilty (no aggregation) vs faster payload (all aggregated). For CSS when using HTTP/1.1 a value of 2 will give the fastest page rendering times; HTTP/2 doesn't have a real penalty so using a value of 15 is better.

http://www.webpagetest.org/ with the Connection set to mobile edge as well as https://developers.google.com/speed/pagespeed/insights/ is how to measure frontend performance. See https://www.drupal.org/node/2493801 for how AdvAgg is currently used for drupal.org.