If you're not familiar with the eleventy-high-performance-blog let me share the README.md file. It has a lot of complex words, and I don't know what most mean.
I do know that a lot of people I follow are impressed by the template, and that's good enough for me.
So here is everything this template has.
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.
Getting Started #
1. Generate a new repository from this repository template #
Click the "Use this template" button. Alternatively you can clone this repo yourself and push your copy to your favorite git repository.
2. Clone your new repository #
git clone https://github.com/YOUR_REPO
3. Navigate to the directory #
4. Install dependencies #
5. Build, serve, watch and test #
npm run watch
6. Build and test #
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/'.
- Otherwise: Knock yourself out. This is a template repository.
- For a simple color override, adjust these CSS variables at the top of
Performance outcomes #
- 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.
Performance optimizations #
- Generates multiple sizes of each image and uses them in
- Generates a blurry placeholder for each image (without adding an HTML element or using JS).
- Transcodes images to AVIF and webp and generates
- Lazy loads images (using native
- Async decodes images (using
- Lazy layout of images and placeholders using
- 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 Netlify
- 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
- 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.
- To turn this on, specify
DX features #
- Uses 🚨 as favicon during local development.
- Supports a range of default tests.
- Runs build and tests on
- Sourcemap generated for JS.
SEO & Social #
- Share button preferring
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.
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.
- To extend the CSP with new rules, see CSP.js
Build performance #
- Downloaded remote images, and generated sizes are cached in the local filesystem…
- …and SHOULD be committed to git.
.persistimages.shhelps with this.
This is not an officially supported Google product, but rather Malte's private best-effort open-source project.