关键请求链

为什么说此审查非常重要

关键请求链这个概念源自关键渲染路径 (CRP) 优化策略。 CRP 通过确定优先加载的资源以及加载顺序,允许浏览器尽可能快地加载页面。

请参阅关键渲染路径文档了解详情。

如何通过此审查

目前,此审查不采用“通过”或“未通过”这种结构。其提供的信息让您有机会改进您的应用的页面加载性能。

在 Lighthouse 的 Chrome 扩展程序版本中,您的报告将生成一个类似如下的图表:

Initial navigation
|---lighthouse/ (developers.google.com)
    |---/css (fonts.googleapis.com) - 1058.34ms, 72.80KB
    |---css/devsite-googler-buttons.css (developers.google.com) - 1147.25ms, 70.77KB
    |---jsi18n/ (developers.google.com) - 1155.12ms, 71.20KB
    |---css/devsite-google-blue.css (developers.google.com) - 2034.57ms, 85.83KB
    |---2.2.0/jquery.min.js (ajax.googleapis.com) - 2699.55ms, 99.92KB
    |---contributors/kaycebasques.jpg (developers.google.com) - 2841.54ms, 84.74KB
    |---MC30SXJEli4/photo.jpg (lh3.googleusercontent.com) - 3200.39ms, 73.59KB

此图表表示页面的关键请求链。从 lighthouse//css 的路径形成一条链。 从 lighthouse/css/devsite-googler-buttons.css 的路径形成另一条链。 以此类推。审查的最高得分体现了这些链条的数量。 例如,上面的图表的“分数”为七分。

该图表也详细列出下载每个资源花了多少时间,以及下载每个资源所需的字节数。

您可以根据此图表利用以下方式提升您的 CRP:

  • 将关键资源数降至最低:消除关键资源、延迟关键资源的下载并将它们标记为不同步等。

  • 优化关键字节数以缩短下载时间(往返次数)。

  • 优化其余关键资源的加载顺序:尽早下载所有关键资产,以缩短关键路径长度。

优化以上任一因素都可提升页面加载速度。

如何实现此审查

本部分介绍如何实现此审查,以便您可以了解计算此审查得分的方式。

Lighthouse 使用网络优先级作为代理以识别阻塞渲染的关键资源。 有关 Chrome 如何定义这些优先级的更多信息,请参阅 Chrome 资源优先级和调度

可通过 Chrome Debugger Protocol 提取有关关键请求链、资源大小和下载资源所花时间的数据。