Drupal 7 css and js compression

Question

When I turn on Drupal 7 css and js compression in the performance part, it is aggregating too much files.(5 css files and 5js files). Why?

The page:

Is there any way to force drupal to aggregate more the files?

Answer 1

No, not really, and you wouldn't want to do this.

The thing is, Drupal aggregates CSS files into groups to be able to easily load different CSS sets for different 'media' and 'browser' values, as well as for different pages being viewed, without the need to regenerate them.

If you look into $groups variable generated by drupal_group_css() in includes/common.inc, there are 5 keys which different combination of values between each group: type, every_page, media, preprocess and browsers.

This allows for different groups to be loaded on different pages/in different situations without regenerating them (or including not-needed CSS), which would be the case if only one aggregated CSS file would exist.

Answer 2

You might want to take a look at the Advanced CSS/JS Aggregation contrib module, especially the Bundler Submodule.

The Bundler Submodule might be capable of doing what you want. On top of that, you can also compress JS which might also be useful for you.

Do also check Simple Aggregation contrib module.

Good luck.

Answer 3

You can alter the CSS / JS and regroup everything in one group. This will aggregate into one or multiple CSS / JS files (depending the media types used within CSS declaration and JS files, external, inline, ...)

/**
 * Regroup all CSS files to the same GROUP name.
 * @param type $css
 */
function MYMODULE_css_alter(&$css)
{
    uasort($css, 'drupal_sort_css_js');
    $i = 0;
    foreach ($css as $name => $style) {
        $i++;
        $css[$name]['weight'] = ($style['type'] == 'external' ? $i + 100 : $i);
        $css[$name]['group'] = CSS_DEFAULT;
        $css[$name]['every_page'] = true;
    }
}

/**
 * Regroup all JS files to the same GROUP name.
 * @param type $javascript
 */
function MYMODULE_js_alter(&$javascript)
{
    uasort($javascript, 'drupal_sort_css_js');
    $i = 0;
    foreach ($javascript as $name => $script) {
        $javascript[$name]['weight'] = $i++;
        $javascript[$name]['group'] = JS_DEFAULT;
        $javascript[$name]['every_page'] = true;
    }
}