Eleventy High Performance Blog

About Eleventy High Performance Blog

Eleventy High Performance Blog is a starter template for the 11ty static site generator, built on top of eleventy-base-blog and adding features focused on performance, accessibility, and SEO. It handles image optimization (transcoding to AVIF and WebP, generating srcset sizes and blurry placeholders, converting GIFs to muted autoplaying MP4s), CSS processing (inlining, purging unused CSS with PurgeCSS, minifying with csso), and HTML/JS minification and bundling via rollup and terser. It also sets immutable caching headers, serves fonts from the same origin, and generates a content security policy with hash-based CSP for site JS.

The template includes SEO and social features such as OGP and Twitter metadata, schema.org JSON-LD, sitemap.xml generation, and a share button using the native Web Share API with a Twitter fallback. It supports locally serving and proxying Google Analytics requests, includes a set of default tests that run on git push, and generates sourcemaps for JS.

It is intended for developers building blogs or content sites with 11ty who want performance and accessibility best practices (targeting 100 Lighthouse scores across Performance, Accessibility, Best Practices, and SEO) built in from the start rather than implemented manually. The project is hosted on GitHub under the Google organization.

Key features

• Transcodes images to AVIF/WebP and generates responsive picture elements with srcset
• Inlines and purges unused CSS with PurgeCSS, minified via csso
• Generates a strong Content Security Policy with hash-based CSP for JS
• Minifies HTML and bundles/minifies JS with rollup and terser
• Supports locally proxying Google Analytics requests via a Vercel Edge Function
• Generates OGP, Twitter, and schema.org JSON-LD metadata plus sitemap.xml

Frequently asked questions