Performance 2022 custom metrics

[rviscomi]

Progress on #16 https://github.com/HTTPArchive/almanac.httparchive.org/issues/2890

Additional metadata about the LCP element:

• is_lcp_discoverable: boolean whether it was discoverable in the raw HTML
• is_lcp_preloaded: boolean whether it was preloaded
• boundingClientRect: dimensions and position of the rendered element
• naturalHeight, naturalWidth: intrinsic image dimensions
• lcp_resource: full WPT response metadata
• raw_lcp_element: node name and attributes of the element in the raw HTML
• styles: allowlist of computed style prop/value pairs, set to background-image for now

Everything is applicable to images. The boundingClientRect will also be available for text-based LCP elements.

Tests

• Image preloaded image, not discoverable
  • URL: https://rviscomi.github.io/demos/lcp_preloaded.html
  • Results: https://webpagetest.httparchive.org/result/220526_QT_12/1/details/#waterfall_view_step1
• Image not preloaded, discoverable
  • URL: https://www.nytimes.com/
  • Results: https://webpagetest.httparchive.org/result/220526_ND_10/1/details/#waterfall_view_step1
• Sourceset image not preloaded, discoverable
  • URL: https://almanac.httparchive.org/en/2021/css
  • Results: https://webpagetest.httparchive.org/result/220526_EE_14/1/details/#waterfall_view_step1
• Background image not preloaded, not discoverable?
  • URL: https://codepen.io/rviscomi/pen/wvyPQoM
  • Results: https://webpagetest.httparchive.org/result/220526_H2_15/1/details/#waterfall_view_step1
• Not an image
  • URL: https://www.example.com/
  • Results: https://webpagetest.httparchive.org/result/220526_V1_11/1/details/#waterfall_view_step1

[rviscomi]

Background image not preloaded, not discoverable?

This is an interesting case. The metric evaluates to not discoverable because there is no src or srcset on the page set to that image URL. But lcp_resource.initiator.type is "parser" so it seems to be discoverable? That might only be the case because the CSS is in an inline style block, haven't tested it with an external stylesheet. Should we drop the discoverable field and always check the initiator type?

[mel-ada]

For my own knowledge - does the fact that the full HAR data is added give us the info we need here?

Background image not preloaded, not discoverable?

This is an interesting case. The metric evaluates to not discoverable because there is no src or srcset on the page set to that image URL. But lcp_resource.initiator.type is "parser" so it seems to be discoverable? That might only be the case because the CSS is in an inline style block, haven't tested it with an external stylesheet. Should we drop the discoverable field and always check the initiator type?

[rviscomi]

Yeah hopefully that gives us enough metadata to figure it out later in SQL if there were any false negatives. We can analyze the next crawl to see how reliable the discoverable field is vs initiator.type.