> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How is Crisp optimised to not slow down your website's loading

*Understand how the Crisp chatbox is optimized for website performance and what to check when automated tools report warnings.*

Crisp is built to load asynchronously and keep the chatbox lightweight. Automated performance tools can still report warnings because they do not always account for compression, caching, HTTP/2, delayed loading, and user experience context.

---

# ${color}[#0080dd](How Crisp loads on your website)

The Crisp chatbox is designed to avoid blocking your main page content. It loads asynchronously after your website content starts loading, so it should not prevent your page HTML, stylesheets, or core scripts from rendering.

Crisp also avoids heavy frameworks in the chatbox code and uses a caching strategy that pulls only what is needed.

__Approximate compressed asset sizes:__
* **Scripts** → about `90KB`
* **Stylesheets** → about `35KB`
* **Images** → included in stylesheets to reduce visual glitches during loading
* **Fonts** → about `10KB` per Latin font group; other alphabets may vary

|| These figures are approximate and can change as Crisp ships updates, but the chatbox is intentionally kept lightweight.

---

# ${color}[#0080dd](What Crisp does to optimize performance)

#### ${color}[#445055](Asynchronous loading)

Crisp loads asynchronously so the chatbox does not block your website's main rendering path.

#### ${color}[#445055](Long-duration caching)

Chatbox scripts, stylesheets, and assets are cached by the browser. When Crisp updates the chatbox, a lightweight cache check allows visitors to pull updated assets.

#### ${color}[#445055](Low-latency chat servers)

Crisp uses regional chat servers so visitors connect to an endpoint close to them. The chatbox establishes its WebSocket connection after assets are loaded.

#### ${color}[#445055](Distributed CDN and modern HTTP)

Crisp serves assets through a distributed CDN and modern HTTP protocols. This reduces connection overhead compared with older request models.

#### ${color}[#445055](Compression)

Crisp compresses JavaScript and CSS using modern compression methods when available, along with minification to reduce transferred bytes.

#### ${color}[#445055](Optimized fonts)

Instead of loading one large font containing every character set, Crisp loads only the required UTF-8 sub-ranges for the language in use.

#### ${color}[#445055](On-demand feature loading)

Crisp does not load heavier feature libraries such as MagicBrowse or calls by default. They are loaded only when needed.

---

# ${color}[#0080dd](How to read automated performance reports)

Tools such as Lighthouse, GTmetrix, and similar scanners can be useful, but they can also overstate the impact of third-party widgets.

__Common reasons reports look worse than real usage:__
* **Uncompressed size display** → tools may show raw file size instead of compressed transfer size
* **HTTP/1.1 assumptions** → tools may count requests differently from real HTTP/2 behavior
* **Vanity metrics** → a single score may not reflect real user experience or business outcomes
* **Third-party timing** → a delayed widget can still appear in the report even when it does not block page content

| Use automated scores as diagnostics, not as the only measure. Real-user metrics, conversion data, and interaction speed matter more than a standalone score.

---

# ${color}[#0080dd](Defer chatbox loading manually)

If you still want every website resource to load before Crisp, you can load the Crisp script after the page event you choose. This is usually not necessary, but it can satisfy strict performance requirements.

__Example deferred loading snippet:__
```js
document.addEventListener("DOMContentLoaded", function() {
  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);
  })();
});
```

||| Deferring Crisp further can make the chatbox appear later for visitors. Use it only if you understand the trade-off and have measured that it helps your specific website.