A high-performance blog template for 11ty

I'm excited to announce the beta-release of eleventy-high-performance-blog–a high-performance blog template for 11ty based on this very website. The template itself is based on the awesome eleventy-base-blog adding features centered around performance, accessibility and some SEO.

100 points in all relevant lighthouse categories

Sites based on this template achieve 100 points on Lighthouse in the categories Performance, Accessibility, Best Practices, and SEO by default. Field-test performance in Largest Contentful Paint, Cumulative Layout Shift, is First Input Delay is very well into the green area of Core Web Vitals given standard server performance.

This website which is using the same template recently ranked #2 on the Eleventy Speed Leaderboard.

Get started!

Features #

Performance optimizations #

Images #

  • Transcodes images to AVIF (the latest widely supported next-gen image codec) and webp and generates picture element.
  • Transcodes GIFs to muted looping autoplaying MP4 videos for greatly reduced file size.
  • Generates multiple sizes of each image and uses them in srcset.
  • Generates a blurry placeholder for each image (without adding an HTML element or using JS).
  • Lazy loads images (using native loading=lazy).
  • Async decodes images (using decoding=async).
  • Lazy layout of images and placeholders using content-visibility: auto.
  • Avoids CLS impact of images by inferring and providing width and height (Supported in Chrome, Firefox and Safari 14+).
  • Downloads remote images and stores/serves them locally.
  • Immutable URLs.

CSS #

  • Defaults to the compact "classless" Bahunya CSS framework.
  • Inlines CSS.
  • Dead-code-eliminates / tree-shakes / purges (pick your favorite word) unused CSS on a per-page basis with PurgeCSS.
  • Minified CSS with csso.

Miscellaneous #

  • Immutable URLs for JS.
  • Sets immutable caching headers for images, fonts, and JS (CSS is inlined). Currently implements for Netflify _headers file.
  • Minifies HTML and optimizes it for compression. Uses html-minifier with aggressive options.
  • Uses rollup to bundle JS and minifies it with terser.
  • Prefetches same-origin navigations when a navigation is likely.
  • If an AMP files is present, optimizes it.

Fonts #

  • Serves fonts from same origin.
  • Preloads fonts.
  • Makes fonts display:optional.

Analytics #

  • Supports locally serving Google Analytics's JS and proxying it's hit requests to a Netlify proxy (other proxies could be easily added).
  • Support for noscript hit requests.
  • Avoids blocking onload on analytics requests.

DX features #

  • Uses 🚨 as favicon during local development.
  • Supports a range of default tests.
  • Runs build and tests on git push.
  • Sourcemap generated for JS.

SEO & Social #

  • Share button prefering navigator.share() and falling back to Twitter. Using OS-like share-icon.
  • Support for OGP metadata.
  • Support for Twitter metadata.
  • Support for schema.org JSON-LD.
  • Sitemap.xml generation.

Largely useless glitter #

  • Read time estimate.
  • Animated scroll progress bar…
  • …with an optimized implementation that should never cause a layout.

Security #

Generates a strong CSP for the base template.

  • Default-src is self.
  • Disallows plugins.
  • Generates hash based CSP for the JS used on the site.

Getting started #

Hop on over to GitHub.

Published