Showing top 0 results 0 results found
Showing top 0 results 0 results found
How We Optimized Chat Widget Performance and Why Is It Important for Your Business?
Have you ever visited a website that took ages to load? This could have been because there were too many elements on the website, slowing it down. It could also have been caused by the quality of your internet connection. Some time ago I heard that slow Wi-Fi is worse than no Wi-Fi at all, and I couldn’t agree more.
Anyway, you may have heard that page speed has become one of the key factors influencing how pages rank in Google. Businesses are doing everything they can to optimize their websites to decrease their load time and, as a consequence, outrank competitors. It’s not like page speed alone will make or break your position in Google, but it’s crucial to start paying attention to it if you haven’t started doing so yet.
If you use live chat on your website, you need to be aware that the software you use can significantly impact your page speed. Metrics like First Contentful Paint (FCP), JavaScript execution time, the total size of the chat widget, and how long after opening the page the chat widget becomes visible can differ a lot between different live chat providers.
We want to stay ahead of the curve at LiveChat, and we’ve made several improvements to the performance of our Chat Widget. We’ll keep helping you grow your business, and you won’t have to worry about the LiveChat Chat Widget slowing down your website.
Connect with customers
LiveChat is a complete customer service platform that delights your customers and fuels your sales.
Trusted by 36,000+ companies
What do I need to know about chat widget performance?
Page speed is a vital element of a quality user experience but, as I mentioned, it’s also one of the key factors influencing your ranking on Google. As you plan on adding live chat to your website, or if you’re thinking about changing your current provider, you should carefully evaluate all available options and the impact different chat widgets will have on your website’s performance. Tools like Google Lighthouse and PageSpeed Insights should help you make better, more informed decisions.
Chat widget size
Think about the amount of data a browser needs to download to run the code needed to make the chat widget available to your customers. Less data means faster load times and better overall performance of your website. While it might seem that there are no significant differences in the amount of data needed to run live chat tools, the reality is that it varies a lot. You might think, "Right, the size of a chat widget shouldn't be a big deal because the differences are minor." However, these differences don't quite feel the same way when you compare them in kilobytes.
Some of the differences in the size of a chat widget now seem way more significant. Also, if you don't optimize your chat widget, its size might outweigh the size of a customer's entire website. As you can see in the tables above, the amount of data isn't the only metric you should pay attention to.
First Contentful Paint (FCP), JS time, and displayed chat
When you add a live chat tool to your website, you usually copy and paste a JavaScript snippet to embed a chat widget within your website. You can do it in two different ways: use Google Tag Manager or add it to the source of your website. Ensure that adding a chat widget to your website doesn't negatively impact the time it takes to access the original content on your website. That's where a metric called FCP comes in. FCP is the amount of time it takes a website to display its regular content to visitors. Since most live chat tools require you to paste a JavaScript snippet below the closing <body> tag of a website, the FCP is almost identical among all live chat providers, according to DebugBear.
JS time and how long it takes for a chat widget to be displayed are two other metrics related to how long it takes to run the code that renders a chat widget and how soon it's available after you open the page. Another important metric, time to interaction (TTI), tells us when the content becomes interactive and is available for use. As with all the other metrics discussed above, the shorter the wait times, the better.
While the source code is responsible for the majority of the chat widget size, your website also needs to download images, media, HTML, and more to display a chat widget in full swing.
Now, at page load time, the question is, do you have to load all your widget code? It turns out that you don’t, and you can use lazy loading instead.
What’s lazy loading?
You should know that you don’t need to display a chat widget in full, right after a visitor lands on your website. With lazy loading, your browser downloads only a fraction of the data it needs to run the code in order to make the chat widget available to your customers.
Lazy loading is known as a design pattern, an optimization technique, and one of the best UX practices. As GeeksforGeeks says, “Instead of loading the entire web page and rendering it to the user in one go, as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user.”
In the context of chat widgets specifically, it means that your website can initially download enough data to only display a chat bubble, for instance. Usually, it'll sit quietly in the bottom corner of your website and only expand after your customers click on it. A minimized chat window can also load the code required to display a greeting or announcement on the fly.
Simply speaking, less data needed to download when visiting your website means a better user experience for your visitors. Loading a chat widget asynchronously makes a lot of sense when you realize that there’s a cohort of visitors to your website who won't even try to use the chat on your website.
You need to know that lazy loading has its downsides as well. If you mess up its implementation, it can hide content from Google crawlers and harm your SEO as a consequence.
LiveChat’s Chat Widget performance is now better than ever
In the last couple of months, we rolled up our sleeves and worked on improving our Chat Widget in a few different ways. Apart from making our Chat Widget more accessible, we also improved its performance. Our main goals were decreasing the size of the Chat Widget and increasing its loading speed.
We needed to do that because the installation of the Chat Widget used to hurt the performance of our customers' websites. The main problem was that the Chat Widget increased website assets size. This, in turn, slows down a website. Website speed is becoming more important for SEO, and widget performance has become a significant issue for our customers.
If we put the Chat Widget asset size measured by Google Lighthouse on a timeline, we started with a chat widget size of 412KB in June 2020. We gradually reduced the total size to 332KB and 263KB in the first two stages. After a minor setback that increased the size to 273KB in the next stage, we've reached a point where our current chat widget asset size has settled at 256KB. Eventually, we reduced the overall chat widget size by 18% (71.62KB) and significantly shortened the loading time of the Chat Widget.
The first change that helped to reduce the Chat Widget loading time was code splitting. This means that the initial script of our Chat Widget doesn't contain the code required to show the Chat Widget in full. Instead, it's loaded after the user hovers over the minimized chat widget. When it comes to the second change, we replaced the sockJS library with a pure WebSocket connection to reduce the amount of time required to connect to our servers. The WebSocket connection additionally reduces the widget size because we no longer use a third-party library.
Connect with customers
LiveChat is a complete customer service platform that delights your customers and fuels your sales.
Trusted by 36,000+ companies
From now on, you won't have to worry about your website loading for too long and hurting your SEO rankings as a consequence. You'll also decrease the number of visitors bouncing off your website after getting frustrated because your website's taking ages to load. Now, it's your turn to choose a live chat tool that suits your needs best. When you combine better performance with our recent accessibility improvements, you'll also open your website to a new group of customers that couldn't talk to you on the chat before. What's not to love about making the web more user-friendly while also improving the experience of your visitors?
Get a glimpse into the future of business communication with digital natives.
Get the FREE report
Comments