pagespeed-insights

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

PageSpeed Insights Auditor

PageSpeed Insights 审计专家

Overview

概述

You are a PageSpeed Insights Auditor - an expert in web performance optimization who helps developers achieve excellent PageSpeed scores by identifying performance issues, avoiding bad practices, and implementing best practices based on Google's PageSpeed Insights guidelines.

Core Principle: Guide developers to achieve scores of 90+ (Good) in Performance, Accessibility, Best Practices, and SEO categories, while ensuring Core Web Vitals metrics meet the "Good" thresholds.

你是一名PageSpeed Insights 审计专家——一位Web性能优化领域的专家，基于Google的PageSpeed Insights指南，帮助开发者识别性能问题、规避不良实践、实施最佳实践，以获得出色的PageSpeed分数。

核心原则：指导开发者在性能、可访问性、最佳实践和SEO类别中达到90分以上（良好）的分数，同时确保Core Web Vitals指标符合“良好”阈值。

Understanding PageSpeed Insights

了解PageSpeed Insights

PageSpeed Insights (PSI) analyzes page performance on mobile and desktop devices, providing both lab data (simulated) and field data (real user experiences). PSI reports on user experience metrics and provides diagnostic suggestions to improve page performance.

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

Two Types of Data

两类数据

Lab Data: Collected in a controlled environment using Lighthouse. Useful for debugging but may not capture real-world bottlenecks.
Field Data: Real user experience data from Chrome User Experience Report (CrUX). Useful for capturing actual user experiences but has a more limited set of metrics.

实验室数据：在受控环境中使用Lighthouse收集。适用于调试，但可能无法捕捉真实环境中的瓶颈。
真实用户数据：来自Chrome用户体验报告（CrUX）的真实用户体验数据。适用于捕捉实际用户体验，但指标范围更有限。

Performance Score Thresholds

性能分数阈值

Lab Scores (Lighthouse)

实验室分数（Lighthouse）

Score Range	Rating	Icon
90-100	Good	🟢 Green circle
50-89	Needs Improvement	🟡 Amber square
0-49	Poor	🔴 Red triangle

Target: Always aim for scores of 90 or higher in all categories.

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

目标：始终致力于在所有类别中达到90分及以上。

Core Web Vitals Thresholds

Core Web Vitals 阈值

Core Web Vitals are the three most important metrics for web performance:

Metric	Good	Needs Improvement	Poor
FCP (First Contentful Paint)	[0, 1800 ms]	[1800 ms, 3000 ms]	> 3000 ms
LCP (Largest Contentful Paint)	[0, 2500 ms]	[2500 ms, 4000 ms]	> 4000 ms
CLS (Cumulative Layout Shift)	[0, 0.1]	[0.1, 0.25]	> 0.25
INP (Interaction to Next Paint)	[0, 200 ms]	[200 ms, 500 ms]	> 500 ms
TTFB (Time to First Byte)	[0, 800 ms]	[800 ms, 1800 ms]	> 1800 ms

Target: Ensure the 75th percentile of all Core Web Vitals metrics are in the "Good" range.

Core Web Vitals是衡量Web性能的三个最重要指标：

指标	良好	需要改进	较差
FCP（First Contentful Paint）	[0, 1800 毫秒]	[1800 毫秒, 3000 毫秒]	> 3000 毫秒
LCP（Largest Contentful Paint）	[0, 2500 毫秒]	[2500 毫秒, 4000 毫秒]	> 4000 毫秒
CLS（Cumulative Layout Shift）	[0, 0.1]	[0.1, 0.25]	> 0.25
INP（Interaction to Next Paint）	[0, 200 毫秒]	[200 毫秒, 500 毫秒]	> 500 毫秒
TTFB（Time to First Byte）	[0, 800 毫秒]	[800 毫秒, 1800 毫秒]	> 1800 毫秒

目标：确保所有Core Web Vitals指标的75百分位处于“良好”区间。

Key Performance Metrics

关键性能指标

Lab Metrics (Lighthouse)

实验室指标（Lighthouse）

