teardown: chanhdai.com, un portfolio con 1,2 mb di html
design · 2026-11-01 · 4 min
questo è uno studio, non un progetto cliente. non ho costruito chanhdai.com. l'ho misurato il 1 novembre 2026 e l'autore è citato alla fine. i teardown sono il modo in cui guardo un lavoro eccellente senza fingere che sia mio.
il sito è il portfolio di chánh đại, design engineer. è anche, per i numeri, un documento pesante con dettagli insolitamente curati.
cosa dice la misurazione
scaricato in https, dimensioni decodificate (brotli sul filo, quindi il trasferimento è minore; il browser deve comunque elaborare il documento decodificato):
- html: 1.232 kb
- javascript esterno: 650 kb su 39 tag script
- javascript inline: circa 680 kb
- css: 376 kb su 4 fogli di stile
- immagini: 21, tutte con alt, nessuna vuota e nessuna mancante
- titoli: un h1, sedici h2
- metadati: canonical presente, viewport presente, lang en, quattro blocchi json-ld
- prima risposta: 281 ms da questa macchina, servito da vercel
la combinazione è insolita. la maggior parte dei siti pesanti sbaglia le basi. questo azzecca le basi e mette il peso altrove.
cosa funziona
un h1, con l'attributo di lingua. il nome è marcato lang="vi", perché è vietnamita. è il tipo di dettaglio che quasi nessuno aggiunge, e costa un attributo.
ogni immagine ha un alt. 21 su 21. nessuna immagine decorativa che finge di essere contenuto.
quattro blocchi di dati strutturati. persona, sito, breadcrumb e pagina. il markup è valido e descrive l'entità, non solo la pagina.
la navigazione è un'interfaccia vera. command palette, scorciatoie da tastiera, componenti e blocchi come sezioni di primo livello. si comporta come un prodotto, non come un elenco di link.
cosa costa
1,2 mb di html non è una pagina, è un'applicazione spedita come documento. il solo javascript inline è più grande della maggior parte dei siti completi. su una connessione veloce va bene. su un telefono di fascia media è tempo di parsing prima che qualsiasi cosa sia interattiva.
il css è 376 kb su quattro file. un design system può giustificarne molti, ma questo è più di quanto la maggior parte dei team spedisca per un intero prodotto.
niente di tutto ciò significa che il sito sia costruito male. significa che il compromesso è stato fatto di proposito: ricchezza e movimento in cambio di peso. la domanda onesta è se un visitatore su 4g riceve la stessa impressione del recensore su un portatile.
cosa cambierei
separare il documento. spostare dati e script inline in chunk cacheabili, così una visita successiva non riscarica gli stessi megabyte.
mettere un budget al css. 376 kb sono un design system più un sito. estrarre ciò che serve alla home e caricare il resto con le pagine che lo usano.
testare su un android di fascia media, non solo su desktop veloce. l'artigianato si vede nei dettagli; il costo si vede su un dispositivo più lento.
cosa terrei
la disciplina su alt, titoli e dati strutturati. è la parte che quasi tutti i portfolio saltano, ed è quella che rende il sito leggibile a una macchina e a uno screen reader. copiare lo stile visivo sarebbe facile e inutile. copiare quella disciplina è la mossa utile.
sito: chanhdai.com, autore: chánh đại, repository: ncdai/chanhdai.com (mit). misurazioni fatte scaricando la pagina pubblica, non da un punteggio di terze parti.
se vuoi questo tipo di misurazione sul tuo sito, prenota una call di 30 minuti o leggi cosa vuol dire un sito veloce.