72.6 F
San Jose
More
    Insights How to Defer Parsing of JavaScript in WordPress?

    How to Defer Parsing of JavaScript in WordPress?

    Did you run your website through performance testing tools only to met with instructions on how to defer parsing of JavaScript in WordPress?
    Implementing defer parsing of JavaScript change can have a positive impact on your site’s load speed, especially for mobile visitors. But the warning can be a bit difficult to understand, which is why we’re explaining what exactly it means to defer parsing of JavaScript. How you can implement to your WordPress website.

    Here’s what you’ll learn in this blog:

    What Exactly It Means to Defer Parsing of JavaScript in WordPress?

    If you’ve run your website through Google PageSpeed Insights, GTmetrix, Pingdom, or other page speed testing tools, you’ve probably come across the suggestions to defer parsing of JavaScript.
    But…what does that really mean? And why is it important for performance optimization?
    Basically, when someone visits your WordPress site, your web server delivers the HTML contents of your website to that visitor’s browser.
    The visitor’s browser then starts from the top and goes through the code to render your site. If moving from top to bottom, it finds any JavaScript snippet, it will stop rendering the rest of the page until it can fetch and parse the JavaScript file.
    The operation starts for each script that it finds, which can have a negative effect on your site’s loading because the visitor needs to stare at a blank screen while their browser downloads and parses all the JavaScript files.
    If a certain script isn’t required to the core functioning of your website (at least on the initial page loading), you don’t want it to get in the way of loading important elements of your site, that is why those performance testing tools always recommends you to defer parsing of JavaScript.

    So, what does that mean to defer parsing of JavaScript?

    Essentially, your site will tell visitors’ browsers to wait for the download and/or parse JavaScript until your site’s main content has already finished loading.
    The fact is visitors already look and interact with your page, so the wait times to download and parse that JavaScript no longer has such a negative effect. By optimizing your content’s above-the-fold load times, you make Google happy and create a better, user experience for your visitors.

    Read More: 8 Must Have Tools for Developers: Which Tool Do You Use?

    Defer Parsing of JavaScript

    GTmetrix will give you a grade and also tilt out specific scripts that need to be deferred:

    1. How to State If You Need to Defer Parsing of JavaScript?

      To test it out whether your website needs to defer parsing of JavaScript, you can run your site through GTmetrix.

    2. How to Defer Parsing of JavaScript in WordPress?

      Plugins – there are some free and premium WordPress plugins to defer parsing of JavaScript. We’ll show you how to do so with the most popular plugins.
      Varvy method – if you’re tech-savvy, you can edit your website’s code directly and use the code snippet from Varvy.
      Functions.php file – You can directly add a code snippet to your child theme’s functions.php file to automatically defer all the scripts.

    • Free Async JavaScript Plugin

    Async JavaScript is a free WordPress plugin. It gives you a simple way to defer parsing of JavaScript using either async or defer method.
    To get started, you need to install and activate the free plugin from WordPress repository Then, go to Settings → Async JavaScript to configure the plugin.On top of that, you can enable the plugin’s functionality and choose between async and defer. Remember:

    • Async downloads JavaScript while still parsing HTML but it pauses the HTML parsing to execute the JavaScript.
    • Defer downloads JavaScript while still parsing HTML and waits to execute it until after HTML parsing is completed.
    Defer Parsing of JavaScript

    Further, you can also choose how to handle jQuery. A bunch of themes and plugins rely on jQuery. So, if you try to defer parsing the jQuery scripts you might be experiencing broken your site’s core functionality. The best approach is to exclude jQuery, but you can experiment by deferring it. Just to make sure test your site passing through.
    Further down, you can also manually include or exclude specific scripts that need to be deferred, including a user-friendly feature that lets you target specific themes or plugins that are active on your site:

    1. Use Premium WP Rocket Plugin

    WP Rocket plugin allows a built-in integration to play nice with server-level caching. In addition to a lot of other performance optimization techniques, WP Rocket can help you defer the parsing of JavaScript within the File Optimization tab in plugin dashboard. You can take a look for the Load JavaScript deferred option in the JavaScript Files section.

    Similar to the Async JavaScript plugin, WP Rocket also lets you exclude jQuery to avoid issues with your site’s content:

    Also Read: Top 6 WordPress Security Tips to Protect Your Website in 2020

    3. Use Varvy’s Method (Code)

    You can implement that method by tweaking the code snippet that Varvy supplies and then adding the script to your theme immediately before the closing </body> tag.
    Here’s the code from Varvy:

    <script type="text/javascript">
    function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element);
    }
    if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
    </script>

    Make sure to replace “defer.js” with the actual file name/path of the JavaScript file that actually you want to defer. After that, you can use wp_footer hook to inject the code in your child theme’s functions.php file.
    With this method, you would wrap Varvy’s code like this:

    /**
    Defer parsing of JavaScript with code snippet from Varvy
    */
    add_action( 'wp_footer', 'my_footer_scripts' );
    function my_footer_scripts(){
    ?>
    REPLACE_WITH_VARVY_SCRIPT
    <?php
    }
    1. Defer JavaScript via functions.php File

    Lastly, you can also add the defer attribute to your JavaScript files without any plugin by adding the following code snippet to your functions.php file:

    function defer_parsing_of_js( $url ) {
        if ( is_user_logged_in() ) return $url; //don't break WP Admin
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        return str_replace( ' src', ' defer src', $url );
    }
    add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
    

    Essentially, this code snippet tells WordPress to add the defer attribute to all your JavaScript files except jQuery.
    It’s quick and easy method, but it doesn’t give you the granular level of control that something like the Async JavaScript plugin has to offer.

    Conclusion

    Deferring the parsing of JavaScript on your website is an important performance optimization. Once you’ve used one of the above methods to defer parsing of JavaScript in WordPress, we’d recommend doing two things:

    1. Test your site to make sure that deferring certain scripts hasn’t broken above-the-fold content. Again, this can usually happen with jQuery, which is why a lot of tools let you exclude jQuery.js.
    2. Run your site through GTmetrix again to make sure that your site is deferring scripts as much as possible (you might not get a perfect score if you exclude jQuery – but your score should be better)

    Do you have any questions about how to defer parsing of JavaScript in WordPress? Ask away in the comments! If you really enjoyed this blog, then you’ll love our Business Solutions. Turbocharge your business and get 24/7 support from our veteran Software Development team.

    Avatar
    Sarbjit Grewalhttps://www.tekkiwebsolutions.com/
    Mr. Sarbjit Singh Grewal is the Founder & CEO of Tekki Web Solutions Pvt. Ltd. an IT company delivering integrated business intelligence software solutions for the past decade. In 2006, he capitalized on his 13 years of experience in the global trade flow and software industry by leading Tekki Web Solutions Pvt. Ltd. and since then has been serving as the CEO
    defer parsing of javascript

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here

    12 + six =

    Table of Content

    COVID-19 Global Report
    34,159,060
    Total confirmed cases
    Updated on October 1, 2020 4:44 am

    Popular Categories

    defer parsing of javascript

    Latest article

    Types of Apps that can be built with Angular Framework

    Undoubtedly, Angular development is almost everywhere after it was released in 2009. A few years back, Angular development services are on great...

    Best HTML Editor Tools for Web Developers

    Those days are gone when web developers use to write the complete by themselves, now, with the evolving technologies, the demand for...

    Nodejs vs Python – Which is the Best Option for your Web App Development?

    The selection of the right programming language for web app development projects is entirely a daunting task. The faster deployment of web...

    Application Lifecycle Management (ALM) -To Boost the Development Speed

    The success of any software or product relies on the deployment speed. So, speed matters a lot in the development world. Some...

    Most Popular Nodejs Frameworks for Developers

    Undoubtedly, the 20th century has become the era of web application development. Every business wants to give fierce competition to its competitors...

    Must Read

    Why does the trucking and logistics industry need on-demand solutions?

    A few years back, the trucking and logistics industry was quite different from now. The customer had to wait for several hours...

    Top 6 Free and Open Source Project Management Software for Your Small Business

    Managing projects in a small business is not a piece of cake. It is much more challenging for small enterprises without the...

    How to Create an Online eCommerce Store or Website?

    Before the beginning of the internet world, starting a business is really a daunting task for fresh entrepreneurs. Whether you have a...

    5 Trending On-demand grocery delivery solutions

    The trend of innumerable on-demand solutions has emerged in the past few years to facilitate the people with what they want, when,...

    Quick Overview of Employee Transport Management Solutions

    Daily office commuting has become the worst problem of the employees around the world. There is no doubt technology, and transportation system...

    Popular Articles

    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept