{"id":18816059,"url":"https://github.com/0-vortex/eleventy-high-performance-blog-plus","last_synced_at":"2025-04-13T22:21:20.029Z","repository":{"id":38963855,"uuid":"316347701","full_name":"0-vortex/eleventy-high-performance-blog-plus","owner":"0-vortex","description":"Industrial Empathy high performance blog template for the 11ty static site generator with NetlifyCMS, GitHub Pages and Cloudflare SSL.","archived":false,"fork":false,"pushed_at":"2023-01-27T02:50:20.000Z","size":45568,"stargazers_count":6,"open_issues_count":20,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T12:39:14.557Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://0-vortex.github.io/eleventy-high-performance-blog-plus","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0-vortex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"ko_fi":"0vortex","liberapay":"ted.vortex","issuehunt":"0-vortex","custom":["https://PayPal.Me/TeodorDutulescu"]}},"created_at":"2020-11-26T22:20:52.000Z","updated_at":"2024-09-23T04:25:06.000Z","dependencies_parsed_at":"2023-02-15T04:31:55.676Z","dependency_job_id":null,"html_url":"https://github.com/0-vortex/eleventy-high-performance-blog-plus","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":"google/eleventy-high-performance-blog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0-vortex%2Feleventy-high-performance-blog-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0-vortex%2Feleventy-high-performance-blog-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0-vortex%2Feleventy-high-performance-blog-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0-vortex%2Feleventy-high-performance-blog-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0-vortex","download_url":"https://codeload.github.com/0-vortex/eleventy-high-performance-blog-plus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248789746,"owners_count":21161885,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T23:52:05.963Z","updated_at":"2025-04-13T22:21:19.962Z","avatar_url":"https://github.com/0-vortex.png","language":"JavaScript","funding_links":["https://ko-fi.com/0vortex","https://liberapay.com/ted.vortex","https://issuehunt.io/r/0-vortex","https://PayPal.Me/TeodorDutulescu"],"categories":[],"sub_categories":[],"readme":"# eleventy-high-performance-blog-plus\n\n[![CI](https://github.com/0-vortex/eleventy-high-performance-blog-plus/workflows/CI/badge.svg)](https://github.com/0-vortex/eleventy-high-performance-blog-plus/actions?query=workflow%3ACI)\n [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2F0-vortex%2Feleventy-high-performance-blog-plus.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2F0-vortex%2Feleventy-high-performance-blog-plus?ref=badge_shield)\n\n[![Commitizen Friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n [![License](https://img.shields.io/github/license/0-vortex/eleventy-high-performance-blog-plus)](./LICENSE)\n\nA starter repository for building a blog with the [Eleventy static site generator](https://www.11ty.dev/) implementing a wide range of performance best practices.\n\n![Screenshot showing that the site achieves 100 points on Lighthouse by default](https://cdn.glitch.com/db98564e-04da-47bf-a3d6-70803c3d0fe7%2FScreen%20Shot%202020-09-04%20at%2012.07.27.png?v=1599214260591)\n\nBased on the awesome [eleventy-base-blog](https://github.com/11ty/eleventy-base-blog).\n\n## Demo\n\n* [Netlify Demo](https://eleventy-high-performance-blog-sample.industrialempathy.com/)\n* [Original site this template was based on](https://www.industrialempathy.com/)\n\n## Getting Started\n\n### 1. Generate a new repository from this repository template\n\nClick the [\"Use this template\"](https://github.com/google/eleventy-high-performance-blog/generate) button. Alternatively you can clone this repo yourself and push your copy to your favorite git repository.\n\n### 2. Clone your new repository\n\n```\ngit clone https://github.com/YOUR_REPO\n```\n\n### 3. Navigate to the directory\n\n```\ncd my-blog-name\n```\n\n### 4. Install dependencies\n\n```\nnpm install\n```\n\n### 5. Build, serve, watch and test\n```\nnpm run watch\n```\n\n### 6. Build and test\n```\nnpm run build\n```\n\n## Customize\n\n- Search for \"Update me\" across files in your editor to find all the site specific things you should update.\n- Update the favicons in 'img/favicon/'.\n- Otherwise: Knock yourself out. This is a template repository.\n- For a simple color override, adjust these CSS variables at the top of `css/main.css`.\n\n```css\n:root {\n  --primary: #E7BF60;\n  --primary-dark: #f9c412;\n}\n```\n\n## Features\n\n### Performance outcomes\n\n- Perfect score in applicable lighthouse audits (including accessibility).\n- Single HTTP request to [First Contentful Paint](https://web.dev/first-contentful-paint/).\n- Very optimized [Largest Contentful Paint](https://web.dev/lcp/) (score depends on image usage, but images are optimized).\n- 0 [Cumulative Layout Shift](https://web.dev/cls/).\n- ~0 [First Input Delay](https://web.dev/fid/).\n\n### Performance optimizations\n\n#### Images\n\n- Generates multiple sizes of each image and uses them in **`srcset`**.\n- Generates a **blurry placeholder** for each image (without adding an HTML element or using JS).\n- Transcodes images to [AVIF](https://en.wikipedia.org/wiki/AV1#AV1_Image_File_Format_(AVIF)) (currently off-by-default due to instability of the encoder) and [webp](https://developers.google.com/speed/webp) and generates `picture` element.\n- **Lazy loads** images (using [native `loading=lazy`](https://web.dev/native-lazy-loading/)).\n- **Async decodes** images (using `decoding=async`).\n- **Lazy layout** of images and placeholders using [`content-visibility: auto`](https://web.dev/content-visibility/#skipping-rendering-work-with-content-visibility).\n- **Avoids CLS impact** of images by inferring and providing width and height (Supported in Chrome, Firefox and Safari 14+).\n- Downloads remote images and stores/serves them locally.\n- Immutable URLs.\n\n#### CSS\n\n- Defaults to the compact \"classless\" [Bahunya CSS framework](https://kimeiga.github.io/bahunya/).\n- Inlines CSS.\n- Dead-code-eliminates / tree-shakes / purges (pick your favorite word) unused CSS on a per-page basis with [PurgeCSS](https://purgecss.com/).\n- Minified CSS with [csso](https://www.npmjs.com/package/csso).\n\n#### Miscellaneous\n\n- Immutable URLs for JS.\n- Sets immutable caching headers for images, fonts, and JS (CSS is inlined). Currently implements for Netlify `_headers` file.\n- Minifies HTML and optimizes it for compression. Uses [html-minifier](https://www.npmjs.com/package/html-minifier) with aggressive options.\n- Uses [rollup](https://rollupjs.org/) to bundle JS and minifies it with [terser](https://terser.org/).\n- Prefetches same-origin navigations when a navigation is likely.\n- If an AMP files is present, [optimizes it](https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp/).\n\n#### Fonts\n\n- Serves fonts from same origin.\n- Makes fonts `display:swap`.\n\n#### Analytics\n\n- Supports locally serving Google Analytics's JS and proxying it's hit requests to a Netlify proxy (other proxies could be easily added).\n- Support for noscript hit requests.\n- Avoids blocking onload on analytics requests.\n- To turn this on, specify `googleAnalyticsId` in `metadata.json`.\n\n### DX features\n\n- Uses 🚨 as favicon during local development.\n- Supports a range of default tests.\n- Runs build and tests on `git push`.\n- Sourcemap generated for JS.\n\n### SEO \u0026 Social\n\n- Share button preferring `navigator.share()` and falling back to Twitter. Using OS-like share-icon.\n- Support for OGP metadata.\n- Support for Twitter metadata.\n- Support for schema.org JSON-LD.\n- Sitemap.xml generation.\n\n### Largely useless glitter\n\n- Read time estimate.\n- Animated scroll progress bar…\n- …with an optimized implementation that should never cause a layout.\n\n### Security\n\nGenerates a strong CSP for the base template.\n\n- Default-src is self.\n- Disallows plugins.\n- Generates hash based CSP for the JS used on the site.\n- To extend the CSP with new rules, see [CSP.js](https://github.com/google/eleventy-high-performance-blog/blob/main/_data/csp.js#L22)\n\n### Build performance\n\n- Downloaded remote images, and generated sizes are cached in the local filesystem…\n- …and SHOULD be committed to git.\n- `.persistimages.sh` helps with this.\n\n## Disclaimer\n\nThis is not an officially supported Google product, but rather [Malte's](https://twitter.com/cramforce) private best-effort open-source project.\n\n## License\n\nThis library is released under BSD-3 license clause.\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2F0-vortex%2Feleventy-high-performance-blog-plus.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2F0-vortex%2Feleventy-high-performance-blog-plus?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0-vortex%2Feleventy-high-performance-blog-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0-vortex%2Feleventy-high-performance-blog-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0-vortex%2Feleventy-high-performance-blog-plus/lists"}