Add JS to a LiveCanvas page or website

We’ll show you how to implement and add JavaScript to a page within LiveCanvas.
We're exploring how to add JavaScript code within the HTML editor of LiveCanvas.
We’ll share some tips on Optimizing Page Load Speed with async and onload to ensure the JavaScript runs without affecting the page load time.

Where I can add my JS?
Remember, you can insert JavaScript either within LiveCanvas or use it globally within the PicoStrap theme (see the function.php file with examples).

Add JS to a specific page within the HTML code Editor
Let's focus on this specific example: implementing JavaScript at the page level, ensuring it runs only within the context of a single page.

Addressing Render-Blocking Resources
Google’s PageSpeed Insights often flags render-blocking resources, which are scripts and styles that delay the rendering of web pages. To resolve this, we recommend loading non-critical JavaScript and CSS asynchronously.

A powerful technique for achieving this involves using the async attribute and onload event when loading scripts. These attributes enable asynchronous script loading and ensure that certain actions are executed only after the script is fully loaded, thereby preventing page rendering from being blocked.

Here's a general example illustrating the concept:

 <!-- Synchronous script loading that blocks page rendering -->
<script src="https://example.com/library.js"></script>
<script>
    // Code that depends on the library
    function init() {
        // Initialization code
    }
    init();
</script>

After Optimization:

<!-- Asynchronous script loading that does not block page rendering -->
<script async src="https://example.com/library.js" onload="initLibrary();"></script>
<script>
    function initLibrary() {
        // Code that depends on the library
        function init() {
            // Initialization code
        }
        init();
    }
</script>

Would you like to see some examples? Read this article to understand how to implement Rellax JS and GSAP.