Optimising page Performance with proper <script> tag placement.
Anselm Icheku
Posted on September 8, 2024
THE SCRIPT TAG
The script tag is a quite interesting one.
it plays a signicant role on how the html page functions because it contains the javascript or the typescript which controls how users interact with the page.
There are quite some sections of html page where the tag should be placed.</p>
<p>The placement of the <script> tag in a HTML doc plays a significant role on how the script interacts with the page when it is executed.</p>
<p>The position you place your <script> determines how fast your page loads and some other functionalities.</p>
<p></p>Here is a breakdown of common positions to place your <code><script></code>tags, the criteria and why it matters.</p></p>
<h2>
<a name="placing-ltscriptgt-in-the-ltheadgt-section" href="#placing-ltscriptgt-in-the-ltheadgt-section" class="anchor">
</a>
Placing <code><script></code> in the <code></head></code> Section:
</h2>
<p>when <script> is placed inside the <head> the script is executed as soon as the browser reads it while parsing the HTML.</p>
<p>This happens before any of the body elements (content) are rendered.</p>
<p>When is it important to put the <script> in the <head> section?</p>
<p>If the script is non-interactive or doesn't need to manipulate DOM elements (e.g., analytics, metadata handling, styling-related JS), placing it in the <head> can be commendable.</p>
<p>However, there are some downsides to consider when placing your tags in the <head> section.</p>
<div class="highlight"><pre class="highlight plaintext"><code><ul>
</code></pre></div>
<p><li>• It can delay the rendering of the page, as the browser will stop loading other resources (HTML, CSS) until the script is fully executed.<br>
<li> • If the script tries to access DOM elements that haven't been loaded yet, it will fail or cause errors.<br>
</ul></p>
<p>
Example:<br>
html <br>
<head> <br>
<title></title><br>
<script src="script.js"> <br>
<br>
............<br>
Placing `at the Bottom of<body>`
<p>
Another good position is in the <body> section. </p>
<p>Here the script is placed just before the closing body tag </body>.</p>
<p>In this position , the script is executed after the HTML content has been parsed and rendered by the browser.</p>
<p>This is ideal when your JavaScript needs to manipulate DOM elements (e.g., adding event listeners, modifying content, animations).</p>
<p>This is important because by the time the script runs, all elements in the body are already loaded and accessible.</p>
<p>Ofcourse there are benefits to this method:</p>
<p> - It allows the page content to load first, improving ,page load performance.<br>
- Avoiding errors related to trying to access DOM elements before they exist.<br> </p>
<p>Example:<br>
```html <br>
<body> <br>
<!-- Page content --> <br>
<script src="script.js">
; close to the
Posted on September 8, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related