How to Defer Only Some Javascript Loading in Magento 2?

Magento 2 Rocket JavaScript extension allows you to enable deferred JavaScript loading and move JS code to the bottom of the page automatically. That way you increase the website loading speed and eliminate render-blocking.

However, sometimes you don't need to move all JavaScripts to the bottom since there are some that aren't recommended to be moved there.

In this guide you'll learn how you can do that.

How to Defer Some JS Loading Automatically?

Navigate to Stores > Configuration > Magefan Extensions > Rocket Javascript and find the Ignore Deferred JavaScript With section. Then specify the strings you don't want to be moved to the bottom, each in a new line. 

The extension will add data-rocketjavascript="false" attribute to them automatically so they will be ignored.

How to Defer Some JS Loading Manually?

In case you don't want to move some JavaScript to the bottom you just need to add the attribute data-rocketjavascript="false" to the <script> tag directly in your code:

Example:

Let's say you had the JavaScript tag like this:

<script>
    alert('I do not wont to move this javascript to the footer');
</script>

So, as a result, it will be like:

<script data-rocketjavascript="false" >
    alert('I do not wont to move this javascript to the footer');
</script>

Once you add these attributes to your scripts, they won't be moved to the bottom of the page. But that's not the only optimization you need to make to improve page speed. Check out our JS bundling optimization guide.