前端性能优化规范指南：PageSpeed 评分标准与实践

文档说明:
本文档旨在为前端开发提供统一的技术规范，以提高网页在PageSpeed中的性能表现，从而便于后续的性能优化，甚至达到无需进一步优化的效果。

一. 基础介绍

1. 检测方法

1. 直接访问PageSpeed地址：
   • 通过访问 PageSpeed Insights 输入需要检测的网址，开始检测网页性能
2. 使用TDK插件：
   • 在需要性能检测的网页中，打开 TDK插件，通过底部左下角的PageSpeed入口进行检测
3. 本地开发检测：
   • 打开浏览器检查工具，切换至Lighthouse功能，直接分析网页加载情况
   • 建议使用无痕模式进行检测，以避免插件影响结果

注：本地开发环境与线上环境的评分和指标可能会有差异。PageSpeed检测分为PC和Mobile两种模式，Mobile模式使用低速4G网络，通常评分较PC模式低。

2. 基础评分介绍

1. 性能：衡量网页的加载速度和响应能力。得分越高，说明网页在加载时表现越好。
2. 无障碍：评估网页对所有用户（包括有残疾的用户）的可访问性。高分表示网页设计对各种用户群体更友好。
3. 最佳做法：检查网页是否遵循现代开发的最佳实践，包括安全性和代码质量。
4. SEO：衡量网页对搜索引擎的优化程度。满分表示网页在搜索引擎中具有良好的可见性和排名潜力。
   

3. 指标介绍

我们通常最为关注的评分是性能评分，其中性能评分由以下五个指标组成：

• Total Blocking Time (TBT)：总阻塞时间，指页面在加载过程中被阻塞的总时间。
• First Contentful Paint(FCP)：首次内容绘制，指页面上的第一个文本或图像内容出现在屏幕上的时间
• Speed Index(SI)：速度指数，衡量页面内容在视口中可见部分的加载速度
• Largest Contentful Paint (LCP)：最大内容绘制，指页面上最大可见内容元素完全加载的时间
• Cumulative Layout Shift (CLS)：累计布局偏移，衡量页面布局在加载过程中的稳定性。0表示没有不必要的布局偏移，用户体验较好
  注：每次评分都可能产生波动，检测时可以进行两到三次测试。具体详情可查看Lighthouse性能评分文档

二. 开发注意事项

1. 性能

• 消除阻塞渲染的资源：

  • 将JavaScript脚本放在页面底部，根据需要使用async或defer属性，避免同步加载
  • 缩短JavaScript执行时间，减少不必要的依赖，尽量避免使用jQuery
  • 

• 缩短 JavaScript 执行时间：

  • 关注JS执行用时，分为脚本评估时间和脚本解析时间。减少jQuery的使用或者不使用jQuery
  • 

• 图片资源：

  • 采用新一代格式提供图片（如WebP 和 AVIF ）
  • 指定图片宽高，使用懒加载技术加载屏幕外的图片

• 避免使用旧版JavaScript：

  • 使用现代JavaScript标准，避免使用已弃用的API

2. 无障碍

• 图片元素添加alt属性：
  • 为所有图像提供描述性替代文本
• 正确使用列表元素：
  • li元素应包含在ul、ol或menu中，且外层不能是其他元素
  • 
• 标题标签顺序：
  • 使用标题标签时，按顺序嵌套，如从h1到h2，避免直接跳过级别
  • 

3. 最佳做法

• 图像显示尺寸：
  • 确保图像的自然尺寸与显示尺寸匹配，以达到最佳清晰度
• 字体大小：
  • 使用12px及以上的字体大小，确保文本清晰可见
• 避免使用已弃用的API：
  • 遵循现代Web标准，避免使用过时的技术
  • 

4. SEO

• 优化元数据：
  • 确保每个页面都有唯一且描述性的标题和元描述
• 结构化数据：
  • 使用结构化数据帮助搜索引擎理解页面内容
• URL结构：
  • 使用简洁和描述性的URL，避免使用长查询字符串

三. 其他方面

• 插入Google Analytics：
  • 记得需要给每个页面插入谷歌检测插件，监测网站性能和数据
  • 详细的插入方法可以参考Google官方文档：在跟踪代码管理器中设置 Google Analytics