Sub-14kB Portfolio

Perfect Lighthouse Scores + Instant Load Times

Perfect Lighthouse scores: 100 in Performance, Accessibility, Best Practices and SEO

The Challenge

Build a complete, professional portfolio that loads in under 14kB compressed, achieving sub-second load times even on 3G networks, while maintaining perfect 100 scores across all Lighthouse metrics.

Why 14kB?

The 14kB limit isn't arbitrary. It's the TCP slow start size: 10 packets × 1,460 bytes = 14,600 bytes. This means the entire page is delivered in the first TCP round-trip, eliminating the 300-1000ms latency that typically affects mobile users.

100
Performance

First Contentful Paint < 1s

100
Accessibility

WCAG 2.1 Level AA compliant

100
Best Practices

HTTPS, no console errors

100
SEO

Meta tags, Schema.org markup

How We Achieved It

1. Performance (100/100)

  • Zero JavaScript on initial load: Astro generates pure static HTML
  • Inlined critical CSS: All necessary CSS is in the HTML, eliminating extra requests
  • System fonts: Using -apple-system and Segoe UI saves 10-50kB
  • Lazy-loaded images: Images load after the initial HTML
  • Total size: 8.3kB compressed (Spanish) / 8.1kB (English)

2. Accessibility (100/100)

  • Semantic HTML: Proper use of <header>, <nav>, <main>, <article>
  • Color contrast: Minimum 4.5:1 ratio for text, 3:1 for UI elements
  • ARIA labels: Descriptive attributes for keyboard navigation
  • Accessible dark mode: Optimized contrast in both themes
  • Visible focus: Clear indicators for keyboard navigation

3. Best Practices (100/100)

  • HTTPS enforced: All connections are secure
  • No console errors: Clean code free of warnings
  • Image aspect ratios: Prevent layout shifts with explicit width/height
  • Security headers: CSP, X-Frame-Options, X-Content-Type-Options
  • No vulnerable dependencies: Minimal, up-to-date tech stack

4. SEO (100/100)

  • Optimized meta tags: Title, description, Open Graph, Twitter Cards
  • Schema.org markup: JSON-LD for structured data
  • Sitemap.xml: Automatically generated for indexing
  • Robots.txt: Clear configuration for crawlers
  • Semantic URLs: Clear, descriptive structure
  • Bilingual content: Spanish and English with hreflang tags

Budget Breakdown

HTML structure ~1,200 bytes
Complete CSS (compressed) ~2,800 bytes
Text content ~3,350 bytes
SEO + Schema.org + Open Graph ~915 bytes
JavaScript (dark mode) ~50 bytes
Total English (compressed) 8,315 bytes
Remaining budget 6,285 bytes

Total budget: 14,600 bytes. Used: 57%. With 4-5x gzip/brotli compression, the remaining budget allows adding ~25-30kB of uncompressed content.

Technologies Used

Astro

Framework that generates static HTML with zero JavaScript by default

Native CSS

Custom properties, Grid, Flexbox - no heavy frameworks

Cloudflare Pages

Global CDN with automatic Brotli compression

GitHub Actions

CI/CD with automatic size verification

Results

  • Load time: < 1 second on 3G
  • First Contentful Paint: < 0.5s
  • Time to Interactive: < 1s (same as FCP, minimal JS)
  • Transfer size: 8.3kB (Spanish) / 8.1kB (English)
  • Cumulative Layout Shift: 0 (no shifts, lazy-loaded images)
  • Total Blocking Time: 0ms (50 bytes JavaScript)