Awesome Open Source
Awesome Open Source

eleventy-high-performance-blog

A starter repository showing how to build a blog with the Eleventy static site generator implementing a wide range of performance best practices.

Screenshot showing that the site achieves 100 points on Lighthouse by default

Based on the awesome eleventy-base-blog.

Demo

Getting Started

1. Generate a new repository from this repository template

Click the Use this template button.

2. Clone your new repository

git clone https://github.com/YOUR_REPO

3. Navigate to the directory

cd my-blog-name

4. Install dependencies

npm install

5. Build, serve, watch and test

npm run watch

6. Build and test

npm run build

Customize

  • Search for "Update me" across files in your editor to find all the site specific things you should update.
  • Update the favicons in 'img/favicon/'.
  • If you don't want the (same-origin) Google Analytics integration, rip it out 😛.
  • Otherwise: Knock yourself out. This is a template repository.
  • For a simple color override, adjust these CSS variables at the top of css/main.css.
:root {
  --primary: #E7BF60;
  --primary-dark: #f9c412;
}

Features

Performance outcomes

Performance optimizations

Images

  • Immutable URLs.
  • Downloads remote images and stores/serves them locally.
  • 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).
  • Avoids CLS impact of images by inferring and providing width and height (Supported in Chrome, Firefox and Safari 14+).

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:swap.

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.

Build performance

  • Downloaded remote images, and generated sizes are cached in the local filesystem…
  • …and SHOULD be committed to git.
  • .persistimages.sh helps with this.

Opportunities (not-yet-implemented)

  • Transcode images to webp.
  • Transcode images to avif.

Disclaimer

This is not an officially supported Google product, but rather Malte's private best-effort open-source project.

Alternatives To Eleventy High Performance Blog
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,092,374
Css (149,306
Blog (28,576
Performance (9,684
Immutable (2,801
Eleventy (453
11ty (256
11ty Template (31