Support main-resource metrics (i.e. metrics on inlined content)

[khempenius]

Motivation
The size of the main resource, including any inlined content, currently counts towards the
document category in LightWallet. The role of the main resource is unique, so although it is correct to consider it a document, not providing more information on its size or contents is unhelpful. This feature would have the largest impact on:

• sites that load a significant number of documents besides the main resource
• the 10-25% of sites with large main resources (main resource size: p75 = 25KB, p90 = 50KB).

Implementation: Budget.json
An additional resourceType, main-resource, will be added to LightWallet. Budgets can be set for main-resource just like any other resourceType supported by LightWallet.

This has no impact on the usage of the document resourceType. The main resource is a subset of document and will still be reported as such.

Implementation: Lighthouse Report
Sub-metrics on the script, stylesheet, and image content of the main resource will be reported in the Lighthouse Report.

Sub-metrics will not be included for the following resource types: document, media, font, and other:

• document: All of the main resource is a document, so it does not make sense to report this twice.
• media: While it is technically possibly to inline media (example), usage is ~0%.
• font: Fonts are typically inlined through stylesheets.
• other: In addition to it being difficult to directly classify something as other, this classification could also be ambiguous. In the context of this feature, other would imply a resource that is not a script, image, or stylesheet. However, in the browser and elsewhere in LightWallet other refers to a smaller subset of content than this.

Implementation: Content Classification

• Inline scripts are identified by <script> tags without the src attribute.

• Inline stylesheets are identified by <stylesheet> tags without the src attribute.

• Inline images are identified by <img> tags using data URLs.

  Inlined images within inlined stylesheets
  Inlined images within inlined stylesheets would only count towards main resource stylesheet
  size rather than both the main resource stylesheet size and main resource image size. This
  removes the need to parse the stylesheet. In addition, I believe this interpretation is probably
  more intuitive to most users. For example, if images counted towards both totals, it could
  appear that the combined contents of the main resource exceed the size of the main resource
  itself (which would be a bug).

  Known limitations
  This implementation would not attempt to categorize content inlined via tag. According
  to HTTP Archive data, only .12% (i.e. <1%) of tags use data URLs.

Implementation: Lighthouse Report (JSON)
The API below shows how additional details could be included in the JSON object for the Lighthouse report. In the future, this pattern could be applied to other resourceTypes beside main-resource. Note: it needs to be confirmed that this is compatible with Lighthouse CI’s plans for surfacing details on individual resources.

details: {
  headings: [...],
  items: [{
      resourceType: "main-resource",
      label: "Main Resource",
      requestCount: 1,
      size: 1757,
      sizeOverBudget: 1654,
      components: [
         {resourceType: "script", size: 1000},
         {resourceType: "image", size: 500},
         {resourceType: "stylehseet", size: 300}
       ]
  }]
}

[khempenius]

Discussion on naming of main-resource (or equivalent): GoogleChrome/lighthouse#9781