Learn how Webflow optimizes your site’s JavaScript.
Note
Per page JavaScript and the option to asynchronously load JavaScript
is gradually being rolled
out to all users.
Webflow optimizes JavaScript on your published site by generating page-specific JavaScript files and reusable chunks of code that can be cached by the browser. You can also choose to load these JavaScript files asynchronously under Advanced publishing options, allowing page content to be rendered at the same time. These features can improve your site’s performance and perceived load time by reducing the amount of JavaScript that’s loaded on each page.
Per page JavaScript
Good to know
Before the introduction of per page JavaScript, Webflow generated a single site-wide JavaScript file that was loaded on every page, regardless of whether or not all of the JavaScript was required.
With per page JavaScript, Webflow generates a separate, smaller bundle of JavaScript files for each page instead of a single, site-wide file. This ensures that only the JavaScript required for a specific page is loaded.
JavaScript that's used across multiple pages is split into reusable chunks that browsers can cache. This means that the code doesn’t need to be reloaded every time a user navigates to a different page.
By reducing the amount of JavaScript code that needs to be loaded, per page JavaScript can improve page load time and site performance.
Asynchronously load JavaScript (optional)
You can choose to load your site’s JavaScript synchronously or asynchronously under Advanced publishing options by toggling Asynchronously load JavaScript off or on.
When toggled off (default), JavaScript files load sequentially and before page content (HTML and CSS) is rendered. This can slow down how quickly content becomes visible and interactive, especially if scripts are large or complex, but provides better compatibility with custom JavaScript.
When toggled on, JavaScript files load in parallel and at the same time page content is rendered. This can improve perceived load time by allowing the page content to render without waiting for the JavaScript to fully load, but may cause issues with some custom code.
Important
If your site uses custom JavaScript code or a shared Library, enabling asynchronous JavaScript loading may prevent scripts and Library elements from working as expected. This happens when JavaScript that your custom code or shared Library elements depend on hasn’t been fully loaded by the browser.
Using custom JavaScript with asynchronous loading
If your site uses custom JavaScript that depends on scripts executing in a specific order (synchronous), you may need to adjust your code to work when asynchronously loading JavaScript.
Depending on your specific custom code, there are two main ways to delay its execution and ensure it works when asynchronously loading JavaScript:
-
External JavaScript — add the
defer attribute to <script> tags with a src attribute to delay execution until the HTML is fully parsed.
-
Inline JavaScript — wrap inline JavaScript in a window load event handler to ensure execution only happens after all resources are loaded.
Note
Webflow support is unable to provide assistance with custom code. If your custom JavaScript doesn’t work after toggling on Asynchronously load JavaScript and publishing your site, we recommend toggling off the feature and republishing your site while you
work with a developer or
reach out in the Webflow forum for support.