A starter repository for building a blog with the Eleventy static site generator implementing a wide range of performance best practices.

Based on the awesome eleventy-base-blog.

• Netlify Demo

Click the "Use this template" button. Alternatively you can clone this repo yourself and push your copy to your favorite git repository.

git clone https://github.com/YOUR_REPO

cd my-blog-name

npm install

npm run watch

npm run build

• 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;
}

• Perfect score in applicable lighthouse audits (including accessibility).
• Single HTTP request to First Contentful Paint.
• Very optimized Largest Contentful Paint (score depends on image usage, but images are optimized).
• 0 Cumulative Layout Shift.
• ~0 First Input Delay.

• Transcodes images to AVIF (the latest widely supported next-gen image codec) and webp and generates picture element.
• 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+).
• Downloads remote images and stores/serves them locally.
• Immutable URLs.

• 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.

• 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.

• Serves fonts from same origin.
• Makes fonts display:swap.

• 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.

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

• 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.

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

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.

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

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