十一高性能博客

一个初学者存储库，展示了如何使用 Eleventy 静态站点生成器构建博客，实现广泛的性能最佳实践。

基于令人敬畏的11-base-blog。

演示

• Netlify 演示

入门

1.从这个仓库模板生成一个新的仓库

单击使用此模板按钮。

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/”中的图标。
• 如果你不想要（同源）谷歌分析集成，把它撕掉 😛.
• 否则：将自己击倒。这是一个模板存储库。
• 对于简单的颜色覆盖，调整 .css 顶部的这些 CSS 变量

  css/main.css

  。

:root {
  --primary: #E7BF60;
  --primary-dark: #f9c412;
}

特征

绩效结果

• 在适用的灯塔审核（包括可访问性）中获得满分。
• 对First Contentful Paint 的单个 HTTP 请求。
• 非常优化的最大内容绘制（分数取决于图像使用情况，但图像已优化）。
• 0累积布局移位。
• ~0第一个输入延迟。

性能优化

图片

• 不可变的 URL。
• 下载远程图像并在本地存储/提供它们。
• 生成每个图像的多种尺寸并在

  srcset

  .
• 为每个图像生成一个模糊的占位符（不添加 HTML 元素或使用 JS）。
• 延迟加载图像（使用native

  loading=lazy

  ）。
• 异步解码图像（使用

  decoding=async

  ）。
• 通过推断和提供宽度和高度来避免图像的CLS 影响（Chrome、Firefox 和 Safari 14+ 支持）。

CSS

• 默认为紧凑的“无类” Bahunya CSS 框架。
• 内联 CSS。
• 使用PurgeCSS在每页的基础上消除死代码/摇树/清除（选择你最喜欢的词）未使用的 CSS 。
• 精缩CSS与CSSO。

各种各样的

• JS 的不可变 URL。
• 为图像、字体和 JS 设置不可变的缓存头（CSS 是内联的）。目前为 Netflify

  _headers

  文件实现。
• 缩小 HTML 并对其进行优化以进行压缩。使用带有激进选项的html-minifier。
• 使用rollup捆绑 JS 并使用 terser 将其缩小。
• 当可能出现导航时预取同源导航。
• 如果存在 AMP 文件，则对其进行优化。

字体

• 提供来自相同来源的字体。
• 预加载字体。
• 制作字体

  display:swap

  。

分析

• 支持本地服务 Google Analytics 的 JS 并将其命中请求代理到 Netlify 代理（可以轻松添加其他代理）。
• 支持 noscript 命中请求。
• 避免阻塞分析请求的加载。

DX功能

• 用途 🚨 作为本地开发过程中的图标。
• 支持一系列默认测试。
• 在 上运行构建和测试

  git push

  。
• 为 JS 生成的 Sourcemap。

搜索引擎优化和社交

• 分享按钮偏好

  navigator.share()

  和回退到 Twitter。使用类似操作系统的共享图标。
• 支持 OGP 元数据。
• 支持 Twitter 元数据。
• 支持 schema.org JSON-LD。
• Sitemap.xml 生成。

基本上没用的闪光

• 读取时间估计。
• 动画滚动进度条...
• ...优化的实现永远不会导致布局。

安全

为基本模板生成强大的 CSP。

• 默认-src 是self。
• 禁止插件。
• 为站点上使用的 JS 生成基于哈希的 CSP。

打造性能

• 下载的远程图像和生成的大小缓存在本地文件系统中......
• ...并且应该致力于 git。

• .persistimages.sh

  对此有帮助。

机会（尚未实施）

• 将图像转码为 webp。
• 将图像转码为 avif。

免责声明

这不是官方支持的 Google 产品，而是Malte 的私有尽力而为的开源项目。