eleventy-high-performance-blog
使用 Eleventy 静态网站生成器 建立博客的入门资源库，实现了一系列最佳性能实践。
基于酷炫的 eleventy-base-blog。
演示
入门
1. 从这个版本库模板生成一个新的版本库
点击 "Use this template（使用这个模板）" 按钮。或者你也可以自己克隆这个 repo，然后把你的副本推送到你喜欢的 git 仓库。
2. 克隆你的新仓库
git clone https://github.com/YOUR_REPO
3. 导航到目录
cd my-blog-name
4. 安装依赖关系
npm install
5. 建设、服务、观看和测试
npm run watch
6. 建立和测试
npm run build
自定义
在编辑器中的各个文件中搜索 "更新我"，以找到所有你应该更新的网站特定的东西。
- 更新 'img/favicon/' 中的 favicons。
- 否则。敲你自己。这是一个模板库。
- 对于一个简单的颜色覆盖，在 css/main.css 的顶部调整这些 CSS 变量。
:root {
--primary: #E7BF60;
--primary-dark: #f9c412;
}
特性
表现结果
- 在适用的 lighthouse 审核中获得满分（包括可访问性）。
- 单个 HTTP 请求到 第一幅满画。
- 非常优化的 最大满画（分数取决于图片的使用情况，但图片已被优化）。
- 0 累计布局移动。
- ~0 第一次输入延迟。
性能优化
图片
- 生成每张图片的多种尺寸，并在 srcset 中使用它们。
- 为每张图片生成一个模糊的占位符（不添加 HTML 元素或使用 JS）。
- 将图像转码为 AVIF（由于编码器的不稳定性，目前默认为关闭）和 webp 并生成图片元素。
- 懒惰加载图片（使用 native
loading=lazy）。 - 异步解码图像（使用
decoding=async）。 - 使用
content-visibility: auto对图片和占位符进行懒惰布局。 - 通过推断和提供宽度和高度来避免图像的CLS影响（支持 Chrome、Firefox 和 Safari 14+）。
- 下载远程图像并在本地存储/提供它们。
- 不可更改的 URL。
CSS
- 默认使用紧凑的 "无类" Bahunya CSS 框架。
- 内联 CSS。
- 使用 PurgeCSS 来消除/树形抖动/清除（选择你喜欢的词）每页未使用的 CSS。
- 使用 csso 最小化 CSS。
杂项
- JS 的不可改变的 URL。
- 为图片、字体和 JS 设置不可更改的缓存头文件（CSS 是内联的）。目前实现了 Netlify _headers 文件。
- 对 HTML 进行最小化并优化压缩。使用 html-minifier 和激进的选项。
- 使用 rollup 来捆绑 JS，并使用 terser 对其进行精简。
- 当可能出现导航时，预设同源导航。
- 如果存在 AMP 文件，则对其进行优化。
字体
- 服务于同一来源的字体。
- 使字体显示：交换。
分析
- 支持本地服务 Google Analytics 的 JS 和代理它的点击请求到 Netlify 代理（可以很容易地添加其他代理）。
- 支持 noscript 点击请求。
- 避免阻塞分析请求的 onload。
- 要打开这个功能，请在 metadata.json 中指定 googleAnalyticsId。
DX 功能
- 在本地开发时使用 rotating_light 作为 favicon。
- 支持一系列的默认测试。
- 在 git 推送上运行构建和测试。
- 为 JS 生成源码图。
搜索引擎优化和社会化
- 分享按钮喜欢用navigator.share()，而回落到Twitter。使用类似OS的分享图标。
- 支持 OGP 元数据。
- 支持 Twitter 元数据。
- 支持 schema.org JSON-LD。
- Sitemap.xml生成。
基本无用的闪光点
- 阅读时间估计。
- 动态滚动进度条...
- ......通过优化的实施，绝对不能造成布局。
安全性
- 为基础模板生成一个强大的 CSP。
- 默认sr c为 self。
- 不允许使用插件。
- 为网站上使用的J S 生成基于哈希值的 CSP。
- 要用新的规则扩展 CSP，请看 CSP.js。
构建性能
- 下载的远程图片，生成的大小会缓存在本地文件系统中......
- ...而且应该提交给git。
- .persistimages.sh可以帮助解决这个问题。
免责声明
这不是谷歌官方支持的产品，而是 Malte 私人尽力的开源项目。
（The first version translated by vz on 2020.12.19）
