: How to find out javascript functions for above the fold? There are plenty of tools to get css rules for above the fold (critical css path), like this one. But how could one find out, which

@Berumen354

The reason Javascript files block rendering is the fact that they can manipulate the DOM (the HTML), and that's why the browsers wait for the Javascript files to both download and ran before the browser resumes the focus on the next items in the queue.

This depends on a case-by-case basis, but you should start by moving all of the script tags at the end of the body to start with and see how the page loads. I recommend using a network throttle to slow 3g in Chrome for this test. If you notice significant browser repaints happening after you take this step, it means that some of the above-the-fold elements rely on a javascript file for a correct initial rendering.

A few suggestions on popular ways to spot scripts which you should move to the head and make them render-blocking to avoid unpleasant visuals:


if you have a carousel upfront, you'd want to move to the head both the carousel script and any libraries it might depend upon (jQuery is popping up often as a dependency).
if you have a hamburger menu flickers to be visible and only hides after the scripts load, it means it's also reliant on javascript and you should move the according script (and its dependencies) to the head.


If you're having a hard time finding out which JS file touches those elements, try searching in the JS files for the element selector OR any attributes that stand out to you while inspecting the element.

Discovery can be done by discarding individual JS files in an attempt to see which one is causing that special element to misbehave, giving you a good starting point.

There is no automated tool for this, as the usage scenarios can wary so widely, it's always a step-by-step try and test process.

You can also use the defer attribute on the script tags.

When you use the defer attribute those script tags no longer block rendering regardless of where they exist (in the head or at the end of the body).

Deferring does mostly the same thing as moving the script tags at the end of the body and is well supported - defer attribute browser support

Good luck!

Vote Up Vote Down