At Crisp, we trust that performance is a serious matter. That's why Crisp is one of the fastest providers on the market. Crisp is only 130KB to download. Less than most JPG images.

Most webmasters are using SEO tools to analyze website assets. These tools can be outdated and are not considering all optimizations that Crisp is using. For instance, you may not fully trust results from Lighthouse or GTmetrix.

An independent blog made an article that compares the speed of different chat platforms, including Crisp. In this test, Crisp is the fastest. Read: https://wpspeedmatters.com/speed-of-chat-widgets/

You could be victim of the Lighthouse Syndrome

Lighthouse Syndrome as explained on https://arunoda.me/blog/lighthouse-syndrome results on relying on a "Vanity Metric".

Lighthouse score does not mean anything about the user experience of the web app or how it performs. It's just another metric.

Here's what we should try to do instead:

If you are interested in the product, maybe focus on your Key Performance Indicators(KPI) like monthly recurring revenue(MRR) or daily active users.

Otherwise, try to optimize your app for faster interaction and navigations. A framework like Next.js will help you get things done automatically.

Our actions to optimize performances

1. Small-sized resources

The Crisp Chatbox does not run on any framework or heavy external library. Crisp is built in "vanilla JS" (as developers call it), to ensure it is as light as possible.

Crisp leverages a multi-tiered caching strategy to pull only what's needed, when it's needed. For instance, the Crisp script, stylesheets and assets are put in a long-duration browser cache, and are only requested upon first visit. If we update the chatbox, your users will be able to detect chatbox changes within a day, thanks to a lightweight cache check script, and pull the updated assets again.

Here are approximate sizes of the assets Crisp serves (compressed):

Scripts : 90KB
Stylesheets : 35KB
Images : included in stylesheets to prevent visual glitches when loading
Fonts : 10KB per font group (size per font group depends on the alphabet in use; this size is for Latin)

2. Asynchronous loading

Crisp is loaded asynchronously to not slow down and impact your SEO. It means that Crisp chatbox is loaded after the main content from your website has been loaded (HTML, stylesheets, scripts).

3. Low-latency chat servers

We have servers all around the world to avoid impacting end-users if they connect from a far-away country.

We have dedicated endpoints in the following cities/countries:

London, GB (for European & African users)
Frankfurt, DE (for European & African users)
New York, US (for North American & South American users)
Singapore, SG (for Middle Eastern, Indian users, Asian & Oceanian users)

Those chat servers use the WebSocket protocol. The WebSocket channel is established once chatbox assets are fully loaded.

4. Distributed CDN using HTTP/2

Crisp is using latest HTTP standards to serve your content, as well as an anycast CDN that serves content from one of the nearest server in its 150+ data-centers in the world.

It reduces the amount of TCP handshakes and leads to 50% faster requests compared to HTTP/1.1 without a CDN (in some cases, that can even be 75% faster).

A CDN is a Content Delivery Network, that serves assets (CSS, Images, Javascript) from a location that's as near to the user as possible.

5. Assets are compressed

Crisp is compressing assets using GZIP and Javascript/CSS minification. Every single byte matters.

When available, we use the more modern Brotli over GZIP, which compresses more and is faster to decompress for end-user browsers. Brotli is available on most modern browsers (eg. Chrome).

6. Fonts are optimized using UTF-8 sub-ranges

Instead of downloading an UTF-8 font containing all characters, Crisp loads only what is required. For instance, if you are using a Latin locale, we load only Latin characters ( this totals to only 10KB per font , while the full font would weight 100KB+).

7. We only load the content that is needed

By default, Crisp is not loading MagicBrowse and Call libraries. Those are loaded on the fly if you request either a MagicBrowse session, or a call.

Don't trust automated SEO tools

Most webmasters are using SEO tools to analyze website assets are outdated and are not considering all optimizations that Crisp is using.

For instance, these tools are analyzing HTTP/1.1 requests and may display 5 HTTP/1.1 requests, instead of 1 HTTP/2.0 request (over a single TCP channel).

Also, most of these tools are not displaying the downloaded content as compressed but uncompressed . Thus, displaying 500KB instead of 150KB .

Defer chatbox loading?

If you're still in doubt and want to make sure all your website resources load before Crisp (not only the main page, but also third party dependencies), you can still run Crisp JavaScript to include the chatbox only after the website is fully loaded:

document.addEventListener("DOMContentLoaded", function() {
  // Run your Crisp JS include here...

  window.$crisp=[];
  window.CRISP_WEBSITE_ID="YOUR_WEBSITE_ID";

  (function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
});

This method is shared to satisfy the skeptics. We don't recommend it, though, as Crisp will take more time to appear on your website.

Updated on: 31/10/2024