Hi

I have 4 .js file which according to pagespeed insight are render blocking. Unfortunately these files are always scattered accross all aggragates, so that all aggregated files become render blocking, I've tried 2 or 3 Target Number Of JS Bundles Per Page with the same result.
I'd like to force these 4 render blocking files to be in the same aggregate so that only one agregated file is render blocking.
How can I achieve this please?
Thanks for helping.

Comments

oppure created an issue. See original summary.

mikeytown2’s picture

To get js files to be grouped together you need to use hook_js_alter and adjust the weights of the js files so they are the same yet different than the default.

To make js not render blocking use the modifier sub modules defer js option.

oppure’s picture

Hi
thank you for your help. I've used the following code in a custo module

function MYMODULE_js_alter(&$javascript){
  if(isset($javascript['misc/drupal.js'])) $javascript['misc/drupal.js']['weight'] = -18;
  if(isset($javascript['misc/jquery.js'])) $javascript['misc/jquery.js']['weight'] = -18;
  if(isset($javascript['misc/jquery.once.js'])) $javascript['misc/jquery.once.js']['weight'] = -18;
  if(isset($javascript['misc/ajax.js'])) $javascript['misc/ajax.js']['weight'] = -18;
  //dpm($javascript);
}

unfortunately it doesn't work as ajax.js is still put in a different aggregate than the other 3.

I can't use the defer option as it break the website.
What can I try to find out why it doesn't work?
Thank you.

mikeytown2’s picture

That's all core js and it's defer safe. How does your js break? Console errors?

oppure’s picture

ok thanks,
I guess the problem is that I cannot select which files to defer, when I select defer all javascript is deferred and some things break on the website. e.g.facets don't collapse, forms text wysiwyg editor doesn't render and so on

mikeytown2’s picture

How to view the browser console:
Firefox/Chrome: press Ctrl + Shift + J.
Other browsers see: https://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Er... (just ignore the first section)

You can also save the complete webpage as a zip file, the saved state will contain the js errors
http://www.makeuseof.com/tag/save-complete-webpage-offline-reading/

mikeytown2’s picture

Were you able to fix the issue you where having with your JS? Should this issue be closed?

oppure’s picture

Hot completely, deferring javascript brakes google ads on some browsers, I have to look better into this, but if you like close it, I will update in case I need. Thank you again.

mikeytown2’s picture

In terms of ads, you need to use the async version of them. https://support.google.com/dfp_premium/answer/1638622

Last time I checked https://www.drupal.org/project/dfp didn't use async, it might now though.

mikeytown2’s picture

Title: Forcing certain .js files to be in the same bundle » Need help with deferring javascript
Component: Bundler » Modifier
oppure’s picture

Thank you very much for your help. I'm using async code as in this page https://support.google.com/adsense/answer/3221666?hl=en
anyway the ads still don't display on random pages in all browsers when I use:

JS

Check "Enable preprocess on all JS"
Check "Resource hint src attributes found in the HTML content"
Enable every checkbox under "Optimize JavaScript Ordering"
Under "Move JS to the footer" Select "All but what is in the $all_in_footer_list"
Under "Deferred JavaScript Execution: Add The defer Tag To All Script Tags" Select "All but external scripts"
Check "Put a wrapper around inline JS if it was added in the content section incorrectly"

Every time I flush browser cache the first page I load always display ads, most pages loaded after the first one randomly don't display ads, I will update when I figure out the reason.

oppure’s picture

It seems that what was breaking my google adsense was the wrapper function that was put around the adsense inline code (adsbygoogle=window.adsbygoogle||[]).push({});
I've added $inline_js_defer_skip_list[] = 'adsbygoogle'; and $inline_js_wrap_skip_list[] = 'adsbygoogle'; in advag_mod.module and now I have the ads displaying correctly.

I've also noticed the following code in

if (module_exists('googleanalytics')) {
      $inline_js_defer_skip_list[] = '_gaq.push(["_';
      $inline_js_defer_skip_list[] = '"GoogleAnalyticsObject"';
    }

which suggests that google analytics code should not be wrpped as well. I have the analytics module installed but I noticed that the analytics inline code window.google_analytics_domain_name = ".domainname.com";window.google_analytics_uacct = "UA-XXXXXXXXX"; doesn't contain any of those strings indeed it's still wrapped by advagg.

mikeytown2’s picture

Status: Active » Needs review
StatusFileSize
new6.61 KB

Thanks for looking into this! I've moved things around a little bit and added in your changes to the lists.

  • mikeytown2 committed 7a2ef15 on 7.x-2.x
    Issue #2904702 by mikeytown2, oppure: Need help with deferring...
mikeytown2’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

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