Overview

The Eleventy High Performance Blog is a starter repository for building a blog using the Eleventy static site generator. It incorporates a wide range of performance best practices to ensure fast and efficient loading times. The theme is based on the eleventy-base-blog, which serves as a foundation for this template. The goal of the theme is to achieve a perfect score in applicable lighthouse audits, including accessibility, and to minimize requests and optimize image loading.

Features

Performance outcomes: The theme aims to achieve a perfect score in applicable lighthouse audits, with a focus on accessibility. It also strives for a single HTTP request to the First Contentful Paint, optimized Largest Contentful Paint, and zero Cumulative Layout Shift and First Input Delay.
Image optimizations: The theme generates multiple sizes of each image and uses them in srcset. It also creates blurry placeholders for images without using HTML elements or JavaScript. Images are transcoded to AVIF and webp formats and lazy loaded using the native loading=lazy attribute. The theme also utilizes async decoding and lazy layout for images and placeholders.
Immutable URLs: The theme uses immutable URLs for CSS, JS, images, and fonts. It sets immutable caching headers for these resources and automatically configures it when deploying on Vercel. The theme also makes use of tree-shaking and dead-code elimination to eliminate unused CSS on a per-page basis.
Fonts: The theme serves fonts from the same origin and makes them display:optional to prevent blocking the page onload.
Analytics: The theme supports locally serving Google Analytics's JS and proxying its hit requests to a Vercel Edge Function. It also supports sending Core Web Vitals metrics to Google Analytics as events and provides support for noscript hit requests. Analytics requests are designed not to block the page onload.

Google

Blockly Samples

Docsy

Docsy Example

Eleventy High Performance Blog