Articles on: For developers and agencies

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:

Duplicate the live theme and remove the "Ask about product" block from the copy.
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>).
Alternate the two pages, at least 5 runs each.
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.

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.