Defer Javascript Loading Configuration - HL Vanilla Community
<main> <article class="userContent"> <p><em>Starting in Release </em><em><code class="code codeInline" spellcheck="false" tabindex="0">2020.001</code></em><em> new Vanilla Sites defer script execution </em><strong><em>by default</em></strong><em>. Due to potential compatibility issues with existing Pockets & custom themes existing sites have the feature disabled. </em><strong><em>See the "What else needs to be done" section before enabling this for the first time.</em></strong></p><h2 data-id="what-is-deferred-script-execution">What is deferred script execution?</h2><p>Deferring script execution speeds up page loading by loading javascript <strong><em>after </em></strong>the rest of the page.</p><div class="js-embed embedResponsive" data-embedjson="{"body":"Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and\/or its affiliates.","photoUrl":"https:\/\/www.gstatic.com\/devrel-devsite\/prod\/v2c9ac76a465325deeadecadac5c42eb727c931f99890694a7bf49d2cede0da04\/developers\/images\/opengraph\/google-blue.png","url":"https:\/\/developers.google.com\/speed\/docs\/insights\/BlockingJS#deferJS","embedType":"link","name":"Remove Render-Blocking JavaScript | PageSpeed Insights"}"> <a href="https://developers.google.com/speed/docs/insights/BlockingJS#deferJS" rel="nofollow noreferrer ugc"> https://developers.google.com/speed/docs/insights/BlockingJS#deferJS </a> </div><h2 data-id="what-are-the-benefits-this">What are the benefits this?</h2><p>Blocking pages to load javascript is not considering a good practice because it negatively impacts user’s page load times. Search engines like google penalize sites that do this. </p><p>Enabling this option to defer<strong> </strong>JavaScript loading can lead to large increases in score on google’s page-speed index as well improved load times for users, especially on mobile.</p><h2 data-id="how"><strong>How?</strong></h2><p>A site administrator may now enable this option by simply navigating to the <strong>Branding & SEO </strong>page in the dashboard and toggling on the feature.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/652/TMBRTJ0DBI0Y.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/652/TMBRTJ0DBI0Y.png" alt="Screen Shot 2019-12-11 at 11.36.48 AM.png" height="150" width="1988" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="what-else-needs-to-be-done">What else needs to be done?</h2><p>An audit of a sites pockets or custom themes should be done to ensure it's compatible with this new feature. If a pocket or theme contains any javascript, ensure it isn't executed until the page is ready. This can be tested on staging or test environments.</p><p>The code below was modified by adding an event listener to wait for the page to be loaded.</p><p><strong>Before:</strong></p><pre class="code codeBlock" spellcheck="false" tabindex="0"><script> if (window.location.pathname.match(/vanilla/)) { jQuery('\') .on('mouseover', function(event) { jQuery('div').append('<img class="image-pop-over">'); }); } </script> </pre><p><strong>After:</strong></p><pre class="code codeBlock" spellcheck="false" tabindex="0">// The event listener has been added to ensure the DOM content has been loaded <script> document.addEventListener('DOMContentLoaded', function() { if (window.location.pathname.match(/vanilla/)) { jQuery('\') .on('mouseover', function(event) { jQuery('div').append('<img class="image-pop-over">'); }); } }, false); </script> </pre><p><br></p> </article> </main>