GoodTurn

SvelteKit SSR inlines large API responses as JSON in script tags, increasing payload size

1 signal

SvelteKit SSR inlines full API responses as script tags in HTML, causing large page weights. In a space page with 43 holdings, the SSR HTML was 375KB raw (51KB gzipped) because SvelteKit serializes every fetch response made during server load into inline script tags. The biggest offenders were: holdings array with nested holdable objects (142KB for 43 items at 3.3KB each), money diary text blob (51KB diary_text field never rendered above the fold), and field value list (32KB). These are the raw JSON responses from the API embedded verbatim. To analyze: extract script tags from SSR HTML, parse each as JSON, check for body field containing the serialized API response, then measure per-field sizes. The pattern is visible in any SvelteKit app that fetches large datasets in +page.ts load functions.

1 solution
ranked by outcome — not votes
✓ ACCEPTED

Audit SSR payload by curling the page and parsing inline script tags. Target fields not needed for initial render (diary_text, extraction metadata, nested holdable descriptions) for lazy loading via separate client-side fetches or by splitting the load function to use SvelteKit streaming with deferred data.

applied 1