Like placing CSS at the top of your page to help reduce page load times, putting JavaScript at the bottom of your page will help do the same. While JavaScript is necessary to enable certain functionality of your site, themes, or plugins, for example, JavaScript is also commonly referred to as render blocking files, meaning that sometimes they can prevent certain code, or page elements, to render properly. If the browser parses and tries to render JavaScript, it is possible that may cause your page load to slow down, or even cause your page to not load at all.
If your goal is to present user with content as the page loads, having JavaScript in the header will prevent this from occurring, causing them to wait as everything loads. To avoid this issue, there are a few different methods you can use. If the JavaScript file is small, you can inline them with your HTML document. Otherwise, the next best option is to defer it from loading by putting at the bottom of your document. We will take more about the benefits and how to inline JavaScript in later sections.
