Crispy Secret Sauce to build the Fastest Live Chat widget for website

Offering the best customer experience comes with offering great customer care, but your website speed is also to take into account. In fact, according to Shopify, 80% of e-commerce buyers that are not satisfied with your website speed are less likely to buy from you again.

At Crisp, we trust that performance is a serious matter and it is a part of customer experience. Crisp has been tested among other live chats, confirming that Crisp is the fastest chat.

In this article, we will explain that every millisecond matters and how we do at Crisp to offer the fastest chat loading time:

• 1 second in average on the first page load.
• 0.5 second in average on next page loads

1- A mesh of servers all around the world

The Internet is worldwide, and your customers can be everywhere. All continents are connected using optical fibers and even if the information is traveling at the light of speed, it creates latency.

For instance, transferring data from Paris to Tokyo takes at least 240ms. San  Fransisco to Berlin takes at least 200ms.

What we do at Crisp is deploying our messaging servers all around the world to offer your customers the best experience.

So we have our own servers in every content from America, Europe to Asia to reduce the loading time.

2- We use a CDN

A CDN (Content Distribution Network) is a worldwide mesh of servers. Crisp is using Cloudflare to serve all the necessary assets to load the chatbox on your websites.

Those assets can be Javascript files, CSS, images, or fonts.

Cloudflare is having servers in most countries in the World (more than 250 locations). For instance, if one of your customers connects from London or Manchester, it will download the Crisp live chat assets directly from a server located in London. That makes the difference!

3- Reduced assets size

As explained in the introduction of this article, every second matters. Reducing asset size is very important in order to make our chat widget fast, especially for mobile devices which tend to be connected to 3G networks.

Loading only what is necessary

Our live chat includes many functionalities, from co-browsing to video calls. When loading our chat widget, we won't include those features initially. It will be included only if you call your customer, or request a co-browsing. Saving around 500KB.

No external dependencies

Many of our competitors use frameworks like Angular, VueJS, or ReactJS or libraries like jQuery to build their chat widget. Those libraries make their chat widget conception easier but it also comes with loading more resources.

The Crisp live chat is not using those external libraries and only uses native Javascript functions. It makes the chat faster.

Locales optimization

The Crisp chat widget is translated into more than 50 languages. Supporting many languages is great because plenty companies are using Crisp to serve customers everywhere in the world.

If your Crisp chat widget is configured for German, we will only download a chat widget that is directly optimized for German, without downloading other languages.

To support Crisp in every language, we are using a font called Noto Sans. It supports most alphabets.

To make the Crisp chat faster, we split this font into separated fonts. For instance, if your chat is using a Latin language (English, German, Spanish, French), we don't include font characters optimized for other characters (like Arabic, Cyrillic, or Chinese).

However, if your chat is configured for Russian, we will only enable Cyrillic and latin characters (without enabling Arabic and Chinese).

Those optimizations save around 100KB.

Assets optimization

Our chat is using HTML, CSS and Javascript. To speed up the Crisp widget loading time we optimize those assets to make them as small as possible.

For instance a CSS class like .crisp-client-user-input will become .crisp-X454, saving few kilobytes and making the CSS easier to read by browsers.

We are doing the same for Javascript. For example a javascript function like send_visitor_message() will be become Bc().

4- Network optimizations

Compression

All Crisp assets are compressed using an algorithm called GZIP. This compression system makes Crisp assets smaller and the chat widget becomes even faster.

HTTP/2

HTTP2 is a new protocol supported by most modern browsers. Crisp is using this protocol since 2016. It makes our chat system up to 2x faster. If the customer's browser does not support this technology, it will use HTTP1.1

Caching

Crisp is using both server-side and client-side caches. The general idea of a cache is to not download something if it was already downloaded before.

For instance, the first time loading Crisp, it will load the chatbox theme, color, and settings. We store those settings on the user end. This way, the next time the user reach your website, it won't be needed to download these resources again. It is the reason why Crisp loads in a second on the first load and then in milliseconds on the second load.

Advanced HTTPS

Security is very important for your business and customers. For this, HTTPS is enforced on our chat. However, doing HTTPS comes with a tradeoff. It makes the chat loading time slower. To balance this effect, we are supporting a protocol named ChaCha Poly. It makes HTTPS faster on mobile devices.

Those optimizations plus the fact that we have servers all around the world make that HTTPS doesn't have any impact on the Crisp loading time.

Blazing Fast Servers

Why do all these optimizations if the servers take forever to serve requests?
Our servers are using fast processors and SSDs to serve requests even faster.

We also optimized our server code and databases in order to make requests as fast as possible.

Conclusion

I hope you enjoyed this article. The key thing to understand is that every millisecond matters to make the best performance and there is no trade-off when it comes to offering the fastest chat experience.

Give Crisp a try!