{"id":13401739,"url":"https://github.com/google/eleventy-high-performance-blog","last_synced_at":"2025-05-14T14:08:26.484Z","repository":{"id":37832475,"uuid":"292790829","full_name":"google/eleventy-high-performance-blog","owner":"google","description":"A high performance blog template for the 11ty static site generator.","archived":false,"fork":false,"pushed_at":"2024-06-18T01:18:43.000Z","size":26077,"stargazers_count":4061,"open_issues_count":20,"forks_count":280,"subscribers_count":110,"default_branch":"main","last_synced_at":"2025-05-14T03:21:10.670Z","etag":null,"topics":["11ty","11ty-template","eleventy"],"latest_commit_sha":null,"homepage":"https://www.industrialempathy.com/posts/eleventy-high-performance-blog/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/google.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"11ty"}},"created_at":"2020-09-04T08:16:00.000Z","updated_at":"2025-05-12T18:56:02.000Z","dependencies_parsed_at":"2023-02-08T12:45:51.183Z","dependency_job_id":"a611af7e-8b2a-4ce3-a2ad-786cb71d1e40","html_url":"https://github.com/google/eleventy-high-performance-blog","commit_stats":{"total_commits":324,"total_committers":46,"mean_commits":7.043478260869565,"dds":0.6574074074074074,"last_synced_commit":"e72d0c1ec9e2a4eccf208a76dabdc3ef8794d3c3"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Feleventy-high-performance-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Feleventy-high-performance-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Feleventy-high-performance-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google%2Feleventy-high-performance-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/google","download_url":"https://codeload.github.com/google/eleventy-high-performance-blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254159789,"owners_count":22024564,"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":["11ty","11ty-template","eleventy"],"created_at":"2024-07-30T19:01:06.485Z","updated_at":"2025-05-14T14:08:26.446Z","avatar_url":"https://github.com/google.png","language":"JavaScript","funding_links":["https://opencollective.com/11ty"],"categories":["JavaScript","others","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# eleventy-high-performance-blog\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[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fgoogle%2Feleventy-high-performance-blog)\n\n- [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\n```\nnpm run watch\n```\n\n### 6. Build and test\n\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](\u003chttps://en.wikipedia.org/wiki/AV1#AV1_Image_File_Format_(AVIF)\u003e) and [webp](https://developers.google.com/speed/webp) and generates `picture` element.\n- Transcodes GIFs to muted looping autoplaying MP4 videos for greatly reduced file size.\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). Automatically configured when deploying on [Vercel](https://vercel.com/)\n- 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:optional`.\n\n#### Analytics\n\n- Supports locally serving Google Analytics's JS and proxying it's hit requests to a Vercel Edge Function (other proxies could be easily added).\n- Supports sending [Core Web Vitals](https://web.dev/vitals/) metrics to Google Analytics as [events](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).\n- Support for noscript hit requests.\n- Avoids blocking onload on analytics requests.\n- 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.)\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 [Content-Security-Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle%2Feleventy-high-performance-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogle%2Feleventy-high-performance-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle%2Feleventy-high-performance-blog/lists"}