Ensuring Stability with the defer Attribute

Why add the defer attribute?

When implementing Cludo on your website, it’s important to ensure that your site remains stable and responsive—even if Cludo’s script is temporarily unavailable.

By default, if a script loads without the defer attribute, it can block other parts of your page from loading. In rare cases (such as during an outage), this may cause your website to become unresponsive.

Adding the defer attribute tells the browser to continue loading the rest of your website first, and only execute Cludo’s script once the page has finished parsing. This is considered a general best practice for any third-party script.

How to add the defer attribute

Simply make sure your Cludo script tag includes the word defer at the end of the tag.

Here’s the correct format, including the defer attribute:

<script data-cid="000" data-eid="000" 
  src="https://customer.cludo.com/scripts/bundles/experiences/manager.js" 
  id="cludo-experience-manager" defer>
</script>

Notice the defer attribute added before the closing >.

Additional step when using inline initialization code

For templates that require an additional script snippet with inline initialization code, one additional change is required to make sure things stay in sync. These types of snippets look like this:

<script type="text/javascript" src="https://customer.cludo.com/scripts/bundles/search-script.min.js"></script>
<script type="text/javascript">
    var CludoSearch;
    (function () {
        var cludoSettings = {
            // Your Cludo configurations
        }
        
        CludoSearch = new Cludo(cludoSettings);
        CludoSearch.init();
    })();
</script>

The following changes will ensure that these scripts work together:

1. Add the defer attribute to the first script
2. Change the function in the second script to a named function definition such as initCludo()
3. Add an event listener at the bottom of the second script that will run the function after the DOMContentLoaded event

An example of updated scripts with these changes:

<script type="text/javascript" src="https://customer.cludo.com/scripts/bundles/search-script.min.js" defer></script>
<script type="text/javascript">
    var CludoSearch;
    function initCludo() {
        var cludoSettings = {
            // Your Cludo configurations
        };

        CludoSearch = new Cludo(cludoSettings);
        CludoSearch.init();
    }

    document.addEventListener("DOMContentLoaded", initCludo);
</script>

Benefits of using defer

• Prevents Cludo scripts from blocking your website’s content.
• Improves your site’s performance and user experience.
• Ensures resilience if Cludo files are temporarily unavailable.

Do I need to make changes?

• If your script reference already includes defer, no further action is needed.
• If it doesn’t, we strongly recommend updating your script tag as shown above.

If you’re unsure or need help, please reach out to our support team—we’ll be happy to assist.