yausell.com

The problem

The original site was a single 5.8 MB HTML file that unpacked itself in the browser. Visitors saw an “Unpacking” placeholder until every image, font and script had been decoded from base64, and nothing about it was readable by search engines or AI assistants.

Constraints

• Keep the design and its signature effects: the lanyard badge, the WebGL depth portrait and the particles.
• Static hosting on Vercel, one maintainer, and no client framework.
• Make the facts editable without touching components.

Decisions

• Pre-render everything. Astro builds every page to HTML with its CSS inlined, so the first response is the page.
• Size images for their slots. AVIF with WebP fallbacks at two widths per image; the 2.3 MB portrait became 23 to 84 KB.
• Ship one font subset and an icon sprite. Seven Inter files became one Latin variable subset, and six icon stylesheets became an inline sprite of the icons in use.
• Make effects progressive. The page is complete without JavaScript. Heavy work starts after load, only on capable desktops, and never under reduced motion.
• Render the fold first. Sections below the fold use content-visibility until idle time, and anchor jumps render everything first so they land exactly.
• Guard it in CI. Every pull request runs the build with a CSP hash check, size budgets and an internal link check, then Lighthouse on mobile and desktop and axe in both themes.

Outcome

The page went from 5.85 MB to about 117 KB on first visit, and every page scores 100 for performance, accessibility, best practices and SEO on mobile and desktop, with no layout shift. Anyone can re-run the measurement with the PageSpeed Insights link below.