See https://www.drupal.org/node/2462717 - as of Drupal 7.36 there is a 'javascript_always_use_jquery' variable that can be used to prevent Drupal from loading jQuery and other JavaScript files on pages that don't use them.

Let's consider adding a checkbox to the Performance page to enable this setting, so more people can use it.

We do need to be a little careful about how we word this - for some sites, turning this on could cause problems (see the caveats in the above change record for why). However, for new sites, or for sites that add JavaScript to pages using the Drupal API only, it should be a good option to turn on.

CommentFileSizeAuthor
#37 javascript_always_use_jquery_variable-2594151-37.patch3.55 KBvmachado
#37 interdiff.txt789 bytesvmachado
#33 javascript_always_use_jquery_variable-2594151-33.patch3.53 KBDavid_Rothstein
#28 Capture d’écran 2016-07-04 à 13.25.54.png98.03 KBstefan.r
#26 interdiff.txt1.52 KBDavid_Rothstein
#26 javascript_always_use_jquery_variable-2594151-26.patch3.52 KBDavid_Rothstein
#25 interdiff.txt3.07 KBDavid_Rothstein
#25 javascript_always_use_jquery_variable-2594151-25.patch3.52 KBDavid_Rothstein
#25 javascript_always_use_jquery_variable-2594151-25-tests-only.patch1.85 KBDavid_Rothstein
#2 javascript_always_use_jquery_variable-2594151-2.patch884 bytesfelribeiro
#6 javascript_always_use_jquery_variable-2594151-6.patch1.18 KBvmachado
#11 jquery-loading-checkbox.png38.23 KByoroy
#12 javascript_always_use_jquery_variable-2594151-12.patch1.69 KBvmachado
#15 javascript_always_use_jquery_variable-2594151-15.patch1.64 KBnbouhid
#22 javascript_always_use_jquery_variable-2594151-22.patch3.67 KBvmachado
#22 interdiff-2594151-15-22.txt4.77 KBvmachado
#22 javascript_always_use_jquery_variable-2594151-22-test-only.patch1.99 KBvmachado
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

David_Rothstein created an issue. See original summary.

felribeiro’s picture

Variable to be configured via the Performance page

felribeiro’s picture

Status: Active » Needs review
vmachado’s picture

Status: Needs review » Reviewed & tested by the community

Suggested patch is working fine.

David_Rothstein’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs usability review

Thanks for getting this started - however I think the wording needs some more reviews and some work:

  1. To be grammatically correct the checkbox should say "Load" rather than "Loading". And it shouldn't end in a period.
  2. I think the "sites and module authors" wording doesn't fit here - this is just aimed at a single site owner, right?
  3. This doesn't seem to be warning people of the risks in any way. I think we do need to do that, but in as compact a way as possible...

