How to load your JS and CSS file per page on Webflow?

By default, Webflow loads all your custom JavaScript and CSS across every page. Whatever you paste into Site Settings → Custom Code applies globally — it executes on your homepage, your blog posts, your contact page, and every CMS collection item, whether those pages need it or not. For a site with page-specific functionality, this is unnecessary weight delivered to every visitor.

The practical problem: a form validation script that only runs on the contact page loads on your homepage too. An animation script written for a specific landing page runs on every CMS item. A third-party embed that powers one interactive element on one page contributes to load time sitewide. These scripts don't crash on the wrong pages — they just consume download time and JavaScript execution budget unnecessarily.

How Webflow's code placement works: Site Settings → Custom Code is global and runs on every page. Appropriate for analytics, tag managers, and global UI scripts. Page Settings → Custom Code is page-specific and only runs on that page — the right place for page-specific interactions, embeds, or scripts tied to unique functionality. Embed elements are element-specific: the script or HTML block only exists within that component, ideal for self-contained widgets or tightly scoped interactive elements.

The right approach: if a script is only used on one page, it belongs in that page's Settings, not Site Settings. Go through your Site Settings custom code and ask for each script: which pages actually need this? If the answer is one page, move it.

For CMS collection templates, page-specific code added in the template's Page Settings runs on every collection item — there's no way to scope it to individual items via Webflow's UI. If you need truly per-item scripts (different tracking parameters, item-specific embeds), store the embed code in a CMS field and render it within the collection template.

For CSS: the same logic applies. Custom CSS in Site Settings loads globally. Styles needed only on specific pages can go in that page's Page Settings custom code inside a style tag, or be scoped using class selectors that only appear on that page.

Monthly review: open Site Settings custom code and review both head and footer sections. For each block, verify it's still needed globally. If it was added for a specific page or campaign that ended, remove it from global scope or delete it entirely. Five minutes, done.

Per-page code management is less visible than other performance tasks, but the cumulative weight of code that loads everywhere when it's needed nowhere is real. Clean it up once a quarter and your baseline page weight stays in check.