How to Use Custom Code in Webflow Without Killing Performance

While Webflow is often touted as a no-code platform, every Webflow developer eventually runs into the platform’s limits. Whether it be a custom animation, some complex functionality, or a third-party integration, sometimes Webflow alone just can’t get the job done. When that happens, Webflow thankfully makes it easy to extend your site with custom code. However, if not implemented correctly, custom code can mess with overall performance, cause speed issues or just plain break something completely unexpected. 

In this article, we’ll break down how to implement custom code in Webflow with the  best practices to maintain your site's performance and expand your Webflow site from no-code to low-code. 

‍

What do we mean by “custom code” in Webflow?

Custom code in Webflow usually comes in one of three forms, 

• HTML:  This is the content and structure of your page. Think of it as the building blocks (headings, images, buttons, link blocks) 
• CSS: Controls how everything looks. Colours, fonts, spacing, and any extra styling that goes beyond what Webflow’s Designer lets you do.
• JavaScript: This adds the functionality to your site beyond conveying the message. Things like form check boxes, animations, pop-ups, or connecting to third-party tools.

‍

While Webflow already uses these three coding languages to build our sites, when we need that extra boost, we may need to add snippets of these to expand our site. But every piece of custom code weighs down our sites, so we need to be mindful of how we implement our solutions. 

‍

How to Embed Custom Code in Webflow

There are a few ways to add code to your site. Picking the right one is the first step to keeping performance intact.

‍

1. Site-wide code 

For scripts you want everywhere, like Google Analytics or a live chat widget:

• Go to Project Settings → Custom Code.
• Add the script to the Head (for code that should run before the page shows) or before </body> (for everything else).

Pro tip: don’t dump everything here. If you only need something to run on one page, don’t slow down your entire site by loading it everywhere.

‍

2. Page-level code

For scripts that only belong on a specific page:

• Open that page’s Settings.
• Paste your code in the page’s Head or before the Body section. 

This is perfect for things like custom sliders or form scripts.

‍

3. Embed elements

Think of this as dropping code right into your layout, just like a Div block. Drag in an Embed from the Add panel and paste your snippet inside. You can also add embeds into Rich Text Elements, giving you more control over what's in your CMS collections. 

This is great for things like HubSpot form embeds, custom buttons, or iframes.

‍

4. CSS properties in the Style panel

Webflow recently gave us the ability to add any CSS property directly in the Designer, even ones not officially available in our Webflow Designer UI.  Scroll to the bottom of the Style panel, and you’ll see a field where you can type in any CSS property and value.

This means less reliance on embeds for simple tweaks. You can keep your styling in one place and reduce the amount of custom code weighing down your pages, and see changes immediately on your Webflow canvas. 

‍

Common pitfalls that hurt performance 

Here are the most common mistakes that slow down Webflow sites and cause issues when adding custom code.‍

• ‍Loading scripts on every page when you only need them on one
  Example: loading a custom interactive map script on every page by having the code in site settings when it's only needed on your contact page. 
  ‍
• ‍Pulling in huge libraries for tiny jobs
  Example: loading the entire jQuery Library or another heavy animation framework just to achieve a fade-up animation. Webflows' built-in interactions or the new GSAP animation UI can easily handle this without needing to add more libraries to your site.
  ‍
• ‍Putting scripts in the wrong place
  Example: Scripts in the Head load before the page can render, so they can block the page and make it feel slow. If you’re adding a custom slider, make sure it goes in the Body section so it only starts to load once the page has fully loaded.
  ‍
• ‍Forgetting old Code
  ‍If your site's been around for a while, there may be some old code lurking in the background that’s not necessary anymore. Make sure to regularly audit your site for unused code that might be loading on your pages and remove what's not needed.
  ‍
• ‍Too many Embeds
  Adding lots of separate embed elements can clutter your site and make it harder to manage, leading to issues down the road. If you’re reusing the same code snippet in multiple places, make sure to use a component so you can update it once and have it apply across your site. 

‍

Best practices for performance-friendly custom code 

