How to Reduce Unused JavaScript in Webflow

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to identify and reduce unused JavaScript in Webflow to improve your TBT and INP.

1. Identify heavy scripts with Chrome DevTools

In Chrome DevTools, open the Network tab, filter by JS, and reload the page. Sort by size, largest first. Usual suspects: Intercom (>300 KB), HubSpot tracking (>200 KB), and ad pixels. Note the heaviest third-party domains.

2. Load third-party scripts lazily

In Webflow, don’t add third-party scripts directly in the head. Go through Google Tag Manager and set up a Window Loaded trigger instead of All Pages. That pushes loading back until after the page’s initial render.

3. Load widgets on click

For chat widgets (Intercom, Crisp), load the widget only when the user clicks the open button. Add this script in the body:

document.getElementById('chat-trigger').addEventListener('click', function() {
  // Load the chat script here
  var s = document.createElement('script');
  s.src = 'https://widget.intercom.io/widget/VOTRE_APP_ID';
  document.head.appendChild(s);
});

4. Remove unused Webflow interactions

In the Interactions panel, delete any interactions you created but never use. Every interaction adds JS to the Webflow bundle. A clean project with few interactions can reduce Webflow JS by 30 to 50 KB.

Conclusion

Reducing unused JS improves TBT and INP, two Core Web Vitals metrics. Use cases:

• Sites with lots of third-party integrations (chat, CRM, pixels)
• Ad landing pages where every millisecond counts
• Improving INP scores on interactive pages