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.
Comment | File | Size | Author |
---|---|---|---|
#11 | advagg-1743910-10-move-all-but-lib.patch | 2.9 KB | mikeytown2 |
#9 | advagg-1743910-9-fix-js-settings-ajax.patch | 728 bytes | mikeytown2 |
#8 | advagg-1743910-8-fix-js-sort.patch | 721 bytes | mikeytown2 |
#6 | advagg-1743910-6-fix-bundler.patch | 1.89 KB | mikeytown2 |
#5 | advagg-1743910-5-add-mod-submodule.patch | 9.1 KB | mikeytown2 |
Comments
Comment #1
jnicola CreditAttribution: jnicola commentedFor 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.
Comment #2
JurriaanRoelofs CreditAttribution: JurriaanRoelofs commentedGood 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.
Comment #3
mikeytown2 CreditAttribution: mikeytown2 commentedFixed 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.
Comment #4
mikeytown2 CreditAttribution: mikeytown2 commentedReusing for submodule
Comment #5
mikeytown2 CreditAttribution: mikeytown2 commentedNew 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.
Comment #6
mikeytown2 CreditAttribution: mikeytown2 commentedDiscovered a bug with the bundler as a result of these new options. Patch has been committed.
Comment #8
mikeytown2 CreditAttribution: mikeytown2 commentedNeeded 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.
Comment #9
mikeytown2 CreditAttribution: mikeytown2 commentedOne more patch. Discovered when media.core.js wasn't working with media module from inside of a ctools popup div.
Comment #10
mikeytown2 CreditAttribution: mikeytown2 commentedAdd in this option "Keep Libraries in the Head".
Form
http://drupalcode.org/project/magic.git/blob/95a5578a34523685b897d218e73...
Implementation
http://drupalcode.org/project/magic.git/blob/95a5578a34523685b897d218e73...
Comment #11
mikeytown2 CreditAttribution: mikeytown2 commentedThe following patch has been committed.
Comment #12.0
(not verified) CreditAttribution: commented.