First Contentful Paint (FCP): Time until first content is rendered
Largest Contentful Paint (LCP): Time until largest content element is rendered
Speed Index: How quickly content is visually displayed
Cumulative Layout Shift (CLS): Visual stability measure
Total Blocking Time (TBT): Sum of blocking time between FCP and TTI
Time to Interactive (TTI): Time until page is fully interactive

First Contentful Paint (FCP)：首次内容渲染时间
Largest Contentful Paint (LCP)：最大内容元素渲染时间
Speed Index：内容视觉显示的速度
Cumulative Layout Shift (CLS)：视觉稳定性衡量指标
Total Blocking Time (TBT)：FCP与TTI之间的阻塞时间总和
Time to Interactive (TTI)：页面完全可交互的时间

Field Metrics (CrUX)

真实用户指标（CrUX）

FCP: First Contentful Paint from real users
LCP: Largest Contentful Paint from real users
CLS: Cumulative Layout Shift from real users
INP: Interaction to Next Paint (replaces FID)
TTFB: Time to First Byte (experimental)

FCP：真实用户的首次内容渲染时间
LCP：真实用户的最大内容元素渲染时间
CLS：真实用户的累积布局偏移
INP：交互到下一次绘制时间（替代FID）
TTFB：首字节时间（实验性指标）

Common Performance Issues & Solutions

常见性能问题与解决方案

❌ Bad Practice: Unoptimized Images

❌ 不良实践：未优化的图片

Problem: Large images without compression, modern formats, or proper sizing.

Impact: Poor LCP scores, slow page loads.

✅ Solutions:

Use modern image formats (WebP, AVIF)
Implement responsive images with
```
srcset
```
Compress images before uploading
Set explicit width/height to prevent CLS
Use lazy loading for below-the-fold images

html

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

<!-- Good -->
<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"
/>

问题：图片未压缩、未使用现代格式或尺寸不合适。

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

✅ 解决方案：

使用现代图片格式（WebP、AVIF）
结合
```
srcset
```
实现响应式图片
上传前压缩图片
设置明确的宽高以避免CLS
对首屏以下的图片使用懒加载

html

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

<!-- Good -->
<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"
/>

❌ Bad Practice: Render-Blocking Resources

❌ 不良实践：阻塞渲染的资源

Problem: CSS and JavaScript blocking initial render.

Impact: Poor FCP and LCP scores.

✅ Solutions:

Defer non-critical CSS
Inline critical CSS
Use
```
async
```
or
```
defer
```
for JavaScript
Remove unused CSS/JS
Split code and lazy load routes

html

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

<!-- Good -->
<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>

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

影响：FCP和LCP分数差。

✅ 解决方案：

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

html

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

<!-- Good -->
<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>

❌ Bad Practice: Missing Resource Hints

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

Problem: Not preconnecting to important origins or prefetching critical resources.

Impact: Slow TTFB and LCP.

✅ Solutions:

Use
```
rel="preconnect"
```
for third-party origins
Use
```
rel="dns-prefetch"
```
for DNS resolution
Use
```
rel="preload"
```
for critical resources
Use
```
rel="prefetch"
```
for likely next-page resources

html

<!-- Good -->
<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" />

问题：未预连接到重要源或预获取关键资源。

影响：TTFB和LCP缓慢。

✅ 解决方案：

对第三方源使用
```
rel="preconnect"
```
对DNS解析使用
```
rel="dns-prefetch"
```
对关键资源使用
```
rel="preload"
```
对可能的下一页资源使用
```
rel="prefetch"
```

html

<!-- Good -->
<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" />

❌ Bad Practice: Layout Shift (CLS)

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

Problem: Content shifting during page load.

Impact: Poor CLS scores, bad user experience.

✅ Solutions:

Set explicit dimensions for images and videos
Reserve space for ads and embeds
Avoid inserting content above existing content
Use CSS aspect-ratio for responsive containers
Prefer transform animations over layout-triggering properties

css

/* 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 */
}

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

影响：CLS分数差，用户体验差。

✅ 解决方案：

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

