Defer parsing of JavaScript for JQuery load - Stack Overflow

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.

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.

• javascript
• jquery
• performance
• jquery-deferred
• pagespeed

Share Follow edited Mar 19, 2012 at 19:37 Googlebot asked Mar 19, 2012 at 19:21 GooglebotGooglebot 15.7k4545 gold badges144144 silver badges247247 bronze badges 6

• Basically, your client code should reside in a .js file somewhere, and add the defer attribute to the <script> tag. – 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 Commented Mar 19, 2012 at 19:31
• Are you placing the jQuery include near the end of your document? – Interrobang Commented Mar 19, 2012 at 19:41
• @Interrobang yes at the bottom of footer. – Googlebot Commented Mar 19, 2012 at 19:42
• Just remove defer? Or I didn't understand the question at all? – bfavaretto Commented Mar 19, 2012 at 19:42

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

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 remend 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).

shouldn't that be

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

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

Just add this to your script async example:

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