> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.keyplace.ai/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).

# Performance: script size and Lighthouse

With the page, keyplace loads about 17 KB (gzip): a small loader, one stylesheet and a short inline script. The chat code and everything else load later, after the shopper touches the widget or when the browser is idle.

## In short
- Only product pages with the block get keyplace's scripts. Other pages get only the web pixel, which runs in Shopify's sandbox.
- The critical path has a budget of 18 KB gzip. Today it is about 16.7 KB.
- A test checks every file against its budget on every change.
- Built for Shopify allows an app to lower the storefront Lighthouse score by at most 10 points.

## What loads with the page
The closed widget is HTML rendered in Liquid, so it shows without waiting for JavaScript. Three things come with it:

- **The loader**, `keyplace-widget.js`, set as the block's schema `javascript`. Shopify adds it as a non-blocking script, once per page. Shopify's Theme Check limit for this file is 10,000 bytes.
- **The stylesheet**, `keyplace-widget.css`, set as the block's schema `stylesheet`. Shopify adds it as a normal stylesheet, once per page.
- **A short inline script** in the block. It runs while the page is parsed and matches the field to the theme's add-to-cart button, so the field gets its size before the page finishes loading.

The block has no other `<script src>` and no other stylesheet link.

## What loads later
- **Chat code**, `keyplace-chat.js`. Hovering the widget prefetches it. The first focus, tap or click attaches it. The free shipping nudge, when it is on, can also load it after 25 seconds without activity.
- **Guard**, `keyplace-guard.js`. It loads when the browser is idle, and never in the theme editor.
- **Sales cards**, `keyplace-perks.js` and its stylesheet. They load after the chat code attaches. Product cards and the back-in-stock card load only with an answer that needs them.
- **Continue the conversation**, `keyplace-cont.js`. It loads only when a kept conversation is on the device.
- **Events for the store's analytics**, `keyplace-ga.js`. It loads only when the block setting for GA4 is on. It is off by default.

Every script the loader adds is `async`.

## Budgets and sizes
Sizes at commit `ff9c7b2` (10 November 2026), gzip, 1 KB = 1,000 bytes. The budget is the ceiling the test allows.

| File | When it loads | Today | Budget |
|---|---|---|---|
| `keyplace-widget.js` | With the page | 3.7 KB | 4.2 KB (and 10,000 bytes raw) |
| `keyplace-widget.css` | With the page | 9.5 KB | 9.55 KB |
| Inline script | With the page | 3.5 KB | 10,000 characters raw |
| **Critical path, all three** | | **16.7 KB** | **18 KB** |
| `keyplace-chat.js` | First interaction | 24.3 KB | 24.5 KB |
| `keyplace-guard.js` | Browser idle | 2.6 KB | 3.5 KB |
| `keyplace-perks.js` and `keyplace-perks.css` | After the chat code | 13.2 KB and 2.7 KB | 13.3 KB and 2.7 KB |
| `keyplace-recs.js` | Answer with product cards | 4.0 KB | 4.0 KB |
| `keyplace-bis.js` | Back-in-stock answer | 5.9 KB | 6.0 KB |
| `keyplace-cont.js` | Kept conversation | 7.3 KB | 7.3 KB |
| `keyplace-ga.js` | GA4 setting on | 1.4 KB | 1.7 KB |
| `keyplace-faq.css` | Q&A block on the page | 0.3 KB | 0.8 KB |
| Web pixel | Shopify's sandbox | 3.9 KB | 5 KB |

The Liquid of the extension has its own budget: blocks up to 75,000 bytes, blocks and snippets together up to 85,000 bytes. Shopify's limit is 100 KB.

The same test fails when a new file in the extension has no budget, or when the chat code, Guard or the sales cards move onto the critical path.

## The web pixel
The pixel runs in Shopify's strict sandbox, a web worker, off the page's main thread. It sends one small `POST` per counted event and never reads the answer. Without the shopper's analytics consent it sends nothing.

## Lighthouse
Built for Shopify requires that an app lowers the storefront Lighthouse performance score by no more than 10 points.

To measure keyplace on your own store:
1. Duplicate the live theme and remove the "Ask about product" block from the copy.
2. Run Lighthouse in mobile mode on the same product page: once in the live theme, once in a preview of the copy (`?preview_theme_id=<id>`).
3. Alternate the two pages, at least 5 runs each.
4. Compare the median Performance scores.

## Limits
- The budgets cover bytes, not the final score. Your theme, other apps and the device decide the rest.
- The stylesheet loads with the page like any app block stylesheet.
- Sizes change with releases. The budgets are the ceiling.

## Common questions
### Does keyplace slow down my home page or collection pages?
The blocks work on product templates only, so other pages load no keyplace script or stylesheet. The web pixel runs on every page, in Shopify's sandbox.

### Does a shopper who never uses the chat download the chat code?
No, unless they hover the widget or the free shipping nudge fires. Otherwise only the loader, the stylesheet, the inline script and Guard load.

### Does the widget shift the layout?
The closed widget is in the HTML from the start, and the inline script sizes it while the page is parsed. The chat window is rendered hidden and opens only on a shopper's action.

## See also
- [How keyplace works in a store: technical overview](/en/article/how-keyplace-works-ege854/)
- [Theme app blocks and Online Store 2.0](/en/article/theme-app-blocks-wd7e2v/)

Still stuck? Chat with us in keyplace: **Help > Chat with us**. We reply on working days. Never send us passwords, 2FA codes or shopper data.