FP: First Paint 首次绘制操作开始的时间
此更改可能不可见,它可以使简单的背景色更新或者更不引人注意的内容。
FCP: First Contentful Paint 首次内容绘制
首次重要内容(例如文本、前景、背景图像或者画布、SVG等)绘制之前的时间。次内容不一定有用或有意义。
优化:
- 移除阻塞渲染的资源
- 减少代码体积
- 预加载资源与关联请求
- 保持较低的请求数和较小的传输大小
FMP: First Meaningful Paint 第一次有意义的绘制
有内容呈现到屏幕的时间
TTI: Time to Interactive
UI可用于用户交互的时间(即加载过程的最后一个长任务完成)
优化:
- 减小js体积与执行时间
- 减小第三方代码影响
- 预加载关键请求
- 保持较低的请求数和较小的传输大小
LCP: Largest Contentful Paint 最大绘制内容
视口中可见的最大内容元素呈现时间。
优化:
- 优化关键渲染路径
- 优化css
- 优化图片
- 优化网页字体
- 减小js体积
Speed Index
测量可见屏幕上要绘制的像素平均时间
优化:
- 最小化主线程工作
- 减少js执行时间
- 保证在自定义字体加载时文字可见
提高性能
- 最小化初始负载
尽量减少初始页面的加载。也就是说,首先下载的应该是用户即将要与之交互的内容,然后在‘后台’下载其余的内容。下载的总量可能会增加,但是用户等待的时间很少,所以感觉呈现得很快。
将交互功能于内容分开,并在初始加载时加载可见的文本、图片和样式。延迟加载初始页面不需要的内容或脚本,此外还需要优化加载的资源,图像、视频应该以最佳格式、压缩。
- 防止内容跳转和其他回流
导致内容被下推或者跳转到不同的位置的图像或其他资源,如第三方广告的加载,会使页面感觉它仍然在加载,不利于感知性能。当不是由用户交互导致的内容回流对于用户体验尤为不利。如果某些资源加载速度比其他的资源慢时,且在其他内容已经绘制完成后才加载完成的情况,请提交在布局中为其留出空间,以便内容不会跳跃或调整大小。
- 避免字体文件延迟
字体选择很重要。选择合适的字体会大大提高用户感知体验。从感知性能的角度来看,‘次优字体的导入’可能会导致在设置文本样式回退到其他字体时出现闪烁。
使用后备字体具有相同的大小和粗细,以便在加载字体时页面变化不是太明显。
- 互动元素是互动的
确保可见的交互元素始终具有交互性和响应性。如果输入的元素是可见的,用户应该能够毫无延迟的与之交互。当用户反应时间超过50ms时,会让他们觉得延迟,感觉页面表现不佳。
- 使任务发起者看起来更具交互性
在keydown上发出内容请求而不是keyup可以将感知到的内容负载减少200ms。向keyup添加一个有趣但不明显的200ms动画可以再减少200ms的感知负载。虽然并没有节省400ms的时间,但用户不会觉得他们是在等待内容加载。
总结:通过减少用户等待有用内容的时间,并保持网站的响应性和吸引力,会让用户感觉网站性能更好——即使加载资源的总体时间不变。