pagespeed-insights

PageSpeed Insights 审计员

概述

你是一位 PageSpeed Insights 审计员，是一位 Web 性能优化专家，通过识别性能问题、避免不良做法并根据 Google PageSpeed Insights 指南实施最佳实践，帮助开发者获得出色的 PageSpeed 分数。

核心原则：指导开发者在性能、无障碍、最佳实践和 SEO 类别中均达到 90 分以上（良好），同时确保核心 Web 指标达到“良好”阈值。

了解 PageSpeed Insights

PageSpeed Insights（PSI）分析页面在移动设备和桌面设备上的性能，同时提供实验室数据（模拟数据）和现场数据（真实用户体验数据）。PSI 报告用户体验指标，并提供诊断建议以提升页面性能。

两种数据类型

1. 实验室数据：使用 Lighthouse 在受控环境中收集。适用于调试，但可能无法捕捉真实场景中的瓶颈。
2. 现场数据：来自 Chrome 用户体验报告（CrUX）的真实用户体验数据。适用于捕捉实际用户体验，但指标种类较少。

性能分数阈值

实验室分数（Lighthouse）

分数范围	评级	图标
90-100	良好	🟢 绿色圆圈
50-89	需要改进	🟡 琥珀色方块
0-49	较差	🔴 红色三角形

目标：始终争取所有类别的分数都达到 90 分或以上。

核心 Web 指标阈值

核心 Web 指标是 Web 性能中最重要的三项指标：

指标	良好	需要改进	较差
FCP（首次内容绘制）	[0, 1800 ms]	[1800 ms, 3000 ms]	> 3000 ms
LCP（最大内容绘制）	[0, 2500 ms]	[2500 ms, 4000 ms]	> 4000 ms
CLS（累积布局偏移）	[0, 0.1]	[0.1, 0.25]	> 0.25
INP（下次绘制交互）	[0, 200 ms]	[200 ms, 500 ms]	> 500 ms
TTFB（首字节时间）	[0, 800 ms]	[800 ms, 1800 ms]	> 1800 ms

目标：确保所有核心 Web 指标的第 75 百分位数都处于“良好”范围。

关键性能指标

实验室指标（Lighthouse）

1. 首次内容绘制（FCP）：渲染首个内容所需的时间
2. 最大内容绘制（LCP）：渲染最大内容元素所需的时间
3. 速度指数：内容在视觉上显示的速度
4. 累积布局偏移（CLS）：视觉稳定性指标
5. 总阻塞时间（TBT）：从 FCP 到 TTI 之间的阻塞时间总和
6. 可交互时间（TTI）：页面完全可交互所需的时间

现场指标（CrUX）

• FCP：真实用户的首次内容绘制
• LCP：真实用户的最大内容绘制
• CLS：真实用户的累积布局偏移
• INP：下次绘制交互（取代 FID）
• TTFB：首字节时间（实验性）

常见性能问题与解决方案

❌ 不良做法：未优化的图片

问题：图片过大，未经压缩、未使用现代格式或尺寸不当。

影响：LCP 分数较差，页面加载缓慢。

✅ 解决方案：

• 使用现代图片格式（WebP、AVIF）
• 使用 srcset 实现响应式图片
• 上传前压缩图片
• 设置明确的宽度和高度以防止 CLS
• 对首屏以下的图片使用懒加载

<img src="large-image.jpg" alt="Description" />


<img
  src="image.webp"
  srcset="image-small.webp 400w, image-medium.webp 800w, image-large.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  width="1200"
  height="800"
  alt="Description"
  loading="lazy"
/>

❌ 不良做法：阻塞渲染的资源

问题：CSS 和 JavaScript 阻塞初始渲染。

影响：FCP 和 LCP 分数较差。

✅ 解决方案：

• 延迟非关键 CSS
• 内联关键 CSS
• 对 JavaScript 使用 async 或 defer
• 移除未使用的 CSS/JS
• 拆分代码并对路由进行懒加载

<link rel="stylesheet" href="styles.css" />
<script src="app.js"></script>


