Using PageSpeed to eliminate render-blocking JavaScript for jQuery

Question

I have jQuery added at the bottom of the page. However, when I run my site on pagespeed insights (Mobile), I get the error:

Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 2 blocking script resources and 1 blocking CSS resources.

This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load.

Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

See: http://learnyourbubble.com and https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Flearnyourbubble.com&tab=mobile

However, the jQuery is added at the bottom of the page. So it should be below the fold.

How can I remove this error?

Answer 1

It has to do with your font files.

Look at request 19 and 20 in the waterfall. These font files are considered CSS.

Notice how first paint (green vertical line) does not happen until after the font files are loaded?

Then notice the 15 JS files were loaded prrior to the font (CSS) files.

That is what Google is taking about.

Having 16 JS files is beyond excessive.

Try this: Disable JavaScript in your Browser. Notice the only change is in the menu header. Is 16 JS files worth that? I think not.

Answer 2

This article should explain a lot of what's happening: https://varvy.com/pagespeed/critical-render-path.html

In short though the problem is that chrome will need to load your jquery and your foundation javascript to give the initial render of the page. This is why its blocking. Just because the javascript comes after the html, does not mean that the html can be displayed yet. The rendering of the DOM is still going to block while the jquery/foundation is being loaded because chrome thinks they're vital to the page being displayed correctly. Pagespeed complains on these particularly because they're large. To alleviate this problem, there are a few things you can do, some of them detailed in the article above, some of them in here https://developers.google.com/speed/docs/insights/BlockingJS. The easiest way to tell chrome that these scripts are not vital and can be loaded "below the fold" is to add a defer or async tag to them.

Answer 3

I see an error calling foundation() but I will assume that you have removed it to rule it out, but it could be that this same call happens prior to load. Try to always enclose your code like:

(function($) {
   // DOM ready
})(jQuery);

Answer 4

Have you tried loading async

Make JavaScript Asynchronous By default JavaScript blocks DOM construction and thus delays the time to first render. To prevent JavaScript from blocking the parser we recommend using the HTML async attribute on external scripts. For example:

<script async src="my.js">

See Parser Blocking vs. Asynchronous JavaScript to learn more about asynchronous scripts. Note that asynchronous scripts are not guaranteed to execute in specified order and should not use document.write. Scripts that depend on execution order or need to access or modify the DOM or CSSOM of the page may need to be rewritten to account for these constraints.