Articles in this section

How to Optimize Common Ninja Script Loading for SEO

Avatar
Support Team
  • Updated
Follow

When using Common Ninja widgets on your website, it’s important to ensure that the scripts loading our widgets do not negatively affect your website's SEO and overall performance. Optimizing how the Common Ninja script loads can help improve page speed, which is a key factor in search engine rankings.

In this guide, we’ll walk you through best practices to optimize Common Ninja script loading for better SEO and performance.

Default Implementation of the Common Ninja Script

Here is the code we typically provide to load Common Ninja widgets on your site:

<script src="https://cdn.commoninja.com/sdk/latest/commonninja.js" defer ></script>
<div class="commonninja_component pid-WIDGET-ID"></div>

This loads the Common Ninja script with the defer attribute, which ensures that the script is loaded after the HTML document has been completely parsed. However, for certain use cases—such as SEO and performance optimization—there are additional steps you can take.

 

Best Practices for Optimizing Script Loading

1. Lazy Load the Common Ninja Script

If the widget is not immediately visible when the page loads (e.g., it’s in a modal or below the fold), you can lazy load the script so that it only loads when necessary. This reduces the initial load time, improving page speed and SEO performance.

How to Implement Lazy Loading: You can modify the script so that it loads only when the widget is about to appear. For example, if your widget is inside a modal or below the fold, you can use an event listener to load the script when the modal is opened or when the user scrolls down to the widget.

Example with lazy loading when a modal is opened:

<button id="open-modal">See Examples</button> 
<div id="modal" style="display: none;">
    <div class="commonninja_component pid-WIDGET-ID"></div>
</div>
<script> 
document.getElementById('open-modal').addEventListener('click', function () { 
   const script = document.createElement('script'); 
   script.src = "https://cdn.commoninja.com/sdk/latest/commonninja.js"; 
   script.defer = true; 
   document.body.appendChild(script); 
   document.getElementById('modal').style.display = 'block'; 
});
</script>

This code will only load the Common Ninja script once the modal is triggered, improving your initial page load speed.

 

2. Asynchronously Load the Script

If you need the script to load immediately but don’t want it to block other critical resources, you can use the async attribute instead of defer. This will load the script asynchronously, meaning it won’t block the parsing of HTML.

<script src="https://cdn.commoninja.com/sdk/latest/commonninja.js" async ></script>
<div class="commonninja_component pid-WIDGET-ID"></div>

This is beneficial when you want to ensure that the script doesn't delay the initial rendering of your page.

 

3. Prioritize Critical Resources

To further enhance your page speed, you can prioritize the loading of critical resources (e.g., CSS or above-the-fold content) over the Common Ninja script. This ensures that essential content loads quickly, even if the widget script takes a bit longer to load.

You can do this by placing the script near the end of your HTML file, just before the closing </body> tag, so it loads after the critical content.

<div class="commonninja_component pid-WIDGET-ID"></div>

<!-- Other critical scripts and content -->
<script src="https://cdn.commoninja.com/sdk/latest/commonninja.js" defer ></script>
</body>

 

4. Preconnect to CDN

Since the Common Ninja script is loaded from an external CDN, you can speed up the connection by adding a preconnect directive. This reduces the time required to establish a connection to the CDN server.

<link rel="preconnect" href="https://cdn.commoninja.com">

This allows the browser to start the handshake with the CDN earlier, improving overall performance.

 

 

Monitor and Test Page Speed

After implementing these optimizations, it’s important to test your page speed using tools like Google PageSpeed Insights or Lighthouse. These tools will provide insights into how the script is impacting your page’s performance.

 

Conclusion

Optimizing how you load the Common Ninja script can significantly improve your website’s page speed and SEO performance. By leveraging techniques like lazy loading, async script loading, and preconnect, you can ensure that your widgets don't negatively impact your page’s load times or search rankings.

If you have any questions or need further assistance, feel free to reach out to our support team!

Related articles