teardown: chanhdai.com, a portfolio carrying 1.2 mb of html
design · 2026-11-01 · 4 min
this is a study, not a client project. i did not build chanhdai.com. i measured it on 1 november 2026, and the author is credited at the end. teardowns are how i look at excellent work without pretending it is mine.
the site is a developer portfolio by chánh đại, a design engineer. it is also, by the numbers, a heavy document with unusually careful details.
what the measurement says
fetched over https, decoded sizes (brotli on the wire, so transfer is smaller; the browser still parses the decoded document):
- html: 1,232 kb
- external javascript: 650 kb across 39 script tags
- inline javascript: about 680 kb
- css: 376 kb across 4 stylesheets
- images: 21, all with alt text, none empty and none missing
- headings: one h1, sixteen h2
- metadata: canonical present, viewport present, lang en, four json-ld blocks
- first response: 281 ms from this machine, served by vercel
that combination is unusual. most heavy sites fail the basics. this one gets the basics right and puts the weight somewhere else.
what works
one h1, with a language attribute. the name is marked lang="vi", because it is vietnamese. that is the kind of detail almost nobody adds, and it costs one attribute.
every image has alt text. 21 out of 21. no decorative image pretending to be content.
four structured data blocks. a person, a website, breadcrumbs, and the page. the markup is valid and describes the entity, not just the page.
the navigation is a real interface. command palette, keyboard shortcuts, components and blocks as first-class sections. it behaves like a product, not a list of links.
what costs
1.2 mb of html is not a page, it is an application shipped as a document. the inline javascript alone is larger than most complete sites. on a fast connection it is fine. on a mid-range phone it is parse time before anything interactive happens.
the css is 376 kb across four files. a design system can justify a lot, but this is more than most teams ship for an entire product.
none of this means the site is badly built. it means the trade-off was made deliberately: richness and motion in exchange for weight. the honest question is whether a visitor on a 4g phone gets the same impression as the reviewer on a laptop.
what i would change
split the document. move the inline data and scripts into cacheable chunks, so a repeat visit does not re-download the same megabytes.
budget the css. 376 kb is a design system plus a site. extract what the homepage actually uses, and let the rest load with the pages that need it.
test on a mid-range android, not only on a fast desktop. the craft is visible in the details; the cost is visible on a slower device.
what i would keep
the discipline around alt text, headings and structured data. that is the part most portfolios skip, and it is the part that makes the site readable to a machine and to a screen reader. copying the visual style would be easy and pointless. copying that discipline is the useful move.
site: chanhdai.com, author: chánh đại, repository: ncdai/chanhdai.com (mit). measurements taken by fetching the public page, not from a third-party score.
if you want this kind of measurement on your own site, book a 30-minute call or read what makes a website feel fast.