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.

Answer 1

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