Performance

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

2 min readThis page as Markdown Source on GitHub

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

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.

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.