Eleventy High Performance Blog

screenshot of Eleventy High Performance Blog
eleventy

Eleventy High Performance Blog

A high performance blog template for the 11ty static site generator.

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.
eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.