优化关键渲染路径

伊利亚·格里戈里克
Ilya Grigorik

为了尽可能快地完成首次渲染,我们需要最大限度地缩短以下三个变量:

  • 关键资源的数量。
  • 关键路径长度。
  • 关键字节数。

关键资源是可能会阻止网页首次渲染的资源。这些资源越少,浏览器的工作量就越小,CPU 和其他资源的使用也就越少。

同样,关键路径长度是关键资源与其字节大小之间依赖关系图的函数:某些资源下载只能在前一个资源处理完毕后才能启动,资源越大,下载所需的往返次数就越多。

最后,浏览器需要下载的关键字节越少,处理内容并将其渲染到屏幕上的速度就越快。为了减少字节数,我们可以减少资源数量(将其删除或设为非关键资源),并通过压缩和优化每个资源来确保最大限度减小传输大小。

优化关键渲染路径的一般步骤顺序如下

  1. 分析关键路径并总结其特征:资源数量、字节数、长度。
  2. 尽可能减少关键资源的数量:删除、延迟下载、标记为异步等。
  3. 优化关键字节数以缩短下载时间(往返次数)。
  4. 优化其余关键资源的加载顺序:尽早下载所有关键资产,以缩短关键路径长度。

反馈