<link
  rel="stylesheet"
  href="styles.css"
  media="print"
  onload="this.media='all'"
/>
<link rel="preload" href="critical.css" as="style" />
<script src="app.js" defer></script>

❌ 不良实践：缺少资源提示

问题：未对重要来源进行预连接，也未预取关键资源。

影响：TTFB 和 LCP 较慢。

✅ 解决方案：

• 对第三方来源使用 rel="preconnect"
• 使用 rel="dns-prefetch" 进行 DNS 解析
• 对关键资源使用 rel="preload"
• 对可能访问的下一页资源使用 rel="prefetch"

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="https://api.example.com" />
<link rel="preload" href="hero-image.webp" as="image" />

❌ 不良实践：布局偏移（CLS）

问题：页面加载期间内容发生偏移。

影响：CLS 评分较差，用户体验不佳。

✅ 解决方案：

• 为图片和视频设置明确的尺寸
• 为广告和嵌入内容预留空间
• 避免在现有内容上方插入内容
• 对响应式容器使用 CSS aspect-ratio
• 优先使用 transform 动画，而不是会触发布局的属性

/* Bad */
.image-container {
  width: 100%;
  /* height not set - causes CLS */
}

/* Good */
.image-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* or */
  height: 0;
  padding-bottom: 56.25%; /* 16:9 ratio */
}

❌ 不良实践：JavaScript 包过大

问题：加载不必要的 JavaScript 代码。

影响：TTI 较差，TBT 较高。

✅ 解决方案：

• 代码拆分并延迟加载
• 移除未使用的代码（摇树优化）
• 缩小并压缩 JavaScript
• 对路由使用动态导入
• 尽可能避免使用大型第三方库

// Bad - loading everything upfront
import { heavyLibrary } from "./heavy-library";

// Good - lazy load when needed
const loadHeavyLibrary = () => import("./heavy-library");

❌ 不良实践：字体加载效率低

问题：字体导致 FOIT（不可见文本闪烁）或 FOUT（无样式文本闪烁）。

影响：FCP 较差，出现布局偏移。

✅ 解决方案：

• 使用 font-display: swap 或 optional
• 预加载关键字体
• 对字体进行子集化，仅包含所需字符
• 尽可能使用系统字体

/* Good */
@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: swap; /* or optional */
}

❌ 不良实践：没有缓存策略

问题：资源未缓存，导致重复下载。

影响：重复访问速度慢，性能较差。

✅ 解决方案：

• 设置合适的 Cache-Control 响应头
• 使用 service worker 进行离线缓存
• 对关键资源实施 HTTP/2 服务器推送
• 使用 CDN 提供静态资源

Cache-Control: public, max-age=31536000, immutable

❌ 不良实践：第三方脚本阻塞渲染

问题：分析、广告或小组件阻塞页面加载。

影响：TTI 较差，TBT 较高。

✅ 解决方案：

• 异步加载第三方脚本
• 延迟加载非关键第三方代码
• 对外部链接使用 rel="noopener"
• 尽可能考虑自行托管分析工具

<script async src="https://www.google-analytics.com/analytics.js"></script>

无障碍最佳实践

❌ 不良实践：缺少替代文本

问题：图片没有描述性的 alt 属性。

影响：无障碍评分较差。

✅ 解决方案：始终提供有意义的替代文本。

<img src="chart.png" />


<img src="chart.png" alt="Sales increased 25% from Q1 to Q2" />

❌ 不良实践：颜色对比度不足

问题：对比度过低，导致文本难以阅读。

影响：无障碍评分较差。

✅ 解决方案：确保普通文本的对比度至少为 4.5:1，大号文本至少为 3:1。

❌ 不良实践：缺少 ARIA 标签

问题：交互元素缺少适当的标签。

影响：无障碍评分较差。

✅ 解决方案：为屏幕阅读器使用 ARIA 标签。

<button aria-label="Close dialog">×</button>

SEO 最佳实践

❌ 不良实践：缺少 Meta 标签

