Eleventy High Performance Blog is an open-source starter repository for building a static blog with the Eleventy (11ty) static site generator, engineered to achieve perfect Lighthouse performance scores with minimal configuration.
What is Eleventy High Performance Blog?
The template takes Markdown content as input and outputs a fully static blog with built-in performance optimizations for images, CSS, JavaScript, and fonts. It runs on Eleventy, a JavaScript-based static site generator, and is based on the official eleventy-base-blog starter. The project is a personal best-effort open-source project by Malte Ubl (cramforce) and is not an officially supported Google product.
Key Features
- Image pipeline — Generates multiple sizes per image with
srcset, transcodes images to AVIF and WebP in apictureelement, creates blurry placeholders without extra HTML elements or JavaScript, converts GIFs to muted looping autoplaying MP4 videos, and lazy loads images with nativeloading=lazy. - CSS handling — Defaults to the classless Bahunya CSS framework, inlines all CSS, tree-shakes unused styles per page with PurgeCSS, and minifies with csso.
- JavaScript bundling — Bundles JavaScript with rollup, minifies with terser, emits sourcemaps, and serves JS under immutable URLs.
- Google Analytics support — Serves Google Analytics JavaScript locally, proxies hit requests through a Vercel Edge Function, sends Core Web Vitals metrics as events, supports noscript requests, and avoids blocking onload; enable it by adding
googleAnalyticsIdtometadata.json. - SEO & social — Includes Open Graph metadata, Twitter Card metadata, schema.org JSON-LD, sitemap.xml generation, and a share button that prefers
navigator.share()with a Twitter fallback. - Security — Generates a strong Content-Security-Policy with
default-src self, disallows plugins, and uses hash-based CSP for inline scripts; can be extended via_data/csp.js. - Build performance — Caches downloaded remote images and generated image sizes on the local filesystem, should be committed to git, and provides
.persistimages.shas a helper.
Who is it for?
Developers who want a blog that scores 100 on Lighthouse without manually tuning performance can deploy this template directly. Bloggers who write Markdown content and want automatic AVIF/WebP conversion, lazy loading, and zero layout shift will benefit from the built-in image pipeline. Eleventy users who need a starter with SEO metadata, sitemap generation, and strong CSP headers out of the box can use it as a solid foundation.
What can you do with Eleventy High Performance Blog?
- Performance-focused bloggers: publish a static blog that achieves a perfect Lighthouse score by default, with images served in next-gen formats and a single HTTP request to first contentful paint.
- Developers setting up analytics: configure Google Analytics with locally proxied hit requests and Core Web Vitals event tracking by editing
metadata.json; the template avoids delayingonloadfor analytics. - Eleventy adopters: skip the boilerplate of eleventy-base-blog and get a pre-configured setup with local fonts,
display: optional, immutable caching headers on Vercel, and AMP optimization when an AMP file is present.
How does it work?
Click the "Use this template" button on the GitHub repository to create a new repo, clone it, run npm install, then use npm run watch for local development or npm run build for a production build. Customize by searching for "Update me" across all files, replacing the favicons in img/favicon/, and adjusting the CSS variables at the top of css/main.css for a simple color override.
Pros and cons
- Pros: Achieves 100/100 Lighthouse performance, accessibility, and best practices by default; generates optimized images with AVIF/WebP and
srcset; has zero cumulative layout shift; includes a strong Content-Security-Policy; automatically configures immutable caching headers when deployed on Vercel. - Cons: Google Analytics version 4 is not supported; the default classless Bahunya CSS may require additional custom styling for a distinct visual design; the project is maintained as a best-effort open-source project without official Google support.
FAQ
Is Eleventy High Performance Blog free?
Yes, it is an open-source starter published on GitHub as a repository template. You can create a new repository from it at no cost and use it for personal or commercial projects.
Which static site generator does it use?
It uses Eleventy (11ty), a Node.js-based static site generator. The starter is based on the eleventy-base-blog template and adds performance optimizations on top.
Does it require Vercel to work?
No. The template works with any static host, but when deployed on Vercel it automatically configures immutable caching headers for images, fonts, and JavaScript. Other hosts require manual cache-header configuration.
How do I enable Google Analytics?
Add googleAnalyticsId to the metadata.json file. The template then serves Google Analytics JavaScript locally and proxies hit requests via a Vercel Edge Function. Note that it is not compatible with Google Analytics 4.
Can I change the design?
Yes. The default styling uses the classless Bahunya CSS framework and can be altered by editing the CSS variables at the top of css/main.css. You can also replace the framework entirely.
