{"id":1850917,"date":"2022-02-21T13:20:00","date_gmt":"2022-02-21T12:20:00","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=1850917"},"modified":"2024-06-04T17:06:30","modified_gmt":"2024-06-04T15:06:30","slug":"deferred-loading-of-javascript","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/deferred-loading-of-javascript\/","title":{"rendered":"How to Defer Parsing of JavaScript in WordPress (Manually and with a Plugin)"},"content":{"rendered":"

Do you think dealing with JavaScript is challenging? You\u2019re not alone. JavaScript is difficult to learn because it is powerful: it adds dynamic and interactive elements to the web page to engage with the user. <\/p>

If you\u2019ve ever audited your WordPress site through GTmetrix or PageSpeed Insights, you\u2019ve probably come across the suggestion to \u201cdefer parsing of Javascript\u201d:<\/p>

\"Eliminate
Eliminate render-blocking resources by deferring non-critical JS – Source: GTmetrix<\/em>
<\/figcaption><\/figure>

In plain English, it means that some Javascript is affecting your site loading time \u2014 and that you should do something to improve speed. <\/p>

In this tutorial, you\u2019ll learn everything you need to know about deferring Javascript and why it\u2019s crucial for the performance of your WordPress site. Because deferring JavaScript can be daunting at first, we\u2019ll share some easy optimization techniques you can implement for your site. <\/p>

What Does Defer Parsing of JavaScript Mean?<\/h2>

Defer Parsing of Javascript means to delay the JS processing that is not needed immediately on the visitor\u2019s screen. Deferring Javascript is a key optimization technique to minimize your main thread work<\/a> and remove useless weight during the page load. <\/p>

What Do Defer and Parsing Mean in Javascript<\/h3>

When you defer Javascript, here\u2019s what happens: you postpone or delay the loading of Javascript to load the most important content first. You tell the browser not to process (parse) a part of the Javascript just yet. Instead, the actual page content will get the loading priority over the JS code that must be executed immediately. <\/p>

\ud83d\udcd6  To keep in mind:<\/strong>

Defer<\/strong> = to load at a later time or<\/em> postpone a part of the code

Parsing <\/strong>= the process of “reading” and “understanding” the code by the browser

JS usual path<\/strong> = Download > Parse <\/strong>> Compile > Execute > Render on the visitor\u2019s screen<\/td><\/tr><\/tbody><\/table><\/figure>

Defer Parsing of Javascript to Reduce Blocking of Page Rendering<\/h3>

The render-blocking resources are stylesheets, Javascripts, and HTML that delay or block the browser from displaying the page content to the visitor. Defer Parsing Javascript is one of the strategies to eliminate render-blocking resources because the browser will know<\/em> which lines of code need to be loaded in priority. <\/p>

Let me show you how render-blocking resources affect browsers and the loading time with a code snippet with HTML and JS: <\/p>

\"How
How render-blocking resources affect browsers
<\/figcaption><\/figure>

This is what is happening for my browser behind the scene: <\/strong><\/p>

  1. My browser sees that some HTML needs to be downloaded.<\/li>\n\n
  2. But then, he finds some JS to parse and execute. The browser can\u2019t execute everything at the same time: the download of my HTML (actual content) is paused.<\/li>\n\n
  3. Performance issue triggered:<\/strong> while my browser is processing the <script.js>, the rest of my HTML is blocked. Consequently, rendering the page content to the visitor takes more time. <\/li><\/ol>

    \u231b What changes if you defer parsing of JS?<\/strong><\/p>

    When you defer parsing of JavaScript, you tell the browser to load and parse the JavaScript file separately. The DOM – or the critical content – will be shown to the visitors immediately instead of being blocked, like in our above example.<\/p>

    Why Defer Loading of Javascript is Important for Performance<\/h2>

    Deferring loading of Javascript and optimizing javascript parsing will significantly reduce the render time of your page and improve your performance. But why?<\/p>

    Remember that the browser must go through the contents of all <script> tags to load a page. The more scripts you have to process, the more page loading will increase.<\/p>

    Consequently, if you delay some of the Javascripts, your browser will be able to focus on the most important: render the content being viewed by the visitor<\/strong> as fast as possible. <\/p>

    To achieve this outstanding performance, your browser needs to prioritize the most critical code to achieve this outstanding performance. As a result, any actions towards Javascript code optimization and prioritization will:<\/p>