Static Site Performance

Performance isn’t just about load times—it’s about how a site feels. Static sites feel instant because they are.

Why Astro?

I evaluated several options for this portfolio:

• Next.js: Great, but overkill for a mostly static site
• Gatsby: Powerful, but build times can be slow
• Hugo: Fast, but I wanted component-based architecture
• Astro: Islands architecture, zero JS by default, fast builds

Astro’s “zero JS by default” philosophy aligned perfectly with my goals. The only JavaScript on the landing page is the background animation—everything else is static HTML.

The Islands Architecture

Astro’s islands architecture means you can hydrate only the components that need interactivity:

<!-- This is static HTML -->
<StaticHeader />

<!-- This gets hydrated with JavaScript -->
<InteractiveSearch client:load />

For this portfolio, that means:

• Landing page: Background canvas only
• Posts list: Search and filter components
• Individual posts: Mostly static, minimal JS

Content Collections

Astro’s content collections provide type-safe Markdown processing:

const postsCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDatetime: z.coerce.date(),
    description: z.string(),
    heroImage: z.string().optional(),
    tags: z.array(z.string()).default([]),
  }),
});

This gives me autocomplete in my editor and runtime validation—no more broken frontmatter.

Build Output

The result:

• Landing page: < 10KB HTML + background script
• Posts list: Static HTML with lazy-loaded search
• Individual posts: Pre-rendered Markdown

No hydration overhead for content that doesn’t need it. Just fast, static HTML.