On any site I build that has a bunch of module and theme js/css files I see that aggregation results in 4-6 css files and 4-6 JS files.
I understand this results from authors having the option to select from several CSS/JS GROUPS and make use of preprocess, cache, and every_page options in the add_js and add_css functions.

In all sites I've studied this resulted in needless addition of aggregation files. for many small sites it makes sense to just aggregate all frontend scripts / stylesheets to one file, so I put this code in my theme:

function arctica_js_alter(&$js){
	if ((variable_get('preprocess_js', '')) && (theme_get_setting('arctica_js_one'))) {
	  uasort($js, 'drupal_sort_css_js');
	  $i = 0;

	  foreach($js as $name => $script) {
	    $js[$name]['weight'] = $i++;
	    $js[$name]['group'] = JS_DEFAULT;
	    $js[$name]['every_page'] = TRUE;
	    $js[$name]['preprocess'] = TRUE;
	    $js[$name]['cache'] = TRUE;
	    $js[$name]['scope'] = 'header';
	    $js[$name]['version'] = '';
	  }
	}
}

function arctica_css_alter(&$css){
	if ((variable_get('preprocess_css', '')) && (theme_get_setting('arctica_css_one'))) {
	  uasort($css, 'drupal_sort_css_js');
	  $i = 0;

	  foreach($css as $name => $script) {
	    $css[$name]['weight'] = $i++;
	    $css[$name]['group'] = CSS_DEFAULT;
	    $css[$name]['every_page'] = TRUE;
	    $css[$name]['preprocess'] = TRUE;
	  }
	}
}

The result is that everything gets aggregated to one (or sometimes 2) Javascript and CSS file.
The $js[$name]['scope'] = 'header'; line is probably not the best idea but I noticed a module loading scripts in the footer that didn't need to be in the footer.

Do you think it would make sense to add this feature as an option in this module? Or do you think it will cause trouble. As far as I know Javascript and CSS behaves the same whether it's in one file or multiple files.
As websites are used more and more on mobile 3G and wifi networks it really pays to reduce the number of files loaded, so I think this is a good feature.

There are probably edge cases where you do not want this feature, that's why I made a theme setting for it. For instance, while the respond.js polyfill parses stylesheets so fast that it can handle an aggregate file just fine, more advanced scripts like CSS3-MediaQueries-js are slower and might not be able to handle a 200kb CSS file.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jnicola’s picture

For the sake of discussion... I beleive the ability to defer javascript loading until the footer is a known way to increase the perception of page loading... to the point many page speed optimization tools look for defered javascript loading.

While what you add may result in less HTTP requests (and thus reduced load time) it also appears to get rid of defering javascript to the footer.

Anyways, I'm not entirely aware of what drives the aggregation to do more than just one aggregated file to begin with, so I surely can't resolve the issue, but I can at least mention the established importance of defering javascript since your code removes that deference.

JurriaanRoelofs’s picture

Good point, splitting the code into header-JS and footer-JS would be a good concession. Of course this would easily be achieved by omitting the line of code that tells all scripts to go into the header.

mikeytown2’s picture

Version: 7.x-1.x-dev » 7.x-2.x-dev
Status: Active » Fixed

Fixed in the latest 7.x-2.x #1171546-105: AdvAgg - D7 Port/Re-write.
Uncheck "Use cores grouping logic" or with the sub bundler module set max to 1.
Being able to move js code to the footer is on the todo list.

mikeytown2’s picture

Title: Aggregate to one single file » Move JS to footer
Status: Fixed » Active
Issue tags: +submodule

Reusing for submodule

mikeytown2’s picture

Status: Active » Fixed
FileSize
9.1 KB

New module adds 3 JS options and 1 CSS option.
JS:
Move all JS to the footer.
Enable preprocess on all JS.
Add the defer tag to all script tags. http://peter.sh/experiments/asynchronous-and-deferred-javascript-executi...

CSS:
Enable preprocess on all CSS.

This patch has been committed.

mikeytown2’s picture

Discovered a bug with the bundler as a result of these new options. Patch has been committed.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

mikeytown2’s picture

Status: Closed (fixed) » Fixed
FileSize
721 bytes

Needed to adjust the group key for scripts already in the footer, so they show up near the bottom due to the way drupal_sort_css_js() works. This patch has been committed.

mikeytown2’s picture

One more patch. Discovered when media.core.js wasn't working with media module from inside of a ctools popup div.

mikeytown2’s picture

mikeytown2’s picture

Status: Active » Fixed
FileSize
2.9 KB

The following patch has been committed.

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

.