Allergic to Gardening blog

Based on eleventy-high-performance-blog and modified and tweaked to suit. Why? Because it's one of the few that hammer the accessibility side of things, and that's massively important to me.

Notes for myself on building

1. Clone the repository

git clone https://github.com/blades/Allergic2Gardening/

2. Navigate to the directory

cd Allergic2Gardening

3. Install dependencies

npm install

4. Build

npm run build

Customize to do

• Update the favicons in 'img/favicon/'.
• For a simple color override, adjust these CSS variables at the top of css/main.css.

:root {
  --primary: #7cc442;
  --primary-dark: #4c7927;
}

• Update css font sizes because they're so damned big
• Add search page link
• Tidy up end of blog entry content

Added functionality

• Search facility based on elasticlunr
• eleventy-plugin-embed-twitter
• eleventy-plugin-embed-instagram

Features

The following is basically what's on the source that it was all based on.

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

Images

• 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).
• Transcodes images to AVIF and webp and generates picture element.
• Transcodes GIFs to muted looping autoplaying MP4 videos for greatly reduced file size.
• Lazy loads images (using native loading=lazy).
• Async decodes images (using decoding=async).
• Lazy layout of images and placeholders using content-visibility: auto.
• 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.

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).
• 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.
• Makes fonts display:optional.

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.

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.