My tentative suggestion would be to put this under the existing "Bandwidth Optimization" fieldset (I think it's closely related) with something like this for the wording:

Checkbox label: "Skip loading jQuery when the system detects it will not be used"
Checkbox description: "Use with caution. The detection will be unreliable if the site includes JavaScript directly via <script> tags in the theme or in content."

However this needs some review.

Note that in the above I flipped the meaning of the checkbox also - because for all the other checkboxes on the page you click on them to improve performance, so I think this one should behave that way too.

vmachado’s picture

Suggested changes applied:

1. To be grammatically correct the checkbox should say "Load" rather than "Loading". And it shouldn't end in a period.
Changed the checkbox label from "Loading" to "Load" and removed the period in the end of the sentence.

2. I think the "sites and module authors" wording doesn't fit here - this is just aimed at a single site owner, right?
Yes I agree with you in this point. Changed to "sites and module authors" to "site administrator".

3. This doesn't seem to be warning people of the risks in any way. I think we do need to do that, but in as compact a way as possible.
Added the suggest warning description in the checkbox field description.

The checkbox label was not changed to 'Skip loading jQuery when the system detects it will not be used', because flipping the meaning of the checkbox will force flip the variable value. This change will make other parts of code that already are tested and working to be changed and aren't in the scope of this issue.

vmachado’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 6: javascript_always_use_jquery_variable-2594151-6.patch, failed testing.

David_Rothstein’s picture

Status: Needs work » Needs review

Thanks for working on it.

The checkbox label was not changed to 'Skip loading jQuery when the system detects it will not be used', because flipping the meaning of the checkbox will force flip the variable value.

That's not true, though. There doesn't have to be a one-to-one mapping between checkbox values and variable values - there could just be a form submit handler that saves the opposite of the submitted checkbox value into the variable.

luizsgpetri’s picture

Status: Needs review » Reviewed & tested by the community

Tested using menu_example module and a custom js file included on _menu_example_basic_instructions.

If Load jQuery and related JavaScript libraries on all pages = Unchecked - No Jquery in the page - OK
AND
drupal_add_js(drupal_get_path('module', 'menu_example') . '/js.js', array('requires_jquery' => FALSE)); - No Jquery in the page - OK
drupal_add_js(drupal_get_path('module', 'menu_example') . '/js.js' ); - Jquery is on the page - OK

If Load jQuery and related JavaScript libraries on all pages = Checked . Jquery is on the page - OK
AND
drupal_add_js(drupal_get_path('module', 'menu_example') . '/js.js', array('requires_jquery' => FALSE)); - Jquery is on the page - OK
drupal_add_js(drupal_get_path('module', 'menu_example') . '/js.js' ); - Jquery is on the page - OK

yoroy’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: -Needs usability review +Usability
FileSize
38.23 KB

Here's the usability review :)

1. Why is this in it's own fieldset and not part of Bandwidth optimization?

Latest patch:

2. We want to word this in such a way that checking the box means opting in to the performance improvement. Something like "Do not load jQuery javascript on pages that don't need it".

3. No need to talk about "allowing site administrators", if you can see this checkbox you can use it.

4. "This detection will be unreliable if the site includes JavaScript directly via

tags in the theme or in content." "Unreliable" does not instill confidence, would be better to use different wording there. "Will not work for…" or "does not apply to…"?
vmachado’s picture

Uploaded new patch with the suggested usability improvements.

David_Rothstein’s picture

Thanks @yoroy. I wonder if you have any thoughts on my suggestion from #5 since I think it meets most of your criteria:

My tentative suggestion would be to put this under the existing "Bandwidth Optimization" fieldset (I think it's closely related) with something like this for the wording:

Checkbox label: "Skip loading jQuery when the system detects it will not be used"
Checkbox description: "Use with caution. The detection will be unreliable if the site includes JavaScript directly via <script> tags in the theme or in content."

(possibly with "The detection will be unreliable if the site includes..." changed to "The detection will not work if the site includes..." based on your feedback above, or even "This can break sites that include...")

yoroy’s picture

That sounds pretty good to me.

I don't think it's necessary to refer to "the system", lets write from the perspective of the system itself: "Skip loading jQuery when it will not be used". (hmmm, this maybe a general principle :-)

On the permission page the descriptions for risky permissions start with "Warning: blabla etc.", in italics, lets do the same here. Which would give us:

[ ] Skip loading jQuery when it will not be used
Warning: This may break sites that include JavaScript directly via ‹script› tags in the theme or in content.

nbouhid’s picture

Patch re-rolled based on yoroy suggestions.

Status: Needs review » Needs work

The last submitted patch, 15: javascript_always_use_jquery_variable-2594151-15.patch, failed testing.

vmachado’s picture

Status: Needs work » Reviewed & tested by the community

The test failure is unrelated to the patch, so ignore that. The patch looks good. Thanks!

yoroy’s picture

Issue tags: +sprint
Wim Leers’s picture

Status: Reviewed & tested by the community » Needs work

Skip loading jQuery when the system detects it will not be used

This is not true.

Drupal 7 cannot detect this, because it allows individual JS files to be attached. This is why Drupal 8 always works with asset libraries. (They exist in D7 too, but are entirely optional.)

Only highly optimized sites can actually enable this. Most/many contrib modules attach individual JS files and hence are incompatible with this.

IMO it's a very bad idea to expose this in the UI.

David_Rothstein’s picture

Status: Needs work » Needs review

No, the detection should actually work fine when individual JavaScript files are attached - see the tests: http://cgit.drupalcode.org/drupal/tree/modules/simpletest/tests/common.t...

The only scenario where it's not expected to work is if the Drupal API is bypassed entirely (for example, JavaScript added via direct <script> tags).

David_Rothstein’s picture

Status: Needs review » Needs work
Issue tags: +Needs tests

I think this could use work for a few small things though:

  1. The <em> tags should be outside the translatable string rather than inside it. And they should probably get a dedicated class (similar to how the permission page warning has a class; that one is <em class="permission-warning">).
  2. Rather than "‹script›" it should probably use the actual HTML angle brackets, i.e. &lt;script&gt;.
  3. Although not absolutely critical, it would be nice to have a very simple automated test to ensure this can be set and unset correctly via the UI (given that we have special code to make the checkbox value the opposite of the variable value).

I think the new wording looks good by the way; I originally put "when the system detects" in there as a way of hinting that it's by definition not 100% reliable, but I suppose the new, louder warning in the description will be noticeable enough for that.

vmachado’s picture

@David_Rothstein The attached patch made the small changes to the UI and also implemented a simple test as suggested.

vmachado’s picture

Status: Needs work » Needs review

David_Rothstein’s picture

That looks good, but:

+    $this->assertFalse(variable_get('javascript_always_use_jquery', TRUE), 'When the checkbox is selected: 
.....
+    $this->assertTrue(variable_get('javascript_always_use_jquery', FALSE), 'When the checkbox is not selected: 

I see what you're trying to do here but I think it's confusing to use different default values in different places. It's probably better not to use default values at all; that way we can directly assert that the variable is actually set via the UI in the first place.

We could do it like the attached, where I also cleaned up a few minor code style and grammar/wording issues.

I tested this manually and it works great. The only changes I made were minor and to the tests + code comments, so I'm going to mark this RTBC.

One other thought I had:

+  $form['bandwidth_optimization']['javascript_always_use_jquery'] = array(
+    '#type' => 'checkbox',
+    '#title' => t('Skip loading jQuery when it will not be used'),
+    '#default_value' => !variable_get('javascript_always_use_jquery', TRUE),

It's a bit confusing to have the checkbox form element name be the exact same as the variable name (since they mean opposite things). However if we changed that we'd also have to add extra code to make sure system_settings_form_submit() doesn't create a variable in the database for the checkbox name. I think it's probably not a big deal the way it is so I left that the way it is for now.

I will assign this to @stefan.r (Drupal 7 Product Manager who did not work on this patch) for final review, since this is definitely a product-related issue. Hopefully it's possible to get this into 7.50, but we'll see. There are string changes here (which we generally like to do earlier in the release cycle) but they are only new strings, so it's not as bad, and I think there are other issues we're still considering for this release that add strings too.

If this gets in, I can create a quick change record pointing out that this is now configurable via the UI - for a description it will mostly just point to the older change record at https://www.drupal.org/node/2462717 though.

David_Rothstein’s picture

And now with periods at the ends of sentences....

stefan.r’s picture

I like the general idea of exposing this as an option in the UI -- it seems useful enough to allow for configuring this outside of drush/settings.php, and the Performance page does seem like the right place for this.

Just for reference, it currently looks like this:

Having discussed this a bit on IRC with @yoroy, this probably needs a bit more text, explaining when and why to enable this (not actual documentation, just enough information so that people can make a decision about checking the box or not). Perhaps we'll also want to clarify this is an advanced option (as in, non-expert users should leave it untouched).

Despite #11, I'd also argue for putting this in its own fieldset (or renaming the current one and rewriting the "external resources..." bit). It seems this is intended as an overall front-end performance optimization, rather than mainly being about "Bandwidth optimization".

stefan.r’s picture

Assigned: stefan.r » Unassigned
Status: Reviewed & tested by the community » Needs review
David_Rothstein’s picture

Having discussed this a bit on IRC with @yoroy, this probably needs a bit more text, explaining when and why to enable this (not actual documentation, just enough information so that people can make a decision about checking the box or not). Perhaps we'll also want to clarify this is an advanced option (as in, non-expert users should leave it untouched).

Any suggestions on what to add? We could put something like "If you don't know whether your site includes JavaScript using those methods, don't enable this setting" at the end of the description (to encourage less advanced users from turning it on) but I'm not sure if it really adds much to what's already there.

Despite #11, I'd also argue for putting this in its own fieldset (or renaming the current one and rewriting the "external resources..." bit). It seems this is intended as an overall front-end performance optimization, rather than mainly being about "Bandwidth optimization".

Hm, really? To me this seems exactly like bandwidth optimization, nothing else. (We are automatically leaving out the jQuery library when it isn't used, which reduces the size and/or number of JavaScript file requests.)

---

Something else visible in the screenshot is that this new checkbox label doesn't have a period at the end, but the existing ones in the fieldset do. However, checkbox labels elsewhere on this page and elsewhere in Drupal tend not to end with a period (although some do; overall Drupal is pretty inconsistent here). I tend to think it's better without a period so it's worth leaving as is, but it could go either way given the general inconsistency here.

Fabianx’s picture

I like this patch.

I thought about it again and BW optimization is fine as section.

What about texts:

"Advanced: Skip loading jQuery when no javascript is added to the page that requires it."

And as explanation:

"This enables Drupal to serve pages that don't have any javascript assets added to them, which can improve performance."

And in second line:

Warning: ... (as before)

stefan.r’s picture

OK to leave it in that section if it's only about bandwidth optimization.

As to that period, I would say definitely go with visual consistency for now and add the period, even if we don't do so elsewhere.

How about just "Skip loading jQuery (and related JavaScript libraries?) on all pages where it (they?) will not be used"
and instead of elaborating further in the help screen we link to a change record/handbook page?

David_Rothstein’s picture

OK, I added the period by editing the patch file :)

There are several ideas for wording changes above; I think it would probably be a good idea to get more feedback from @yoroy here since he helped write/approve the earlier wording.

Regarding the "and related JavaScript libraries" part, I think the only others included in that are jquery.once and misc/drupal.js, which are pretty low-level and based heavily on jQuery itself. So I'm not sure it's worth mentioning that, at least not as part of the checkbox label (perhaps in a more detailed description though). However could do something more general like "Skip loading JavaScript libraries on pages where they won't be used" I suppose (since mentioning jQuery itself is somewhat of a technical detail).

Status: Needs review » Needs work

The last submitted patch, 33: javascript_always_use_jquery_variable-2594151-33.patch, failed testing.

David_Rothstein’s picture

Status: Needs work » Needs review
yoroy’s picture

Status: Needs review » Needs work
Issue tags: -sprint, -Needs usability review

I like "Skip loading JavaScript libraries on pages where they won't be used", because mentioning jQuery is indeed a mostly technical detail, so this more general description could make it easier to understand what your choice is here.

vmachado’s picture

Status: Needs work » Needs review
vmachado’s picture

@yoroy @david_rothstein

Any news about this issue?

joseph.olstad’s picture

Issue tags: -Drupal 7.60 target +Drupal 7.70 target

Bumping to 7.70. This didn't make it into 7.60