# Performance

> How every cost on this site is measured, and how to run the same check on your own build.

## The number on each component page

A fixture project imports every component on its own page and builds with
`astro build`. A test then reads the HTML and sums every byte of JavaScript the
browser would load: external scripts, `modulepreload` chunks, the import graph
of each chunk, and inline `<script type="module">`
bodies (the part most tools miss), because Astro inlines anything under Vite's `assetsInlineLimit` (4 kB raw).

Two figures are reported:

- **Own:** the component's own script. Tier ceilings apply to this.
- **With dependencies:** own plus the shared runtime (once per site) and any
  component it composes.

Every byte figure on this site says which size it is. **Raw** is the file as
built: minified, before compression. It is what the tier ceilings and the MCP's
`max_js_bytes` count, and what your browser's network panel and this site's live
counters show as the resource size. **Gzip** is the same file compressed on its
own with gzip at the default level: compare it with another library's gzip
size. A component page prints both.

The same test enforces a ceiling per component and fails the build when one is
exceeded. The report it writes is what the docs print, so the number cannot
drift from the claim.

## The cost of this site

The home page carries a budget too, router included. The footer shows the live
figure read from the Performance API. In the network panel, Astro's
`ClientRouter` script is the largest part (about 16 kB raw). The rest is the
shared runtime and the primitives the page uses, the two GPU effects behind
the hero with their libraries, and this site's own scripts: search, the
motion switch, the counters, the copy buttons and the hero's controls.

## Two build pitfalls

:::warning Minifiers fold animation-timeline away
lightningcss folds `animation-timeline: view()` into the `animation`
shorthand, which browsers reject; the animation silently disappears in
production builds. Keep the timeline in a separate rule with different
selector text. Reveal does; if you write your own scroll-driven CSS, check the
built output.
:::

:::warning Set will-change only while animating
Components set it when an animation starts and clear it when it ends. Never
leave it on a hundred cards.
:::

## Run it on your own project

The MCP server's `measure_budget` tool (Pro) runs the same measurement against
your build and reports per-route figures against a ceiling you set. The free
tools tell you a component's cost before you add it.