Playground
Prova lo scheduler
Un'isola su questa pagina. Muovi i cursori — il piano di idratazione scorre in tempo reale tra static, lazy ed eager.
Statico è il default. Ogni hydrate deve avere una ragione.
Soglie: eager ≥ 0.3 · lazy ≥ 0.05 · sotto = niente JS.
Spedisci la via veloce di default
Genera un progetto, dichiara qualche peso e lascia che sia la build a decidere cosa va prima sul wire.
Capacità
Cosa fa
Scheduler
Priorità di render = valore business ÷ costo CPU. I nodi ad alta conversione salgono nel sorgente HTML.
Isole
Idrata eager, lazy o mai. Un widget chat da 300 KB con conversion 0.05 resta statico.
SEO
Canonical, Open Graph, JSON-LD, sitemap, hreflang — generati alla build.
Immagini
AVIF/WebP/JPEG via sharp. Profili, validazione srcset, sorgenti remote.
SSG + adapter
Statico di default. Adapter Node, Vercel, Cloudflare per SSR/ISR quando serve.
Cosa arriva prima sul wire è una scelta di business.
biagiojs ordina HTML, idratazione e preload dai pesi che dichiari — conversion, SEO, interaction, costo. Le pagine senza isole spediscono zero JavaScript.
npx create-biagiojs mio-sitonpmMisurato
Questa pagina, auditata
Google Lighthouse su questo sito — mobile su 4G limitata, desktop emulato. Un'isola; tutto il resto HTML statico.
Lighthouse 13 · luglio 2026 · biagio.danilosprovieri.com
Sintassi
Dichiari pesi, non lifecycle
<page title="Home" description="…" />
<component id="hero" seo="1" conversion="0.9">
<template><h1>Benvenuto</h1></template>
</component>
// conversion 1 → hydrates first · zero JS elsewhere
<component id="cta" conversion="1" interaction="0.85">
<template><button id="buy">Compra</button></template>
<script hydrate>
el.querySelector('#buy').onclick = () => buy();
</script>
</component>Principi
Tre idee, un framework
Statico è il default
Una pagina spedisce zero JavaScript finché qualcosa non si guadagna l'idratazione. La via veloce è quella da cui non devi uscire.
Decidono i pesi business
Conversion, SEO e interaction sono input della build, non ripensamenti. Lo scheduler li trasforma in ordine sorgente e piano di idratazione.
Il campo chiude il cerchio
Report reali di CrUX, analytics e heatmap ricalibrano i pesi a ogni build — il sito si tara su come lo usano davvero le persone.