1

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 javascript functions are needed for above the fold area?

The situation isn't rare: one has 10-20 css and javascript files and wants to move them to the html file's end. On moving of css files is it pretty simple to find out, which styles should remain in the head, but how is it with javascripts?

  • What would you do differently for JS that isn't required above the fold? – Stephen Ostermiller Sep 1 '16 at 11:54
  • @StephenOstermiller: move them to the html file's end, merge to one file and do some kind of lazy loading / difering. I mean, if some css rules for above the fold are missed, then it could a kind of FOUC happen - if some javascript functions are missing, i afraid of something similar. – Evgeniy Sep 1 '16 at 12:10
  • Sounds problematic to me and I wouldn't do that unless the speed benefits were pretty dramatic. – Stephen Ostermiller Sep 1 '16 at 12:25
  • critical css-path optimization is strongly recommended by Google and Co. But nobody says a word about, what to do with javascripts despite the situation and the circumstances are pretty the same. dramatic speed benefits: if you don't move javascripts to the page's end, the rendering is blocked so long, as long javascripts are fully loaded. and this could take time. but if you move them all, you risk to get some kind of flash – Evgeniy Sep 1 '16 at 12:36
  • Even the CSS optimization would seem to have downsides. Any CSS in the head of the page can't be cached between pageviews. I tend to put all the CSS used on every page of the site into a file that is loaded using a link. Each page gets the rules specific to that page (or to a small set of pages) in the head of the document. You could inline the critical CSS to speed up the load of the first page, but at the expense of every subsequent page view. – Stephen Ostermiller Sep 1 '16 at 12:39
2

You'll want to move render blocking content to the top of your pages while putting as much javascript and css at the bottom of your pages that doesn't block the rendering of your above the fold content.

Most websites load their css at the top of their pages because it contains styling essential to the rest of the page. But if there is css only useful for the footer of a page, it is fine to load that at the bottom of the html if it will take the user a while to scroll down. It can actually make your site faster.

Javascript is similar except that it usually isn't necessary for a page to display it's initial visual interface to the user. As a result, websites usually load that at the bottom of html so that the page can load faster.

When Javascript is essential to the rendering of your page visually, especially above the fold, then you almost certainly want to load the javascript at the top of your pages.

HTML is ordered chronologically in such a way that earlier code is downloaded and processed by the browser before later code. So you want to put whatever code is needed to load your page higher up on the page, and code that isn't as important at the bottom.

|improve this answer|||||
1

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:

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

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

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.