如何利用`Google PageSpeed Insights`来诊断网站性能？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

利用 Google PageSpeed Insights 诊断网站性能

大家好，今天我们来深入探讨如何利用 Google PageSpeed Insights (PSI) 来诊断和优化网站性能。 PSI 是一款强大的在线工具，它能分析网页的速度，并提供可操作的建议，帮助我们提升用户体验，进而提高网站排名。

1. PageSpeed Insights 的基本原理

PSI 的工作原理主要基于以下两个方面：

Lighthouse: PSI 使用 Lighthouse 作为其核心分析引擎。 Lighthouse 是一个开源的自动化工具，用于改进网页的质量。它可以审计性能、可访问性、渐进式 Web 应用 (PWA) 和其他方面。
Field Data (CrUX): PSI 还会整合 Chrome 用户体验报告 (CrUX) 的真实用户数据，这能反映用户在实际环境中使用网站时的真实体验。

PSI 会对网页进行评分，范围从 0 到 100。分数越高，表示性能越好。同时，它会将性能指标分为以下几个类别：

Excellent (90-100): 网站性能优秀，用户体验良好。
Good (50-89): 网站性能良好，但仍有改进空间。
Poor (0-49): 网站性能较差，需要进行重大改进。

2. PageSpeed Insights 的主要指标

PSI 报告中包含了多个重要的性能指标，理解这些指标的含义至关重要：

First Contentful Paint (FCP): 浏览器首次呈现任何文本、图像、非白色画布或 SVG 的时间。简单来说，就是用户第一次看到内容的时间。
Largest Contentful Paint (LCP): 浏览器首次呈现视口中最大的内容元素的时间。 LCP 衡量的是用户感知到的加载速度，它关注的是页面的主要内容何时呈现。
First Input Delay (FID): 用户首次与页面交互（例如点击链接、点击按钮或使用自定义 JavaScript 驱动的控件）到浏览器实际响应交互的时间。 FID 衡量的是页面的响应速度。
Cumulative Layout Shift (CLS): 衡量页面在加载过程中视觉稳定性的指标。 CLS 评估的是非预期布局移动的总量。
Speed Index: 衡量页面加载过程中内容可见速度的指标。
Time to Interactive (TTI): 页面完全可交互的时间。 TTI 衡量的是页面何时变得可以可靠地响应用户输入。
Total Blocking Time (TBT): FCP 和 TTI 之间，主线程被阻塞的时间。 TBT 直接影响 FID，因为主线程被阻塞会导致页面无法响应用户输入。

下表总结了这些指标及其重要性：

指标	描述	重要性
First Contentful Paint	浏览器首次呈现任何文本、图像等的时间	用户感知到的加载速度，影响用户对网站的第一印象
Largest Contentful Paint	浏览器首次呈现视口中最大的内容元素的时间	用户感知到的加载速度，关注页面的主要内容何时呈现
First Input Delay	用户首次与页面交互到浏览器实际响应交互的时间	页面响应速度，影响用户体验
Cumulative Layout Shift	衡量页面在加载过程中视觉稳定性的指标	用户体验，避免用户在页面加载过程中意外点击或操作
Speed Index	衡量页面加载过程中内容可见速度的指标	用户感知到的加载速度
Time to Interactive	页面完全可交互的时间	页面可用性，影响用户能否正常使用网站
Total Blocking Time	FCP 和 TTI 之间，主线程被阻塞的时间	页面响应速度，直接影响 FID

3. 如何使用 PageSpeed Insights

使用 PSI 非常简单：

访问 https://pagespeed.web.dev/
在输入框中输入你要分析的网页 URL。
点击 "Analyze" 按钮。

PSI 会对网页进行分析，并在几秒钟后生成一份报告。报告会分为 "Mobile" 和 "Desktop" 两个版本，因为移动设备和桌面设备的性能表现可能有所不同。

4. 解读 PageSpeed Insights 报告

PSI 报告包含了以下几个部分：

Performance Score: 总体性能评分，范围从 0 到 100。
Field Data (CrUX): 基于真实用户数据的性能指标，如 FCP、LCP、FID、CLS 等。如果 CrUX 数据不足，则会显示 "Insufficient data" 提示。
Lab Data (Lighthouse): 基于模拟环境的性能指标，如 FCP、LCP、Speed Index、TTI、TBT、CLS 等。
Opportunities: PSI 提出的改进建议，这些建议通常涉及到优化图片、减少 JavaScript 执行时间、使用 CDN 等。
Diagnostics: PSI 提供的诊断信息，可以帮助你更深入地了解网站的性能问题。例如，它可能会指出阻塞渲染的资源、未使用的 JavaScript 和 CSS 等。
Passed Audits: PSI 认为已经优化的项目。

5. 优化网站性能的常见策略

基于 PSI 报告，我们可以采取以下一些常见的策略来优化网站性能：

优化图片:
- 使用合适的图片格式 (WebP, AVIF)。
- 压缩图片大小。
- 使用响应式图片，根据设备屏幕大小提供不同尺寸的图片。
- 使用 loading="lazy" 属性延迟加载非首屏图片。
- 使用 CDN 加速图片分发。
例如，我们可以使用以下 HTML 代码来实现响应式图片：
```
<img
  srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
  src="image-large.jpg"
  alt="Responsive Image"
  loading="lazy"
/>
```
减少 JavaScript 执行时间:
- 删除未使用的 JavaScript 代码。
- 压缩 JavaScript 代码。
- 延迟加载非必要的 JavaScript 代码。
- 使用 Web Workers 将耗时的 JavaScript 任务转移到后台线程。
- 避免使用阻塞主线程的 JavaScript 代码。
可以使用以下代码实现 JavaScript 的延迟加载：
```
<script src="script.js" defer></script>
```
优化 CSS:
- 删除未使用的 CSS 代码。
- 压缩 CSS 代码。
- 使用 CSS Sprites 或 SVG Sprites 减少 HTTP 请求。
- 将关键 CSS 内联到 HTML 中，以避免阻塞渲染。
- 使用 rel="preload" 预加载关键 CSS 资源。
可以使用以下代码预加载 CSS 资源：
```
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
```
利用浏览器缓存:
- 设置合适的 HTTP 缓存头，例如 Cache-Control 和 Expires。
- 使用 CDN 缓存静态资源。
- 利用 Service Workers 实现离线缓存。
以下是一个设置 Cache-Control 头的示例：
```
Cache-Control: public, max-age=31536000
```

启用 Gzip 压缩:

启用服务器端的 Gzip 压缩，以减小传输的数据量。
可以使用 Brotli 压缩，它比 Gzip 具有更好的压缩率。

在 Nginx 中启用 Gzip 压缩的示例配置：

gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss image/svg+xml;

使用 CDN:
- 使用 CDN 将静态资源分发到全球各地的服务器，以提高访问速度。
- 选择合适的 CDN 提供商，并根据你的需求进行配置。
减少 HTTP 请求:
- 合并 CSS 和 JavaScript 文件。
- 使用 CSS Sprites 或 SVG Sprites。
- 避免使用过多的第三方脚本。
优化服务器响应时间:
- 选择高性能的服务器。
- 优化数据库查询。
- 使用缓存机制。
- 监控服务器性能，并及时解决问题。
避免重定向:
- 尽量避免使用重定向，因为重定向会增加 HTTP 请求的延迟。
- 如果必须使用重定向，请使用 301 永久重定向，而不是 302 临时重定向。
优化渲染阻塞资源：
- 识别并消除阻塞首次渲染的资源。通常是CSS和JavaScript文件。
- 使用rel="preload"预加载关键资源。
- 将非关键CSS设置为异步加载。
- 使用代码分割，将JavaScript拆分成更小的块，按需加载。
合理使用字体:
- 选择合适的字体格式 (WOFF2)。
- 使用 font-display 属性控制字体的加载行为。
- 避免使用过多的字体。
- 使用 CDN 加速字体分发。
以下是使用 font-display 属性的示例：
```
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}
```
代码分割:
- 将大型 JavaScript 代码库拆分成更小的块。
- 按需加载代码块，以减少初始加载时间。
- 可以使用 Webpack、Parcel 等工具进行代码分割。
服务端渲染 (SSR) 或预渲染:
- 对于复杂的单页应用 (SPA)，可以考虑使用服务端渲染或预渲染，以提高 FCP 和 LCP。
- 服务端渲染可以将 HTML 在服务器端生成，然后发送到客户端，从而减少客户端的渲染时间。
- 预渲染可以在构建时生成 HTML，然后将其作为静态资源提供。

6. 实例分析

假设我们有一个名为 example.com 的网站，我们使用 PSI 对其首页进行分析。 PSI 报告显示，其移动端的性能评分为 60，属于 "Good" 级别，但仍有改进空间。

PSI 报告中指出以下问题：

Large images: 页面包含多个大型图片，导致加载时间过长。
Render-blocking resources: 存在阻塞渲染的 CSS 和 JavaScript 资源。
Unused JavaScript: 页面加载了未使用的 JavaScript 代码。

根据 PSI 的建议，我们可以采取以下措施：

优化图片: 使用 WebP 格式压缩图片，并使用响应式图片。
优化 CSS: 删除未使用的 CSS 代码，并将关键 CSS 内联到 HTML 中。
优化 JavaScript: 删除未使用的 JavaScript 代码，并延迟加载非必要的 JavaScript 代码。

经过优化后，我们再次使用 PSI 对 example.com 的首页进行分析。这一次，其移动端的性能评分为 92，达到了 "Excellent" 级别。

7. 持续优化

网站性能优化是一个持续的过程，我们需要定期使用 PSI 对网站进行分析，并根据 PSI 的建议进行改进。此外，我们还需要关注用户体验，并根据用户的反馈进行调整。使用自动化工具可以帮助我们更好地监控网站性能，并在出现问题时及时发出警报。

8. 总结

Google PageSpeed Insights 是一个强大的网站性能诊断工具，通过分析网页的速度，并提供可操作的建议，可以帮助我们提升用户体验，进而提高网站排名。理解 PSI 的基本原理和主要指标，并采取相应的优化策略，可以有效地提高网站的性能。并注意这是一个持续的过程。

利用 Google PageSpeed Insights 诊断网站性能

发表回复 取消回复

发表回复取消回复