Static Site Generators: 11ty vs. Hugo for Speed

Static site generators (SSGs) produce the fastest possible websites — pre-built HTML served directly from a CDN with zero server processing. 11ty (Eleventy) and Hugo are the two speed champions. Here's how they compare.

Build Speed Comparison

Pages	11ty	Hugo
100	1-2s	<1s
1,000	5-15s	1-3s
10,000	30-90s	5-15s
50,000	3-8 min	15-45s

Hugo wins on build speed thanks to being written in Go (compiled, concurrent). 11ty runs on Node.js (interpreted, single-threaded).

Output Performance

Both produce excellent Lighthouse scores because the output is pure HTML + CSS:

Metric	11ty (default)	Hugo (default)
Lighthouse	98-100	98-100
JS shipped	0KB	0KB
Page weight	5-30KB	5-30KB
TTFB (CDN)	10-30ms	10-30ms
LCP	<1s	<1s

Tie. Both produce essentially the same output quality.

Developer Experience

11ty

// .eleventy.js (config)
module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/assets");
  eleventyConfig.addFilter("dateFormat", (date) => {
    return new Date(date).toLocaleDateString('en-US');
  });
  
  return {
    dir: { input: "src", output: "_site" },
  };
};

Strengths:

• Any template language (Nunjucks, Liquid, Markdown, JS)
• Familiar Node.js ecosystem (npm packages)
• Simple data cascade
• JavaScript-based (easy to extend)
• Great plugin ecosystem

Hugo

# hugo.toml (config)
baseURL = "https://example.com"
languageCode = "en-us"
title = "My Site"
theme = "papermod"

[params]
  description = "A fast blog"

Strengths:

• Single binary (no dependencies to install)
• Built-in image processing
• Built-in SCSS/SASS compilation
• Multilingual support out of the box
• Incredibly fast builds

Templating Comparison

11ty (Nunjucks)

---
layout: base.njk
title: Blog Post
---

<article>
  <h1>{{ title }}</h1>
  <time>{{ page.date | dateFormat }}</time>
  {{ content | safe }}
</article>

{% for post in collections.posts | limit(5) %}
  <a href="{{ post.url }}">{{ post.data.title }}</a>
{% endfor %}

Hugo (Go Templates)

{{ define "main" }}
<article>
  <h1>{{ .Title }}</h1>
  <time>{{ .Date.Format "January 2, 2006" }}</time>
  {{ .Content }}
</article>

{{ range first 5 (where .Site.RegularPages "Section" "posts") }}
  <a href="{{ .RelPermalink }}">{{ .Title }}</a>
{{ end }}
{{ end }}

Hugo's Go templates have a steeper learning curve but are more powerful for complex logic.

When to Choose Each

Choose 11ty When:

• You're already in the Node.js ecosystem
• You want maximum template flexibility
• You need npm package access (e.g., markdown plugins)
• Your site is under 10,000 pages
• You value simplicity and convention over configuration

Choose Hugo When:

• Build speed is critical (10,000+ pages)
• You want zero dependencies (single binary)
• You need built-in image processing
• You want multilingual support
• You're comfortable with Go templates

Both vs. Framework-Based SSGs

Feature	11ty/Hugo	Next.js/Astro
Build output JS	0KB	30-80KB
Client hydration	None	Yes (partial/full)
Interactive components	Manual JS	React/Svelte/Vue
Build complexity	Minimal	Moderate
Lighthouse score	98-100	85-98
Best for	Content sites	Web apps + content

Monitor Your Static Site

Even static sites can have performance issues from images, fonts, or third-party scripts. Monitor your Core Web Vitals continuously.

Monitor your static site →