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.
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.
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.
|Name||JS Bundle Size||Performance Score||Time to Interactive|
|Next.JS starter kit||70kb||100||916ms|
|HelpScout Chat Beacon||455.16 KB (+380 KB)||84 (-16)||4.94s (+4.0s)|
|Intercom Widget||368.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.
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.
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.
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.
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 LinkedIn.
We will send you the latest web performance articles, tools, case studies and more, so you can become a better performance advocate.