JavaScript code at the bottom of a web page, then the browser will load everything in front of it before it loads the JavaScript. This is a good thing because most browsers will typically stop processing other loading initiatives until the JavaScript engine has compiled the JavaScript contained in a web page. It’s sort of a bottleneck in a sense that you have JavaScript at the top of a web page document.

Objectives as stated below:

• To get content to visitors as soon as possible


• To load the files required for interaction last(widgets, API calls)

Example 1 - Scripts in the Middle

This page contains a < SCRIPT SRC="..." > tag in the middle of the page that takes 10 seconds to load. This illustrates two problems.

PROBLEM 1: Everything below the script won't render until the script is loaded.

The < SCRIPT SRC="..." > tag is here.

PROBLEM 2: All components below the script don't start downloading until the script is done.

The script blocks these images from being downloaded, so they're not available until much later during rendering.

It's even worse if scripts are in the document HEAD.

Example 2 - Scripts at the Top

This page contains a < SCRIPT SRC="... > tag at the top of the page in the document HEAD. Just as in the previous example, anything below the script is blocked from rendering and downloading until after the script is loaded. In this case, that means the entire page is delayed, since the script is in the document HEAD.

Example 3 - Scripts at the Bottom

This page avoids the blocking problems caused by scripts by moving the < SCRIPT SRC="..." > tag to the bottom of the page.