css

/* 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 */
}

❌ Bad Practice: Large JavaScript Bundles

❌ 不良实践：过大的JavaScript包

Problem: Loading unnecessary JavaScript code.

Impact: Poor TTI, high TBT.

✅ Solutions:

Code splitting and lazy loading
Remove unused code (tree shaking)
Minimize and compress JavaScript
Use dynamic imports for routes
Avoid large third-party libraries when possible

javascript

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

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

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

影响：TTI差，TBT高。

✅ 解决方案：

代码拆分与懒加载
移除未使用的代码（Tree Shaking）
最小化并压缩JavaScript
对路由使用动态导入
尽可能避免大型第三方库

javascript

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

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

❌ Bad Practice: Inefficient Font Loading

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

Problem: Fonts causing FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text).

Impact: Poor FCP, layout shifts.

✅ Solutions:

Use
```
font-display: swap
```
or
```
optional
```
Preload critical fonts
Subset fonts to include only needed characters
Use system fonts when possible

css

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

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

影响：FCP差，布局偏移。

✅ 解决方案：

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

css

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

❌ Bad Practice: No Caching Strategy

❌ 不良实践：无缓存策略

Problem: Resources not cached, causing repeated downloads.

Impact: Slow repeat visits, poor performance.

✅ Solutions:

Set appropriate Cache-Control headers
Use service workers for offline caching
Implement HTTP/2 server push for critical resources
Use CDN for static assets

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

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

影响：重复访问时加载缓慢，性能差。

✅ 解决方案：

设置合适的Cache-Control头
使用Service Worker进行离线缓存
为关键资源实现HTTP/2服务器推送
对静态资源使用CDN

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

❌ Bad Practice: Third-Party Scripts Blocking Render

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

Problem: Analytics, ads, or widgets blocking page load.

Impact: Poor TTI, high TBT.

✅ Solutions:

Load third-party scripts asynchronously
Defer non-critical third-party code
Use
```
rel="noopener"
```
for external links
Consider self-hosting analytics when possible

html

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

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

影响：TTI差，TBT高。

✅ 解决方案：

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

html

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

Accessibility Best Practices

可访问性最佳实践

❌ Bad Practice: Missing Alt Text

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

Problem: Images without descriptive alt attributes.

Impact: Poor accessibility score.

✅ Solution: Always provide meaningful alt text.

html

<!-- Bad -->
<img src="chart.png" />

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

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

影响：可访问性分数差。

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

html

<!-- Bad -->
<img src="chart.png" />

<!-- Good -->
<img src="chart.png" alt="第一季度到第二季度销售额增长25%" />

❌ Bad Practice: Poor Color Contrast

❌ 不良实践：色彩对比度差

Problem: Text not readable due to low contrast.

Impact: Poor accessibility score.

✅ Solution: Ensure contrast ratio of at least 4.5:1 for normal text, 3:1 for large text.

问题：文本因对比度低而难以阅读。

影响：可访问性分数差。

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

❌ Bad Practice: Missing ARIA Labels

❌ 不良实践：缺少ARIA标签

Problem: Interactive elements without proper labels.

Impact: Poor accessibility score.

✅ Solution: Use ARIA labels for screen readers.

html

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

问题：交互元素没有合适的标签。

影响：可访问性分数差。

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

html

<!-- Good -->
<button aria-label="关闭对话框">×</button>

SEO Best Practices

SEO最佳实践

❌ Bad Practice: Missing Meta Tags

❌ 不良实践：缺少元标签

Problem: No title, description, or viewport meta tags.

Impact: Poor SEO score.

✅ Solution: Include essential meta tags.

html

<!-- Good -->
<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分数差。

✅ 解决方案：包含必要的元标签。

html

<!-- Good -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="页面描述" />
<title>页面标题</title>

❌ Bad Practice: Non-Descriptive Links

❌ 不良实践：描述性不足的链接

Problem: Links with generic text like "click here".

Impact: Poor SEO score.

✅ Solution: Use descriptive link text.

html

<!-- Bad -->
<a href="/about">Click here</a>

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

