How We Improved the Performance of Our Live Chat by 30%

Profile photo of Michael Dijkstra

Michael Dijkstra

November 25, 2019

In this article, we look at the high user experience cost of live chat tools. We will uncover how to implement chat without affecting performance—with our strategy, we improved the Time to Interactive on our new marketing site by more than 2 seconds.

The rise of live chat

Live chat is the most efficient support channel for both customers and customer support teams. By having chat always available on the page, customers can easily reach for help and quickly get response through conversation, a bot or links to relevant help articles.

Source: Kayako Live Chat Statistics Report

Chat is superior to email and contact forms because it provides context without any user input. Support teams receive new requests with a list of previously visited pages and actions the customer has taken before reaching out for help. Having extra information allows them to respond more accurately and solve problems faster.

Understanding the user experience impact

The always available nature of live chat is one of the main reasons it has such a significant impact on performance. Live chat can be installed by adding a JavaScript snippet to your site which then loads the widget as the page is executed.

Because chat relies so heavily on JavaScript, it’s crucial to understand that the negative influence on performance will be determined based on how long it takes the browser to download, parse, compile and execute it.

The real performance cost of chat

Let’s walk through an example of the performance impact of a live chat tool like Intercom and Help Scout.

Our starting point is a clean-slate Next.JS kit with a single index page that is hosted on Netlify. Using Calibre’s Single Page Tests on a MotoG4 over a Good 3G connection (a baseline for mobile device) we tested Help Scout and Intercom against the Next.js boilerplate. We paid close attention to their impact on the amount of JavaScript transferred, Performance Score and Time to Interactive.

NameJS Bundle SizePerformance ScoreTime to Interactive
Next.JS starter kit70kb100916ms
HelpScout Chat Beacon455.16 KB (+380 KB)84 (-16)4.94s (+4.0s)
Intercom Widget368.63 KB (+299 KB)91 (-9)4.29s (+ 3.4s)

In our example, both tools had a negative impact across the board. The effect is also felt in sites with more than just a single page, as we experienced during the development of our new marketing site.

Performance is critical to us and gets a front-row seat in our development workflow. To monitor the impact of changes, we leverage Pull Request Reviews which tests each Pull Request and compares it to current production metrics, allowing us to catch any issues before they’re merged.

We have consistently maintained Lighthouse scores above 90 and kept the Time to Interactive to less than 5 seconds. After adding Intercom, the Performance Score dropped to 77 and Time to Interactive rose to 7 seconds. Those metrics exceed our performance budgets.


There had to be a way to continue using live chat without severely degrading the user experience, and it was on us, as developers, to determine how to do so.


Fake it until your users need it

Given the significant impact that comes from the download, parse, compile and execution of the JavaScript, we decided to implement a “fake”, fast loading button using only CSS, that when clicked, would load Intercom.

Introducing React live chat loader

We published our implementation as an Open Source React component that anyone can install and use on their site. The current version supports two providers, Help Scout and Intercom. We hope the community will contribute to this package and add more chat providers.

A fast loading live chat

This strategy, combined with the fact that Intercom has made some fantastic performance optimisations by decreasing their bundle size by 65% produced a much faster user experience. When using react-live-chat-loader, the site has a performance score of 100, a Time to Interactive of 1.06 seconds and the amount of JavaScript initially transferred only increased by 15 KB.

Test results for React live chat loader implementation in Calibre interface.

And in our real world example, on our new marketing site we took our Performance Score from 77 back to over 90 and decreased Time to Interactive to less than 5 seconds.

Win-win for performance and business goals

With performance optimisation, there are always trade-offs. As we’ve discussed in this article, live chat tools are very useful, but their performance often isn’t. Unfortunately, in many cases, it’s challenging to say no to implementing a third-party library for performance reasons. However, we can get creative and come up with novel solutions to meet both business and performance needs.

It’s essential to monitor your site continually across a range of devices and connection speeds to adequately assess the impact new features and integrations have on your performance. When you notice a significant change, take a step back and see if there’s a unique way to achieve the same goal with a different implementation.

Profile photo of Michael Dijkstra

Michael Dijkstra

Michael is a Platform Developer at Calibre. He’s a product-minded developer with more than 10 years experience across the entire product stack. Find him on Twitter or LinkedIn.

Related posts

Profiling React Performance with React 16 and Chrome DevTools.

Don’t miss another article

Be notified about new product features, releases and performance research.