SEO/CWV: minify:false ships a 1.5 MB unminified chunk; render-blocking jsdelivr CSS; no preconnect hints

[limonte]

Problem

Core Web Vitals are a ranking signal, and several build/loading choices work against them.

1. Minification is disabled

vite.config.js

build: {
  minify: false,
  ...
}

Result:

$ du -h dist/assets/components-*.js
1.5M  dist/assets/components-8DxwRGCF.js
$ du -sh dist/assets
3.5M  dist/assets

A 1.5 MB unminified main chunk. Since the site is also CSR-only, nothing renders until that chunk is downloaded, parsed, and executed — so this directly gates LCP, and it makes each Googlebot render pass expensive (which matters for render-budget scheduling).

If minify: false is intentional so people can read the source, source maps are the better tool — they give readable sources on demand without shipping 1.5 MB to every visitor.

2. Two render-blocking third-party stylesheets

partials/head.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4/animate.min.css" />

Both are render-blocking and both require a fresh DNS + TLS handshake to cdn.jsdelivr.net before the page can paint. Additionally:

• font-awesome 4 is end-of-life (last release 2016) and pulls a full icon webfont for a handful of icons (fa-bars, fa-arrow-left). Inline SVGs would drop the font entirely.
• animate.css is loaded on every page for the sidebar's fadeInLeft/fadeOutLeft. Two keyframes worth of CSS could be copied into styles/styles.scss.

Self-hosting or eliminating both removes a third-party origin from the critical path.

3. No resource hints

No preconnect/dns-prefetch for any third-party origin: cdn.jsdelivr.net, Algolia (*.algolia.net / *.algolianet.com for DocSearch), analytics.limonte.dev, ghbtns.com, api.github.com, api.npmjs.org. The Header.tsx stats block fires three cross-origin fetch calls on mount with no hint at all.

At minimum:

<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="preconnect" href="https://XXXXXXX-dsn.algolia.net" crossorigin />

4. Sandpack on every recipe page

@codesandbox/sandpack-react is bundled into all 21 recipe pages and is the dominant cost there. Worth deferring until the editor scrolls into view (or until interaction), with a static <pre><code> block rendered first — which also gives those pages crawlable content (see the thin-content issue).

Suggested fix

In priority order:

1. Turn minification back on (minify: 'esbuild' or default) and ship source maps instead.
2. Drop font-awesome for inline SVG icons; inline the two animate.css keyframes.
3. Add preconnect hints for whatever third-party origins remain.
4. Lazy-mount Sandpack.

Measure before/after with PageSpeed Insights on / and one recipe page.

Impact

Medium-high — item 1 alone is a one-line change with a large effect on LCP.

[limonte]

Correction: item 1 of this issue is wrong. Do not enable minification.

I recommended turning minify back on as the top-priority fix. That would break the documentation, and I should have checked before filing it.

src/examples/functionStrings.ts builds every displayed code example from the live functions via String(fn):

Object.entries(functions).forEach(([id, fn]) => {
  functionStrings[id] = String(fn)
    // ...
    .replace(/\/\* @__PURE__ \*\/ /g, '')
    .replace(/(\d)e3/g, '$1000')

Those strings feed ~25 <CodeExample> blocks across Showcase, Examples, DeclarativeTemplates, ConfigurationParams, and InputTypes. The bundle is the documentation — so bundle formatting is user-facing output, not just transport.

Verified by building with minify: true. The sweetAlert example renders as:

sweetAlert(){window.Swal.fire({title:`Good job!`,text:`You clicked the button!`,icon:`success`})}

instead of today's formatted, multi-line version. Every example on the homepage would become a single mangled line with backticks for quotes.

The @__PURE__ stripper and the (\d)e3 → $1000 rule in that replace chain are existing evidence of the same problem: build transforms have already leaked into displayed code and had to be patched around manually. minify: false is load-bearing.

Source maps don't help either — they'd make devtools readable, but String(fn) reads the live function at runtime and knows nothing about maps.

Remaining items in this issue are unaffected and still valid: the render-blocking jsdelivr stylesheets (font-awesome 4 is EOL, animate.css is used for two keyframes), the missing preconnect hints, and lazy-mounting Sandpack. Those are where the CWV win actually is.

If shrinking the main chunk is still wanted, the real path is decoupling displayed code from shipped code — e.g. importing the example sources via ?raw (as recipe-gallery/ already does for its Sandpack files) instead of String(fn). Then minification becomes safe. That's a bigger change and deserves its own issue.

[limonte]

Closing. Two of the four items shipped, one was wrong, one was declined.

Shipped — no third-party stylesheet is on the critical path any more

Item	Where
animate.css bundled from npm instead of jsdelivr (5 KB gzipped)	#270
Font Awesome 4 (EOL) replaced with 3 inline SVG icons; emoji in the two example snippets	#271
preconnect / dns-prefetch resource hints	#267

The jsdelivr origin is now gone entirely, so the preconnect #267 added was removed again in #271 — nothing loads from it. dns-prefetch remains for Algolia, analytics, api.github.com, api.npmjs.org and ghbtns.com, which are deferred, after-mount, or on-demand.

Withdrawn — item 1 (minify: false) was wrong

Enabling minification would minify the documentation. src/examples/functionStrings.ts builds every displayed snippet with String(fn), feeding 33 snippet references across Showcase, Examples, DeclarativeTemplates, ConfigurationParams and InputTypes. The shipped bundle's formatting is the docs text. Full detail and the test output are in this comment.

Making minification safe means decoupling displayed code from shipped code — loading example sources via ?raw, as recipe-gallery/ already does — not a config flag.

Declined — lazy-mounting Sandpack

Measured while prototyping: rendering the source statically and loading the editor on click takes a recipe page's initial JS from 638 KB → 328 KB gzipped. Not pursued, because it changes what a recipe page is by default (no live editor until asked). Reverted unmerged.

---

Noted but not filed: every recipe page downloads the whole 320 KB gzipped components-*.js chunk — the entire site's components, including ConfigurationParams (~1,000 lines), Methods, Themes and Sponsors — because recipe pages import Nav from the src/components barrel and the bundler emits one shared chunk. A recipe page pays for the homepage's full component tree to render a nav bar and an <h1>. That is a larger recipe-page cost than Sandpack was, it is bundler configuration rather than a UX change, and it is not covered by anything in this issue.