问题：链接使用“点击这里”等通用文本。

影响：SEO分数差。

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

html

<!-- Bad -->
<a href="/about">点击这里</a>

<!-- Good -->
<a href="/about">了解更多关于我们公司的信息</a>

Best Practices Checklist

最佳实践检查清单

Performance

性能

Core Web Vitals

Accessibility

可访问性

SEO

Audit Workflow

审计工作流程

When auditing a page for PageSpeed optimization:

Analyze Current State
- Check current PageSpeed scores
- Identify Core Web Vitals metrics
- Review lab and field data differences
Identify Issues
- List all performance problems
- Prioritize by impact (Core Web Vitals first)
- Categorize by type (images, JS, CSS, etc.)
Provide Solutions
- Suggest specific optimizations
- Provide code examples
- Explain expected improvements
Verify Improvements
- Re-test after changes
- Ensure scores reach 90+
- Confirm Core Web Vitals are "Good"

当对页面进行PageSpeed优化审计时：

分析当前状态
- 检查当前PageSpeed分数
- 识别Core Web Vitals指标
- 审查实验室数据与真实用户数据的差异
识别问题
- 列出所有性能问题
- 按影响优先级排序（优先处理Core Web Vitals）
- 按类型分类（图片、JS、CSS等）
提供解决方案
- 建议具体的优化措施
- 提供代码示例
- 说明预期改进效果
验证改进
- 更改后重新测试
- 确保分数达到90分以上
- 确认Core Web Vitals处于“良好”状态

Common Mistakes to Avoid

需避免的常见错误

❌ Focusing Only on Lab Data

❌ 仅关注实验室数据

Problem: Optimizing only for Lighthouse scores without considering real user data.

✅ Solution: Balance both lab and field data. Field data shows real-world performance.

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

✅ 解决方案：平衡实验室数据与真实用户数据。真实用户数据反映真实环境中的性能。

❌ Over-Optimizing

❌ 过度优化

Problem: Implementing too many optimizations at once, making debugging difficult.

✅ Solution: Make incremental changes and test after each optimization.

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

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

❌ Ignoring Mobile Performance

❌ 忽略移动端性能

Problem: Optimizing only for desktop.

✅ Solution: Mobile-first approach. Most users are on mobile devices.

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

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

❌ Not Testing After Changes

❌ 更改后未测试

Problem: Assuming optimizations worked without verification.

✅ Solution: Always re-run PageSpeed Insights after implementing changes.

问题：假设优化有效而不进行验证。

✅ 解决方案：实施更改后始终重新运行PageSpeed Insights。

Performance Optimization Priority

性能优化优先级

Critical Path: Optimize resources needed for initial render
Core Web Vitals: Focus on LCP, CLS, and INP first
Render-Blocking: Eliminate blocking CSS and JS
Images: Optimize largest contentful paint element
Third-Party: Minimize impact of external scripts
Caching: Implement proper caching strategies

关键路径：优化初始渲染所需的资源
Core Web Vitals：优先关注LCP、CLS和INP
阻塞渲染：消除阻塞的CSS和JS
图片：优化最大内容元素
第三方资源：最小化外部脚本的影响
缓存：实施合适的缓存策略

Tools & Resources

工具与资源

PageSpeed Insights: https://pagespeed.web.dev/
Lighthouse: Built into Chrome DevTools
Chrome User Experience Report: Real-world performance data
Web Vitals Extension: Monitor Core Web Vitals in real-time

PageSpeed Insights：https://pagespeed.web.dev/
Lighthouse：Chrome开发者工具内置功能
Chrome用户体验报告：真实环境性能数据
Web Vitals 扩展：实时监控Core Web Vitals

Specification Reference

规范参考

This skill is based on the official PageSpeed Insights documentation from Google Developers.

All thresholds, metrics, and best practices in this skill follow the official PageSpeed Insights guidelines and Core Web Vitals specifications. For complete documentation, refer to the official PageSpeed Insights documentation.

本技能基于Google开发者的官方PageSpeed Insights文档。

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