Performance

The Web SDK's size budget, what it loads and when, and how to check the numbers yourself. For every option and hook, read the Web SDK reference.

Budget

The SDK's size is measured gzipped, from the build. The budget is the most the SDK may weigh; the measured value is from the build this page was written against.

The budget covers all of the SDK's script, gzipped (100 KB, all its chunks together). The page loads two script files: index.js and the core chunk it imports, which together hold the ring, the carousel and the rest the page needs. Four more chunks load the first time they are needed, so a display that does not use them never fetches them: the viewer and the renderers of tale documents (on the first open of a group), the banner's other variants (coverflow, peek, deck, sticky and strip, on the first banner that uses one), the bar's chip, poster and stack (on the first bar that uses one), and the poll views other than the sticker (embed, this-or-that, grid and inline, on the first tale that has one). Until its chunk arrives, a display shows its loading skeleton in the same space. The UMD build is one file that includes all of them. Each zone adds one request to the TaleArt API, and the page makes no call to any other host. Pictures load as described below.

Loading rules

• The script loads once per page. Put the script tag once, with type="module" (which defers it) or with defer or async. Several zones on one page share that one script.
• The zone call starts when the element connects. Each <taleart-view> requests its zone once it is added to the page, so a zone that is added later makes its request then.
• Media loads lazily. Covers and banner slide pictures start with loading="lazy" and load when they come within about 1,250 px of the window.

How to verify

From the repository root, run the build's size check and the budget measurement:

pnpm nx run web-sdk:measure-budget
pnpm nx run web-sdk:size

measure-budget builds the SDK, measures its gzipped ES and UMD builds, and writes apps/docs/src/app/pages/sdk-budget.generated.ts. size builds it and fails when the SDK is over the budget. To check the docs agree with the measurement, run the docs tests:

pnpm nx test docs

The numbers above are read from the measured file the build writes, so they change with each measurement. To check the requests yourself, open your page with the browser's developer tools on the Network tab: one script request, one request per zone, and no request to another host.