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)