Optimize custom scripts

Load custom scripts only where pages need them, and use async and defer to speed up rendering.

Scripts you add through custom code, like analytics pixels, chat widgets, and sliders, can slow your pages if they load where they aren't needed or in the wrong place. You can fix that in three ways: add scripts only to the pages that use them, place them at the end of the page so it renders first, or add the async or defer attribute so the browser downloads them without stopping the page.

Choose where your code loads

Every script loads on every page it's included in. Webflow gives you three places to add custom code, and picking the smallest one that works keeps unneeded code off the rest of your pages.

• Code embed element — runs inline, only where you place it and only on pages that include it. Learn more about the code embed element.
• Page settings — loads on that page only. Add code in the Custom code section of a page's settings.
• Site settings — loads on every page. Add code in Site settings > Custom code.

Before you paste a third-party snippet, check whether Webflow already integrates with the tool. It also helps to keep a list of what you've added, why, and who owns it, since scripts pile up across teams and years. Learn more about custom code in head and body tags.

Move a page-specific script to a single page

Scripts that only one page uses don't need to load on your whole site. The site usage dashboard flags JavaScript and CSS bundles over 250 KB and suggests moving page-specific scripts to the page that uses them. Learn more about the site usage dashboard.

To move a script from your site settings to a single page:

1. Go to Site settings > Custom code
2. Copy the script from the Head code or Footer code section
3. Delete the script from that section and click Save
4. Go to the Pages panel and open Page settings for the page that needs the script
5. Go to Custom code and paste the script in the Before </body> tag section
6. Click Save, then publish your site

If you use the same script on a few pages, add it to each of those pages instead of your whole site, and test each page after you publish.

How a browser handles a script

When a browser builds your page, it reads your HTML from top to bottom. A plain script tag looks like this:

<script src="https://example.com/script.js"></script>

When the browser reaches it, it stops building the page, downloads the script, runs it, and only then continues. That's called a parser-blocking script. If the script is slow to download, everything below it waits. For a deeper look, read Chrome's guide to eliminating render-blocking resources.

Place scripts at the end of the page

One option is to place your scripts at the end of the page, just before the closing </body> tag, so the page renders before the scripts load. In Webflow, that's the Footer code section. Scripts in the Head code section load before anything else on the page.

• Site-wide — go to Site settings > Custom code and use the Footer code section
• Single page — open the page's Page settings and use the Before </body> tag section under Custom code

Use async or defer

The other option is to keep a script where it is and add the async or defer attribute to its script tag, so the browser downloads it without stopping the page. Here's how each one behaves compared with a plain script, and when to use it:

• No attribute — the browser stops, downloads the script, runs it, then continues building the page. This is the safest for order and the slowest for the page.
• async — the browser downloads the script while it builds the page and runs the script as soon as it's ready. Order isn't guaranteed, so whichever script arrives first runs first. Use it for independent scripts that don't rely on anything else, such as analytics pixels and chat widgets.
• defer — the browser downloads the script while it builds the page, then runs it after the HTML is fully parsed. Deferred scripts run in the order they appear. Use it for scripts that need the Document Object Model (DOM) or need to run in a specific order.

<!-- Independent script: runs whenever it's ready -->
<script src="https://example.com/analytics.js" async></script>

<!-- Needs the page or another script: runs in order, after parsing -->
<script src="https://example.com/slider.js" defer></script>

Tiny scripts that must run immediately can stay as they are in the Footer code section.

Load Webflow's JavaScript asynchronously

Webflow includes a separate publishing setting that loads its own JavaScript files asynchronously. It requires a paid Site plan or Workspace plan. Learn more about asynchronous JavaScript loading.

To turn it on:

1. Go to Site settings > Publishing > Advanced publishing options
2. Turn on Asynchronously load JavaScript
3. Click Save, then publish your site

If your custom code relies on Webflow's JavaScript, it might not run as expected after you turn this on. For an external script, add the defer attribute. For inline JavaScript, wrap your code in a window load event handler so it only runs after everything has loaded:

window.addEventListener('load', function () {
  // Your code here
});

Keep your scripts lean

• Slim down Google Tag Manager — reduce the weight of tracking and tag scripts
• Optimize video and rich media — keep embedded players from adding extra scripts and weight
• Run a Lighthouse audit and set a baseline — test your pages again after you change how scripts load
• Maintain site performance — review your scripts regularly as your site grows