Defer parsing of JavaScript for JQuery load

Question

When testing a website with Google Page Speed, I was found that I cannot get rid of Defer parsing of JavaScript. I removed all javascript codes and left only a small one as

<script defer type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.test').click(function(){
            $(this).slideDown();
        });
    });
</script>

Or even without any jquery code, just loading the jQuery file standalone as

<script defer type="text/javascript" src="jquery.min.js"></script>

still get the warning for Defer parsing of JavaScript.

Basically, your client code should reside in a .js file somewhere, and add the defer attribute to the <script> tag. — Brad Christie
– Brad Christie, Commented Mar 19, 2012 at 19:29
I also tried to put the code and jQuery source in one single JS file, but still getting the warning. Even for loading the jquery source alone, I get the warning. — Googlebot
– Googlebot, Commented Mar 19, 2012 at 19:31
Are you placing the jQuery include near the end of your document? — Interrobang
– Interrobang, Commented Mar 19, 2012 at 19:41
Just remove defer? Or I didn't understand the question at all? — bfavaretto
– bfavaretto, Commented Mar 19, 2012 at 19:42

Community · Accepted Answer · 2020-06-20 09:12:55Z

I've found this documentation page, that states:

To use this technique, you should first identify all of the JavaScript functions that are not actually used by the document before the onload event. For any file containing more than 25 uncalled functions, move all of those functions to a separate, external JS file. This may require some refactoring of your code to work around dependencies between files. (For files containing fewer than 25 uncalled functions, it's not worth the effort of refactoring.)

Then, you insert a JavaScript event listener in the head of the containing document that forces the external file to be loaded after the onload event. You can do this by any of the usual scripting means, but we recommend a very simple scripted DOM element (to avoid cross-browser and same-domain policy issues). Here's an example (where "deferredfunctions.js" contains the functions to be lazily loaded)

What I understand from it: you should "lazy-load" jQuery from an onload event handler (see link above for an example on how to do that).

Saket Patel · Accepted Answer · 2012-03-19 21:04:54Z

2

shouldn't that be

<script defer='defer' type="text/javascript" src="jquery.min.js"></script>

instead of providing empty defere attribute use defer='defer'

answered Mar 19, 2012 at 21:04

Saket Patel

6,7031 gold badge29 silver badges36 bronze badges

2 Comments

Andy Davies Over a year ago

Doesn't that depend on whether you're using xhtml or not?

nu everest Over a year ago

Just use defer. You do not need defer='defer'.

Koen. · Accepted Answer · 2013-03-04 14:31:43Z

1

Just add this to your script async example:

<script type="text/javascript" async src="jquery.min.js"></script>

edited Mar 4, 2013 at 14:31

Koen.

27.3k7 gold badges87 silver badges80 bronze badges

answered Nov 19, 2012 at 8:13

Joel Enanod Jr

66910 silver badges19 bronze badges

1 Comment

dhaupin Over a year ago

That doesn't always work so well. If you the reader do this in a modular framework/platform, make sure you check the JS console for errors like "can't read property" and/or "undefined" then fix those calls/modules. Expect behavior like this and required tweaking in future mods too (that may not defer/async correctly).

Collectives™ on Stack Overflow

Defer parsing of JavaScript for JQuery load

3 Answers 3

Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Related