DEV Community: Anselm Icheku

DEV Community: Anselm Icheku The latest articles on DEV Community by Anselm Icheku (@anselm_icheku_5f40039adf6). https://dev.to/anselm_icheku_5f40039adf6 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2038945%2Fa6bfb185-3c97-485e-b524-0f2d17fed893.png DEV Community: Anselm Icheku https://dev.to/anselm_icheku_5f40039adf6 en Optimising page Performance with proper <script> tag placement. Anselm Icheku Sun, 08 Sep 2024 17:59:45 +0000 https://dev.to/anselm_icheku_5f40039adf6/optimising-page-performance-with-proper-tag-placement-2a62 https://dev.to/anselm_icheku_5f40039adf6/optimising-page-performance-with-proper-tag-placement-2a62 <h2> THE SCRIPT TAG </h2> <p>The script tag is a quite interesting one. </p> <p>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.</p> <p>There are quite some sections of html page where the tag should be placed.</p></p> <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> <p><p>The position you place your <script> determines how fast your page loads and some other functionalities.</p></p> <p><p></p>Here is a breakdown of common positions to place your <code>&lt;script&gt;</code>tags, the criteria and why it matters.</p></p><br> <h2><br> <a name="placing-ltscriptgt-in-the-ltheadgt-section" href="#placing-ltscriptgt-in-the-ltheadgt-section" class="anchor"><br> </a><br> Placing <code>&lt;script&gt;</code> in the <code>&lt;/head&gt;</code> Section:<br> </h2></p> <p><p>when <code>&lt;script&gt;</code> is placed inside the <head> the script is executed as soon as the browser reads it while parsing the HTML.</p></p> <p><p>This happens before any of the body elements (content) are rendered.</p></p> <p><p>When is it important to put the <code>&lt;script&gt;</code> in the <code>&lt;head&gt;</code> section?</p></p> <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> <p><p>However, there are some downsides to consider when placing your tags in the <head> section.</p><br> <div class="highlight"><pre class="highlight plaintext"><code>&lt;ul&gt;<br> </code></pre></div><br> <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><br> <li> • If the script tries to access DOM elements that haven&#39;t been loaded yet, it will fail or cause errors.<br><br> </ul></p></p> <p><p><br> Example:<br><br> <code>html &lt;br&gt;<br> &lt;head&gt; &lt;br&gt;<br> &lt;title&gt;&lt;/title&gt;&lt;br&gt;<br> &lt;script src="script.js"&gt; <br><br> <br><br> ............<br><br> </code></p> <br> <h2> Placing `<code>at the Bottom of</code><body>` </h2> <p><p><br> Another good position is in the <code>&lt;body&gt;</code> section. </p></p> <p><p>Here the script is placed just before the closing body tag </body>.</p></p> <p><p>In this position , the script is executed after the HTML content has been parsed and rendered by the browser.</p></p> <p><p>This is ideal when your JavaScript needs to manipulate DOM elements (e.g., adding event listeners, modifying content, animations).</p></p> <p><p>This is important because by the time the script runs, all elements in the body are already loaded and accessible.</p></p> <p><p>Ofcourse there are benefits to this method:</p> </p> <p><p> - It allows the page content to load first, improving ,page load performance.<br></p> <ul> <li>Avoiding errors related to trying to access DOM elements before they exist.<br> </p></li> </ul> <p><p>Example:<br><br> ```html <br></p> <p><body> <br><br>  <br><br> <script src="script.js"> <br><br> ; close to the </p> javascript beginners softwaredevelopment webdev