Eleventy High Performance Blog

$5/yr

Single Licence: a single website (personal, client), or intranet site project - Details

Extended Licence: a website (commercial, personal, client), or internet site project - Details

Rated

Be the first to review this.

Save for later

Save this link to facebook.

Get Social

Hit like and share it with others.

CREATED

19-May-2021

LAST UPDATED

19-May-2021

Compatible Browsers

,

DOCUMENTATION

Well Documentation

LAYOUT

Fixes

FILES INCLUDED

zip,

Seller Store

github

github

202

Sales

0

Comments

202+

Downloads

0

Rated Points

eleventy-high-performance-blog
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.
Demo
Netlify Demo
Original site this template was based on
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
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/’.
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
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). Currently implements for Netlify _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.
Makes fonts display:optional.
Analytics
Supports locally serving Google Analytics’s JS and proxying it’s hit requests to a Netlify proxy (other proxies could be easily added).
Supports sending Core Web Vitals metrics to Google Analytics as events.
Support for noscript hit requests.
Avoids blocking onload on analytics requests.
To turn this on, specify googleAnalyticsId in metadata.json. (Note, that this is not compatible with the not-yet-commonly used version 4 of Google Analytics.)
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 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.
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.
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.sh helps with this.
Disclaimer
This is not an officially supported Google product, but rather Malte’s private best-effort open-source project.

Comments and Discussions



Reviews



Copyrights © 2021-2022 All Rights Reserved