Test LCP viewport stat

[rviscomi]

Fixes for the performance custom metric:

• getComputedStyle already handles specificity/importance so no need to merge with inline styles
• percentage of viewport should be * 100 to make it an int, not / 100

Also outputs the LCP viewport percentage as a standalone field

Test websites:

• https://maxiclimber.com/
• https://fancy-confused-apparel.glitch.me/

[github-actions]

Custom metrics for https://almanac.httparchive.org/en/2022/

WPT test run results: http://webpagetest.httparchive.org/results.php?test=231207_D8_A

Custom metrics for https://maxiclimber.com/

WPT test run results: http://webpagetest.httparchive.org/results.php?test=231207_16_C
Changed custom metrics values:

{
    "_performance": {
        "lcp_elem_stats": {
            "startTime": 6342.10000000149,
            "nodeName": "VIDEO",
            "url": "https://cdn.shopify.com/videos/c/o/v/8557b5c7914741a9a08bae8e565a481c.mp4",
            "size": 661388,
            "loadTime": 0,
            "renderTime": 6342.10000000149,
            "attributes": [
                {
                    "name": "src",
                    "value": "https://cdn.shopify.com/videos/c/o/v/8557b5c7914741a9a08bae8e565a481c.mp4"
                },
                {
                    "name": "autoplay",
                    "value": ""
                },
                {
                    "name": "loop",
                    "value": ""
                },
                {
                    "name": "playsinline",
                    "value": ""
                },
                {
                    "name": "muted",
                    "value": ""
                }
            ],
            "boundingClientRect": {
                "x": 0,
                "y": 16.65625,
                "width": 1351,
                "height": 768.375,
                "top": 16.65625,
                "right": 1351,
                "bottom": 785.03125,
                "left": 0
            },
            "styles": {
                "background-image": "none",
                "pointer-events": "none",
                "position": "absolute",
                "width": "1351px",
                "height": "768.375px"
            },
            "percentOfViewport": "0.965",
            "cover90viewport": true
        },
        "raw_lcp_element": null,
        "lcp_resource": {
            "id": "16229.193",
            "sequence": 61,
            "body": "/home/pmeenan/wptagent/work/wptagent-manual-221206-10.240.0.22/231207_16_C.1.0/bodies/16229.193",
            "url": "https://cdn.shopify.com/videos/c/o/v/8557b5c7914741a9a08bae8e565a481c.mp4",
            "status": 206,
            "connectionId": 0,
            "protocol": "h3",
            "connectionReused": true,
            "fromServiceWorker": false,
            "timing": {
                "requestTime": 38354.382427,
                "proxyStart": -1,
                "proxyEnd": -1,
                "dnsStart": -1,
                "dnsEnd": -1,
                "connectStart": -1,
                "connectEnd": -1,
                "sslStart": -1,
                "sslEnd": -1,
                "workerStart": -1,
                "workerReady": -1,
                "workerFetchStart": -1,
                "workerRespondWithSettled": -1,
                "sendStart": 0.705,
                "sendEnd": 1.053,
                "pushStart": 0,
                "pushEnd": 0,
                "receiveHeadersStart": 2227.119,
                "receiveHeadersEnd": 2227.702
            },
            "fromDiskCache": false,
            "remoteIPAddress": "23.227.60.200",
            "remotePort": 443,
            "securityState": "secure",
            "securityDetails": {
                "protocol": "QUIC",
                "keyExchange": "",
                "keyExchangeGroup": "X25519",
                "cipher": "AES_128_GCM",
                "certificateId": 0,
                "subjectName": "cdn.shopify.com",
                "sanList": [
                    "cdn.shopify.com"
                ],
                "issuer": "E1",
                "validFrom": 1699448711,
                "validTo": 1707224710,
                "signedCertificateTimestampList": [
                    {
                        "status": "Verified",
                        "origin": "Embedded in certificate",
                        "logDescription": "DigiCert Yeti2024 Log",
                        "logId": "48B0E36BDAA647340FE56A02FA9D30EB1C5201CB56DD2C81D9BBBFAB39D88473",
                        "timestamp": 1699452311914,
                        "hashAlgorithm": "SHA-256",
                        "signatureAlgorithm": "ECDSA",
                        "signatureData": "3044022070335A8958AF0F84E07637850537D419000DA8CD38FE01C6A20CFF00A41EC9FE02207521441C74BC878265E84568E5A490DAD9963C43F0E2D72BE8C9E495F7DAFA08"
                    },
                    {
                        "status": "Verified",
                        "origin": "Embedded in certificate",
                        "logDescription": "Google 'Xenon2024' log",
                        "logId": "76FF883F0AB6FB9551C261CCF587BA34B4A4CDBB29DC68420A9FE6674C5A3A74",
                        "timestamp": 1699452311995,
                        "hashAlgorithm": "SHA-256",
                        "signatureAlgorithm": "ECDSA",
                        "signatureData": "304402206B60D739B18AC35BDC4CC5939DE6629E4CE73BF0D945813996049310A5CB631102202CD8AF4F055E18E4481B91B3F8A6B7B5836A43F10328CB02E6F79D80E5E3B863"
                    }
                ],
                "certificateTransparencyCompliance": "compliant",
                "serverSignatureAlgorithm": 1027,
                "encryptedClientHello": false
            },
            "fromPrefetchCache": false,
            "response_headers": {
                "Content-Length": "3022466",
                "Content-Range": "bytes 0-3022465/3022466",
                "access-control-allow-origin": "*",
                "age": "148242",
                "alt-svc": "h3=\":443\"; ma=86400",
                "cache-control": "public, max-age=31536000",
                "cf-cache-status": "HIT",
                "cf-ray": "831d71955e796908-IAD",
                "content-type": "video/mp4",
                "date": "Thu, 07 Dec 2023 14:26:26 GMT",
                "last-modified": "Wed, 29 Nov 2023 10:15:48 GMT",
                "link": "<https://cdn.shopify.com/videos/c/o/v/8557b5c7914741a9a08bae8e565a481c.mp4>; rel=\"canonical\"",
                "nel": "{\"success_fraction\":0.01,\"report_to\":\"cf-nel\",\"max_age\":604800}",
                "report-to": "{\"endpoints\":[{\"url\":\"https:\\/\\/a.nel.cloudflare.com\\/report\\/v3?s=ftROSWFwbE6OkP%2FnjWEQwIO1zxe1mocowO7hqfTsgvoAD71ZkFD%2B285Qd7sTnnJ2L7ZIn0yTrRkykMcSardzuPiUtEq9vBtllLRmtaIFrbSY4GMHQeA6iupn1vG0ZIxXtw%3D%3D\"}],\"group\":\"cf-nel\",\"max_age\":604800}",
                "server": "cloudflare",
                "server-timing": "imagery;dur=161.887\nimageryFetch;dur=161.557\ncfRequestDuration;dur=14.999866",
                "strict-transport-security": "max-age=15552000; includeSubDomains; preload",
                "timing-allow-origin": "*",
                "vary": "Accept-Encoding",
                "x-content-type-options": "nosniff",
                "x-dc": "gcp-us-east1,gcp-us-central1",
                "x-request-id": "3cd85954-f638-4f9a-be7b-b20431c27ea3",
                "x-xss-protection": "1; mode=block"
            },
            "request_headers": {
                ":authority": "cdn.shopify.com",
                ":method": "GET",
                ":path": "/videos/c/o/v/8557b5c7914741a9a08bae8e565a481c.mp4",
                ":scheme": "https",
                "accept": "*/*",
                "accept-encoding": "identity;q=1, *;q=0",
                "accept-language": "en-US,en;q=0.9",
                "range": "bytes=0-",
                "referer": "https://maxiclimber.com/",
                "sec-ch-ua": "\" Not A;Brand\";v=\"99\", \"Chromium\";v=\"120\", \"Google Chrome\";v=\"120\"",
                "sec-ch-ua-mobile": "?0",
                "sec-ch-ua-platform": "\"Unknown\"",
                "sec-fetch-dest": "video",
                "sec-fetch-mode": "no-cors",
                "sec-fetch-site": "cross-site",
                "user-agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 PTST/231204.170811"
            },
            "initiator": {
                "type": "parser",
                "url": "https://maxiclimber.com/",
                "lineNumber": 3297,
                "columnNumber": 122
            },
            "documentURL": "https://maxiclimber.com/",
            "timestamp": 38354.381815,
            "frameId": "1EB9385F298890BBA1CF778E1692B27F",
            "hasUserGesture": false,
            "type": "Media",
            "wallTime": 1701959186.750988,
            "initialPriority": "Low",
            "priority": "Low",
            "transfer_size": 3024715
        },
        "is_lcp_statically_discoverable": false,
        "is_lcp_preloaded": false,
        "lcp_preload": [],
        "web_vitals_js": [
            "https://maxiclimber.com/cdn/shopifycloud/boomerang/shopify-boomerang-1.0.0.min.js",
            "https://cdn.shopify.com/shopifycloud/checkout-web/assets/441.latest.en.04eff29e3df2d466c911.js"
        ],
        "gaming_metrics": {
            "fidIframeOverlaySoft": false,
            "lcpOverlaySoft": true
        }
    }
}

Custom metrics for https://fancy-confused-apparel.glitch.me/

WPT test run results: http://webpagetest.httparchive.org/results.php?test=231207_N2_D
Changed custom metrics values:

{
    "_performance": {
        "lcp_elem_stats": {
            "startTime": 286.79999999701977,
            "nodeName": "DIV",
            "url": "",
            "size": 314028,
            "loadTime": 0,
            "renderTime": 286.79999999701977,
            "attributes": [
                {
                    "name": "class",
                    "value": "theme-wv"
                }
            ],
            "boundingClientRect": {
                "x": 10,
                "y": 10,
                "width": 1346,
                "height": 671,
                "top": 10,
                "right": 1356,
                "bottom": 681,
                "left": 10
            },
            "styles": {
                "background-image": "none",
                "pointer-events": "none",
                "position": "fixed",
                "width": "1346px",
                "height": "671px"
            },
            "percentOfViewport": "0.957",
            "cover90viewport": true
        },
        "raw_lcp_element": null,
        "lcp_resource": null,
        "is_lcp_statically_discoverable": true,
        "is_lcp_preloaded": null,
        "lcp_preload": null,
        "web_vitals_js": [],
        "gaming_metrics": {
            "lcpOverlaySoft": true
        }
    }
}