Will a Chat Widget Slow Down Your Site? Chatbots and Core Web Vitals

A chat widget can slow your site down, but a well-built one shouldn't make a noticeable difference. The risk isn't the chat bubble itself. It's heavy scripts that load before your page, run code every time a visitor clicks, or push your content around as they appear. Those show up in Google's Core Web Vitals, which feed into how Google judges your page experience.

Here's what each metric measures, how a chat widget can hurt it, and a simple before-and-after test you can run in ten minutes. I build ChatBento, so I'll also say what our widget does, but the test works for any tool.

The three Core Web Vitals, briefly

Google's Core Web Vitals are three measurements of real visitors' experience. To pass, a page should meet all three at the 75th percentile of visits, measured separately for mobile and desktop:

INP replaced the older First Input Delay metric as a Core Web Vital in 2024. It's the one third-party scripts most often hurt, because it measures every interaction on the page, not just the first.

How a chat widget can hurt each one

LCP: loading in the way

A widget script that loads synchronously in the <head> makes the browser fetch and run it before showing your page. If the vendor's server is slow that day, your whole page waits.

What to look for: the script tag has async or defer, or it's placed just before </body>. A widget has no reason to block your content.

INP: busy main thread

The browser handles clicks on its main thread. If a widget runs a lot of JavaScript (tracking, animation, polling for new messages), clicks on your buttons can feel sluggish, even when nobody touches the chat.

What to look for: a small script, little work until the visitor opens the chat, no constant timers. Big all-in-one "engagement" suites that bundle chat, popups, tracking and A/B testing are the usual culprits.

CLS: pushing your page around

A widget that inserts a banner at the top of the page, or a bar that appears after load, pushes your content down. That's a layout shift, and it's also the moment a visitor taps the wrong button.

What to look for: a launcher that floats in a corner with fixed positioning, so it sits on top of the page without moving anything.

Other things that hurt, without showing up in the scores

• Auto-opening chat windows. Not a Core Web Vital, but they cover content and annoy people. Let visitors open the chat themselves.
• Covering buttons on mobile. A bubble sitting on "Add to cart" doesn't change your scores but costs you sales. I wrote about where to put the widget.
• Style clashes. A widget that loads its own CSS into your page can change your fonts or buttons, and your CSS can break it. Widgets that render inside a shadow DOM keep the two separate.

How to test a widget before and after

You don't need developer tools for a first check. You need PageSpeed Insights and a few minutes.

1. Pick two or three key pages: your homepage, a product or pricing page, and whatever page gets the most traffic.
2. Run PageSpeed Insights before installing. Note the mobile Performance score and the LCP, INP (shown in the field data), CLS and Total Blocking Time numbers. Run each page three times and take the middle result, because lab scores vary between runs.
3. Install the widget.
4. Run the same pages again, three times each, same device setting.
5. Compare. A small, well-built widget should move the lab numbers by very little. If Total Blocking Time jumps, or LCP gets noticeably slower, ask the vendor why or try a different tool.

Two things to know when reading the results:

• Lab data versus field data. The Performance score at the top comes from a simulated test (Lighthouse). The "Discover what your real users are experiencing" section is field data from the Chrome UX Report, covering real visits over the previous 28 days. Field data is what Google uses, but it takes weeks to reflect a change, and small sites may not have enough traffic to show any.
• Small changes are noise. A score moving from 92 to 90 between runs is normal. Look for consistent, clear differences.

If you're comfortable with Chrome DevTools, the Performance panel will show you exactly how much main-thread time each script uses. That's the most direct way to see whether a widget is the cause of a slow page.

Questions to ask any chat widget vendor

• How big is the script, compressed?
• Does it load with async or defer?
• What does it do before the visitor opens the chat?
• Does it add anything to the page apart from the launcher?
• Does it set timers or poll the server in the background?
• Does it render in a shadow DOM or iframe, so its styles can't clash with yours?

A vendor who knows their widget well can answer all six quickly.

What ChatBento's widget does

For the record, since it's the one I build:

• About 18 KB, about 6 KB compressed. One script, loaded with async, so your page doesn't wait for it.
• One small request for its settings (color, greeting, corner) when it loads, then nothing until a visitor sends a message.
• Renders in a shadow DOM, so your site's CSS and the widget's CSS don't touch each other.
• A fixed-position launcher in the corner you choose, so it doesn't push page content around.
• Never opens on its own. Visitors open it when they want it.

Even so, I'd run the before-and-after test on your own pages. Your theme, your other scripts and your hosting all affect the result, and your own numbers are the only ones that matter.

A quick checklist

• Baseline PageSpeed Insights results saved for 2-3 key pages
• Widget script loads with async or defer
• Launcher floats in a corner and doesn't move page content
• It doesn't auto-open or cover buttons on mobile
• Same pages re-tested after install, three runs each
• Field data checked again after about four weeks

The short version

A chat widget is one more script on every page, so it's worth five minutes of checking. Look for a small, async script with a floating launcher and no background work, and test your key pages before and after. If the numbers barely move, you get the support benefits without paying for them in page speed.

The step-by-step install guides show where the ChatBento snippet goes on each platform, including plain HTML sites.