Performance budgets
Every route of this site is static HTML held to the budgets below. The end-to-end suite measures the built site in a browser: no request may leave this origin, islands hydrate only where there is something to operate, and each number stays under its limit.
| Route | HTML (KB raw) | HTML (KB gzip) | Page weight (KB gzip) | JavaScript (KB gzip) | CLS | LCP (lab) (ms) | Why |
|---|---|---|---|---|---|---|---|
Every other route | 224 | 24 | 96 | 64 | 0.1 | 2500 | The default budget. |
Home / | 224 | 24 | 152 | 116 | 0.1 | 3000 | The landing hydrates the hero live widgets (slider, tabs, date picker, lazy chart) on load: 144.5 KB page, 109.2 KB JS. |
/component-pages/button/ | 224 | 24 | 112 | 72 | 0.15 | 2500 | The first live Button demo mounts on open: its frame with real controls, then only the Button stage family (the props panel and other demos mount on scroll): 104.8 KB page, 67.6 KB JS. CLS room for the eager island mount. |
/component-pages/charts-pie/ | 224 | 24 | 120 | 80 | 0.15 | 2500 | The first live demo is a chart: the chart stage family and the part-whole chart chunk load on open: 113.9 KB page, 77.5 KB JS (104.4 KB JS before per-family stages). |
/charts-page/ | 224 | 28 | 96 | 64 | 0.1 | 2500 | Every chart family renders its SVG demo (37.7 KB) and accessible data table (28.4 KB) statically: 174.5 KB raw, 25.1 KB gzip of HTML. |
/gallery-themes/ | 224 | 24 | 132 | 64 | 0.1 | 2500 | The first 24 cards are in the HTML (18.8 KB gzip); the full 210-card list is fetched as /theme-gallery.json (17.9 KB) and each shown card loads its theme CSS: 129.8 KB page. |
/theme-switcher/ | 224 | 24 | 100 | 64 | 0.1 | 2500 | The first themes are in the HTML (15.5 KB gzip); the full catalog is fetched as /theme-catalog.json (9.1 KB): 97.4 KB page. |
/color-explorer/ | 304 | 34 | 112 | 64 | 0.1 | 2500 | The theme list and one theme payload are inline (291.5 KB raw, 30.8 KB gzip); other payloads load as /theme-data/<id>.json on selection: 108 KB page. The docs sidebar (every component and primitive linked) added 5.9 KB raw / 1.3 KB gzip: measured 297.4 / 32.1. |
/gallery-components/ | 880 | 48 | 184 | 88 | 0.1 | 2500 | The living gallery: 125 server-rendered cards, each with its preview frame, light/dark and RTL controls, props toggle and tag filters (845.8 KB raw, 46.4 KB gzip of HTML). Previews load in isolated iframes only as cards scroll near and the props panel on first open: 176.2 KB page, 84.6 KB JS. |
/examples/ | 736 | 64 | 200 | 104 | 0.1 | 2500 | Every registered example as a card with its source (725.2 KB raw, 60.1 KB gzip of HTML); live demos mount as cards scroll into view: 196.3 KB page, 100 KB JS. |
/search/ | 224 | 24 | 96 | 68 | 0.1 | 2500 | The results island ships the static search index: 64.7 KB JS. |
/primitives-page/accordion/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/alert-dialog/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/avatar/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/calendar/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/checkbox/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/collapsible/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/color-picker/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/combobox/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/command/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/context-menu/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/date-field/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/date-picker/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/dialog/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/file-drop/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/hover-card/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/label/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/listbox/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/menu/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/menubar/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/navigation-menu/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/number-field/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/pagination/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/pin-input/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/popover/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/portal/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/progress/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/radio-group/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/scroll-area/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/select/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/separator/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/sheet/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/slider/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/splitter/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/switch/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/tabs/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/tags-input/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/toast/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/toggle/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/toolbar/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/tooltip/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/primitives-page/tree/ | 224 | 24 | 160 | 108 | 0.1 | 2500 | The live demo (frame, props panel, the real primitive and its Texuli styles) loads when it scrolls into view, which is at open on a desktop viewport. |
/examples/<id>/ | 224 | 32 | 184 | 116 | 0.1 | 2500 | Each example page mounts its live demo on open, which is its purpose, with the CSS of demos that share its chunks. Heaviest of 132: 184.2 KB raw and 29.2 KB gzip of HTML; 180.3 KB page, 111.9 KB JS. |
How the heavy routes stay light
- The theme gallery, theme switcher and color explorer load each theme as its own same-origin file,
/theme-css/<id>.cssand/theme-data/<id>.json, only when it is on screen or chosen. They used to inline all 210 themes: 2.5 MB, 1.7 MB and 12.7 MB of HTML. - The gallery renders 24 cards at a time, with a button to show more.
- The app navigation's mobile drawer loads on first open, so wide screens never pay for it.
How it is measured
- Sizes: the built files, gzipped at level 9, for every HTML route.
- Page weight: every same-origin file a page loads until the network is idle.
- Islands: each hydrated island must contain something to operate. The only exceptions show output for another control:
SearchResults(Renders the results of the search field; empty until a query is typed.) - CLS: layout-shift entries during load (Chromium engines).
- LCP: the largest-contentful-paint entry, checked only when
TEXULI_PERF=1, because wall-clock numbers vary with machine load.