Now that we’ve covered the common mistakes, let’s look at how to do custom code the right way in Webflow.

‍

Load scripts correctly

Not all scripts need to run at the same time. Loading them properly makes a big difference to performance.

Use async when the script doesn’t depend on the page content (like Google Analytics). It downloads in the background and runs as soon as it’s ready, without blocking the page.

<script src="analytics.js" async></script>

Think of this as telling your browser: “Grab this while you’re loading the page, and run it whenever as soon as it’s ready.”

‍

Use defer when the script needs the page to be built first (like sliders or accordions). It also downloads in the background, but only runs after the HTML is ready.

<script src="slider.js" defer></script>

Think of it as: “Prepare this now, but don’t run until the page is ready.”

Be intentional with placement

We’ve already discussed that the code you want on every page belongs in Project Settings, and page-specific code belongs in Page Settings or each page. The key is to review regularly and make sure things are still in the right place as your site grows.

‍

Name things clearly

Use unique names like .bw-slider or .js-map so your code doesn’t clash with Webflow’s built-in classes.

‍

Test every time

After adding custom code, run a quick Lighthouse report or check your site’s speed. It’s much easier to fix issues right away than track them down weeks later.

‍

Performance Optimization Beyond the Code

Even with every precaution when adding custom code to Webflow, other parts of your site can still drag down your performance. Here are some quick wins to boost your speed and keep your bandwidth bill low. 

‍

Turn on Webflow’s minification and caching
In your Project Settings, under Publishing, toggle on “Minify HTML, CSS, and JavaScript.” This tells Webflow to automatically compress the code it outputs, which makes your pages load faster. Webflow also handles caching, so returning visitors don’t need to reload everything from scratch.

‍

Compress and Optimise your images and mediaLarge image and video files are one of the biggest causes of slow sites. From your asset panel in Webflow Designer, select all images and click compress to WebP or AVIF formats to optimise image loading. Try to host videos outside your site on a platform like Vimeo and embed them to increase page load speeds. In Webflow asset settings, turn on lazy loading so off-screen images and videos only load when the user scrolls to them.

‍

Load only the fonts you need
Audit what fonts and font weights you’re actually using across your site. If you’re only using regular, bold, and thin, uninstall any other font weights that might be loading in the background. This is not only good for site performance, but it is also a best practice for keeping your design system in order with multiple people editing and making changes to your site. 

‍

Audit your site regularly
Use tools like Lighthouse, PageSpeed Insights, or Silktide to see what’s causing issues with your site. Tools like these give you a performance score and highlight specific issues, such as large assets, unused code, or slow scripts, that you can then address to improve your site's overall performance. 

‍

Monitoring and Debugging Tools

When it comes to adding custom code to your site, you unfortunately can’t just publish and forget about it. While with your normal Webflow sites, all updates and issues are taken care of by Webflow, with custom code, you will need to keep an eye on how it is affecting your site over time and if any updates need to be made. 

‍

Browser Developer Tools
In Chrome (or any modern browser), right-click your site and choose Inspect from the dropdown. Two tabs are especially useful:

• Network tab: shows you every file your page loads and how long it takes. Look for scripts that are unusually large or slow.
• ‍Console tab: lists errors and warnings. If your script isn’t working or is breaking something, you’ll often see clues here.

‍

Monitor your analytics
Tools like Google Analytics can show if your new code is impacting the user's experience. Watch for:

• Bounce rate is suddenly going up.
• Average time on page drops after you add new code. Both can be signals that your site has slowed down or is glitching.

‍

Conclusion 

Unlocking the ability to implement and effectively manage custom code on your Webflow site is a major step in levelling up in your Webflow developer journey and opens a world of possibilities when it comes to the functionality and increased performance of your site. In this article, we’ve covered the best ways to implement your custom code on Weblfow, the biggest pitfalls to avoid , and how to spot errors that may occur.

Looking to add custom functionality to your Webflow site without compromising performance?
‍Contact Broworks for optimised code solutions.