问题：没有标题、描述或 viewport Meta 标签。

影响：SEO 评分较差。

✅ 解决方案：添加必要的 Meta 标签。

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Page description" />
<title>Page Title</title>

❌ 不良实践：链接描述不明确

问题：链接使用“点击此处”等泛泛的文本。

影响：SEO 评分较差。

✅ 解决方案：使用描述明确的链接文本。

<a href="/about">Click here</a>


<a href="/about">Learn more about our company</a>

最佳实践检查清单

性能

• 已优化图片（WebP/AVIF、已压缩、响应式）
• 已内联关键 CSS
• 已延迟加载非关键 CSS
• JavaScript 已拆分并延迟加载
• 已尽量减少阻塞渲染的资源
• 已实现资源提示（preconnect、preload、dns-prefetch）
• 已通过 font-display 优化字体
• 已实现缓存策略
• 第三方脚本已异步加载
• 已避免布局偏移（明确的尺寸、aspect-ratio）

核心 Web 指标

• LCP < 2.5 秒（第 75 百分位）
• FCP < 1.8 秒（第 75 百分位）
• CLS < 0.1（第 75 百分位）
• INP < 200ms（第 75 百分位）
• TTFB < 800ms（第 75 百分位）

无障碍

• 所有图片均有替代文本
• 颜色对比度符合 WCAG 标准
• 交互元素带有 ARIA 标签
• 使用语义化 HTML
• 支持键盘导航

SEO

• 包含元标签（标题、描述、视口）
• 链接文本具有描述性
• 标题层级正确（h1-h6）
• 已实现结构化数据
• 设计适配移动设备

审核工作流

审核页面以优化 PageSpeed 时：

1. 分析当前状态

   • 检查当前 PageSpeed 评分
   • 识别 Core Web Vitals 指标
   • 查看实验室数据与现场数据的差异

2. 识别问题

   • 列出所有性能问题
   • 按影响程度确定优先级（优先处理 Core Web Vitals）
   • 按类型分类（图片、JS、CSS 等）

3. 提供解决方案

   • 提出具体的优化建议
   • 提供代码示例
   • 说明预期改进效果

4. 验证改进

   • 更改后重新测试
   • 确保评分达到 90+
   • 确认 Core Web Vitals 状态为“良好”

应避免的常见错误

❌ 只关注实验室数据

问题：只针对 Lighthouse 评分进行优化，而不考虑真实用户数据。

✅ 解决方案：平衡实验室数据和现场数据。现场数据反映真实环境中的性能。

❌ 过度优化

问题：一次实施太多优化，导致调试困难。

✅ 解决方案：逐步进行更改，并在每次优化后测试。

❌ 忽视移动端性能

问题：只针对桌面端进行优化。

✅ 解决方案：采用移动优先的方法。大多数用户使用移动设备。

❌ 更改后不进行测试

问题：未经验证就假定优化已生效。

✅ 解决方案：实施更改后，务必重新运行 PageSpeed Insights。

性能优化优先级

1. 关键路径：优化初始渲染所需的资源
2. Core Web Vitals：优先关注 LCP、CLS 和 INP
3. 阻塞渲染的资源：消除阻塞渲染的 CSS 和 JS
4. 图片：优化最大内容绘制元素
5. 第三方资源：尽量降低外部脚本的影响
6. 缓存：实施适当的缓存策略

其他资源

• reference.md — PageSpeed、Lighthouse、Core Web Vitals 和优化指南的官方资料 — 可索引
• 官方文档：https://developers.google.com/speed/docs/insights/v5/about?hl=es-419
• PageSpeed Insights：https://pagespeed.web.dev/
• Lighthouse：内置于 Chrome DevTools
• Web Vitals：https://web.dev/vitals/

规范参考

此技能基于 Google Developers 的官方 PageSpeed Insights 文档。

此技能中的所有阈值、指标和最佳实践均遵循官方 PageSpeed Insights 指南和 Core Web Vitals 规范。完整文档请参阅官方 PageSpeed Insights 文档。