incubator-pagespeed-mod
incubator-pagespeed-mod copied to clipboard
apache
Defer JavaScript: a problem with jQuery
Hello,
Some libraries, for example jQuery and https://github.com/ded/domready, consider a page to be ready when its readyState is either interactive or complete. When the js_defer.js script is working, the readyState of the page is interactive and the following code displays the #test not found message.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://code.jquery.com/jquery-3.2.1.js'></script>
<script>
// When the page is ready
jQuery( document ).ready( function() {
if (!document.getElementById('test')) {
alert('#test not found');
}
});
</script>
<!-- add an empty js file, delay for 1 sec. -->
<script type='text/javascript' src='http://deelay.me/1000/https://codepen.io/anon/pen/JONQRX.js'></script>
</head>
<body>
<div id="test">test content</div>
</body>
</html>
Thanks in advance
Thanks for the report and the minimal repro.
defer_javascript is classified as high-risk in the docs, so it is entirely possible that some constructs break when you enable it. I am not able to determine if the case you posted should be expected to break, maybe someone else is able to comment on the specifics of that.
I suspect that one way to fix this would be to move the execution of the deferred js to a later stage.... but that will probably have a multitude of undesirable side effects.
I actually thought that particular case was handled, but it's one of the difficult ones. Note that defer_javascript doesn't care or know anything about jquery, but I assume jquery is setting onreadystatechange and I thought that was something that did work. I might not be remembering correctly, though.
In any case, the proper resolution is to simply not use defer_javascript for this use-case. There is no one currently planning on looking at or improving defer_javascript further.
On Mon, Nov 13, 2017 at 8:54 AM, Otto van der Schaaf < [email protected]> wrote:
Thanks for the report and the minimal repro.
defer_javascript is classified as high-risk in the docs, so it is entirely possible that some constructs break when you enable it. I am not able to determine if the case you posted should be expected to break, maybe someone else is able to comment on the specifics of that.
I suspect that one way to fix this would be to move the execution of the deferred js to a later stage.... but that will probably have a multitude of undesirable side effects.
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/pagespeed/mod_pagespeed/issues/1682#issuecomment-343925309, or mute the thread https://github.com/notifications/unsubscribe-auth/AB2kPYg8WYHs0lKBlwf22lSiQDCmw3XTks5s2EoTgaJpZM4QbqFO .
This seems to still be an active issue since defer_javascript causes jQuery errors in vanilla WordPress 5.5 installs:
you need to exclude wp-includes/js/dist folder and js/jquery/jquery.js file from defer loading via data-pagespeed-no-defer attribute.
Hi
Defer jquery in wordpress is a bad idea whatever the method you use to do it. In fact some plugins to defer/async scripts in wordpress exclude the jqery by default,
You can exclude it by the method @vanushwashere says or with:
pagesped Disallow /jquery.js*
This let jquery as is it, w/o any optimization from pagespeed
