Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Log URL metrics group collection to console when WP_DEBUG #1295

Merged
merged 1 commit into from
Jun 10, 2024

Conversation

westonruter
Copy link
Member

This greatly facilitates debugging why a given page is not being optimized as expected by dumping the full URL metrics group collection data to the console when WP_DEBUG is enabled:

image

Example JSON
{
    "breakpoints": [
        480,
        600,
        782
    ],
    "freshness_ttl": 0,
    "sample_size": 1,
    "all_element_max_intersection_ratios": {
        "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[1][self::A]/*[2][self::IMG]": 1,
        "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[2][self::DIV]/*[1][self::UL]/*[1][self::LI]/*[1][self::A]/*[1][self::IMG]": 0,
        "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]": 1,
        "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[12][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]": 0,
        "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[13][self::FIGURE]/*[1][self::IMG]": 0
    },
    "common_lcp_element": {
        "isLCP": true,
        "isLCPCandidate": true,
        "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
        "intersectionRatio": 0.8381723761558533,
        "intersectionRect": {
            "x": 14.999999046325684,
            "y": 417.8759460449219,
            "width": 446.2499694824219,
            "height": 243.99900817871094,
            "top": 417.8759460449219,
            "right": 461.24996852874756,
            "bottom": 661.8749542236328,
            "left": 14.999999046325684
        },
        "boundingClientRect": {
            "x": 14.999999046325684,
            "y": 417.8759460449219,
            "width": 446.2499694824219,
            "height": 291.1083679199219,
            "top": 417.8759460449219,
            "right": 461.24996852874756,
            "bottom": 708.9843139648438,
            "left": 14.999999046325684
        }
    },
    "every_group_complete": false,
    "every_group_populated": true,
    "groups": [
        {
            "minimum_viewport_width": 0,
            "maximum_viewport_width": 480,
            "lcp_element": {
                "isLCP": true,
                "isLCPCandidate": true,
                "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                "intersectionRatio": 0.8381723761558533,
                "intersectionRect": {
                    "x": 14.999999046325684,
                    "y": 417.8759460449219,
                    "width": 446.2499694824219,
                    "height": 243.99900817871094,
                    "top": 417.8759460449219,
                    "right": 461.24996852874756,
                    "bottom": 661.8749542236328,
                    "left": 14.999999046325684
                },
                "boundingClientRect": {
                    "x": 14.999999046325684,
                    "y": 417.8759460449219,
                    "width": 446.2499694824219,
                    "height": 291.1083679199219,
                    "top": 417.8759460449219,
                    "right": 461.24996852874756,
                    "bottom": 708.9843139648438,
                    "left": 14.999999046325684
                }
            },
            "complete": false,
            "url_metrics": [
                {
                    "url": "http://localhost:8888/2024/06/10/bison/",
                    "viewport": {
                        "width": 476,
                        "height": 662
                    },
                    "elements": [
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[1][self::A]/*[2][self::IMG]",
                            "intersectionRatio": 1,
                            "intersectionRect": {
                                "x": 438.3984069824219,
                                "y": 8.994139671325684,
                                "width": 27.861326217651367,
                                "height": 27.861326217651367,
                                "top": 8.994139671325684,
                                "right": 466.25973320007324,
                                "bottom": 36.85546588897705,
                                "left": 438.3984069824219
                            },
                            "boundingClientRect": {
                                "x": 438.3984069824219,
                                "y": 8.994139671325684,
                                "width": 27.861326217651367,
                                "height": 27.861326217651367,
                                "top": 8.994139671325684,
                                "right": 466.25973320007324,
                                "bottom": 36.85546588897705,
                                "left": 438.3984069824219
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[2][self::DIV]/*[1][self::UL]/*[1][self::LI]/*[1][self::A]/*[1][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            }
                        },
                        {
                            "isLCP": true,
                            "isLCPCandidate": true,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                            "intersectionRatio": 0.8381723761558533,
                            "intersectionRect": {
                                "x": 14.999999046325684,
                                "y": 417.8759460449219,
                                "width": 446.2499694824219,
                                "height": 243.99900817871094,
                                "top": 417.8759460449219,
                                "right": 461.24996852874756,
                                "bottom": 661.8749542236328,
                                "left": 14.999999046325684
                            },
                            "boundingClientRect": {
                                "x": 14.999999046325684,
                                "y": 417.8759460449219,
                                "width": 446.2499694824219,
                                "height": 291.1083679199219,
                                "top": 417.8759460449219,
                                "right": 461.24996852874756,
                                "bottom": 708.9843139648438,
                                "left": 14.999999046325684
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[12][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 14.999999046325684,
                                "y": 5754.38916015625,
                                "width": 446.2499694824219,
                                "height": 293.2763366699219,
                                "top": 5754.38916015625,
                                "right": 461.24996852874756,
                                "bottom": 6047.665496826172,
                                "left": 14.999999046325684
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[13][self::FIGURE]/*[1][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 14.999999046325684,
                                "y": 6067.63134765625,
                                "width": 446.2499694824219,
                                "height": 297.7880554199219,
                                "top": 6067.63134765625,
                                "right": 461.24996852874756,
                                "bottom": 6365.419403076172,
                                "left": 14.999999046325684
                            }
                        }
                    ],
                    "timestamp": 1718052399.520041
                }
            ]
        },
        {
            "minimum_viewport_width": 481,
            "maximum_viewport_width": 600,
            "lcp_element": {
                "isLCP": true,
                "isLCPCandidate": true,
                "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                "intersectionRatio": 1,
                "intersectionRect": {
                    "x": 49.995113372802734,
                    "y": 469.3652038574219,
                    "width": 394.0575866699219,
                    "height": 257.0507507324219,
                    "top": 469.3652038574219,
                    "right": 444.0527000427246,
                    "bottom": 726.4159545898438,
                    "left": 49.995113372802734
                },
                "boundingClientRect": {
                    "x": 49.995113372802734,
                    "y": 469.3652038574219,
                    "width": 394.0575866699219,
                    "height": 257.0507507324219,
                    "top": 469.3652038574219,
                    "right": 444.0527000427246,
                    "bottom": 726.4159545898438,
                    "left": 49.995113372802734
                }
            },
            "complete": false,
            "url_metrics": [
                {
                    "url": "http://localhost:8888/2024/06/10/bison/",
                    "viewport": {
                        "width": 494,
                        "height": 1027
                    },
                    "elements": [
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[1][self::A]/*[2][self::IMG]",
                            "intersectionRatio": 1,
                            "intersectionRect": {
                                "x": 456.2109069824219,
                                "y": 8.994139671325684,
                                "width": 27.861326217651367,
                                "height": 27.861326217651367,
                                "top": 8.994139671325684,
                                "right": 484.07223320007324,
                                "bottom": 36.85546588897705,
                                "left": 456.2109069824219
                            },
                            "boundingClientRect": {
                                "x": 456.2109069824219,
                                "y": 8.994139671325684,
                                "width": 27.861326217651367,
                                "height": 27.861326217651367,
                                "top": 8.994139671325684,
                                "right": 484.07223320007324,
                                "bottom": 36.85546588897705,
                                "left": 456.2109069824219
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[2][self::DIV]/*[1][self::UL]/*[1][self::LI]/*[1][self::A]/*[1][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            }
                        },
                        {
                            "isLCP": true,
                            "isLCPCandidate": true,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                            "intersectionRatio": 1,
                            "intersectionRect": {
                                "x": 49.995113372802734,
                                "y": 469.3652038574219,
                                "width": 394.0575866699219,
                                "height": 257.0507507324219,
                                "top": 469.3652038574219,
                                "right": 444.0527000427246,
                                "bottom": 726.4159545898438,
                                "left": 49.995113372802734
                            },
                            "boundingClientRect": {
                                "x": 49.995113372802734,
                                "y": 469.3652038574219,
                                "width": 394.0575866699219,
                                "height": 257.0507507324219,
                                "top": 469.3652038574219,
                                "right": 444.0527000427246,
                                "bottom": 726.4159545898438,
                                "left": 49.995113372802734
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[12][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 49.995113372802734,
                                "y": 6561.88427734375,
                                "width": 394.0575866699219,
                                "height": 258.9843444824219,
                                "top": 6561.88427734375,
                                "right": 444.0527000427246,
                                "bottom": 6820.868621826172,
                                "left": 49.995113372802734
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[13][self::FIGURE]/*[1][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 49.995113372802734,
                                "y": 6850.86865234375,
                                "width": 394.0575866699219,
                                "height": 262.9540710449219,
                                "top": 6850.86865234375,
                                "right": 444.0527000427246,
                                "bottom": 7113.822723388672,
                                "left": 49.995113372802734
                            }
                        }
                    ],
                    "timestamp": 1718048401.642205
                }
            ]
        },
        {
            "minimum_viewport_width": 601,
            "maximum_viewport_width": 782,
            "lcp_element": {
                "isLCP": true,
                "isLCPCandidate": true,
                "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                "intersectionRatio": 1,
                "intersectionRect": {
                    "x": 49.995113372802734,
                    "y": 469.3652038574219,
                    "width": 519.6825561523438,
                    "height": 339.0087585449219,
                    "top": 469.3652038574219,
                    "right": 569.6776695251465,
                    "bottom": 808.3739624023438,
                    "left": 49.995113372802734
                },
                "boundingClientRect": {
                    "x": 49.995113372802734,
                    "y": 469.3652038574219,
                    "width": 519.6825561523438,
                    "height": 339.0087585449219,
                    "top": 469.3652038574219,
                    "right": 569.6776695251465,
                    "bottom": 808.3739624023438,
                    "left": 49.995113372802734
                }
            },
            "complete": false,
            "url_metrics": [
                {
                    "url": "http://localhost:8888/2024/06/10/bison/",
                    "viewport": {
                        "width": 620,
                        "height": 1027
                    },
                    "elements": [
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[1][self::A]/*[2][self::IMG]",
                            "intersectionRatio": 1,
                            "intersectionRect": {
                                "x": 581.8358764648438,
                                "y": 8.994139671325684,
                                "width": 27.861326217651367,
                                "height": 27.861326217651367,
                                "top": 8.994139671325684,
                                "right": 609.6972026824951,
                                "bottom": 36.85546588897705,
                                "left": 581.8358764648438
                            },
                            "boundingClientRect": {
                                "x": 581.8358764648438,
                                "y": 8.994139671325684,
                                "width": 27.861326217651367,
                                "height": 27.861326217651367,
                                "top": 8.994139671325684,
                                "right": 609.6972026824951,
                                "bottom": 36.85546588897705,
                                "left": 581.8358764648438
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[2][self::DIV]/*[1][self::UL]/*[1][self::LI]/*[1][self::A]/*[1][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            }
                        },
                        {
                            "isLCP": true,
                            "isLCPCandidate": true,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                            "intersectionRatio": 1,
                            "intersectionRect": {
                                "x": 49.995113372802734,
                                "y": 469.3652038574219,
                                "width": 519.6825561523438,
                                "height": 339.0087585449219,
                                "top": 469.3652038574219,
                                "right": 569.6776695251465,
                                "bottom": 808.3739624023438,
                                "left": 49.995113372802734
                            },
                            "boundingClientRect": {
                                "x": 49.995113372802734,
                                "y": 469.3652038574219,
                                "width": 519.6825561523438,
                                "height": 339.0087585449219,
                                "top": 469.3652038574219,
                                "right": 569.6776695251465,
                                "bottom": 808.3739624023438,
                                "left": 49.995113372802734
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[12][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 49.995113372802734,
                                "y": 5250.48291015625,
                                "width": 519.6825561523438,
                                "height": 341.5429382324219,
                                "top": 5250.48291015625,
                                "right": 569.6776695251465,
                                "bottom": 5592.025848388672,
                                "left": 49.995113372802734
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[13][self::FIGURE]/*[1][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 49.995113372802734,
                                "y": 5622.02587890625,
                                "width": 519.6825561523438,
                                "height": 346.7870788574219,
                                "top": 5622.02587890625,
                                "right": 569.6776695251465,
                                "bottom": 5968.812957763672,
                                "left": 49.995113372802734
                            }
                        }
                    ],
                    "timestamp": 1718048405.967935
                }
            ]
        },
        {
            "minimum_viewport_width": 783,
            "maximum_viewport_width": 9223372036854776000,
            "lcp_element": {
                "isLCP": true,
                "isLCPCandidate": true,
                "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                "intersectionRatio": 1,
                "intersectionRect": {
                    "x": 219.53611755371094,
                    "y": 522.5829467773438,
                    "width": 609.9901733398438,
                    "height": 397.9101257324219,
                    "top": 522.5829467773438,
                    "right": 829.5262908935547,
                    "bottom": 920.4930725097656,
                    "left": 219.53611755371094
                },
                "boundingClientRect": {
                    "x": 219.53611755371094,
                    "y": 522.5829467773438,
                    "width": 609.9901733398438,
                    "height": 397.9101257324219,
                    "top": 522.5829467773438,
                    "right": 829.5262908935547,
                    "bottom": 920.4930725097656,
                    "left": 219.53611755371094
                }
            },
            "complete": false,
            "url_metrics": [
                {
                    "url": "http://localhost:8888/2024/06/10/bison/",
                    "viewport": {
                        "width": 1049,
                        "height": 1027
                    },
                    "elements": [
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[1][self::A]/*[2][self::IMG]",
                            "intersectionRatio": 1,
                            "intersectionRect": {
                                "x": 992.2265014648438,
                                "y": 5.317382335662842,
                                "width": 17.871091842651367,
                                "height": 17.871091842651367,
                                "top": 5.317382335662842,
                                "right": 1010.0975933074951,
                                "bottom": 23.18847417831421,
                                "left": 992.2265014648438
                            },
                            "boundingClientRect": {
                                "x": 992.2265014648438,
                                "y": 5.317382335662842,
                                "width": 17.871091842651367,
                                "height": 17.871091842651367,
                                "top": 5.317382335662842,
                                "right": 1010.0975933074951,
                                "bottom": 23.18847417831421,
                                "left": 992.2265014648438
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[2][self::DIV]/*[1][self::UL]/*[1][self::LI]/*[1][self::A]/*[1][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            }
                        },
                        {
                            "isLCP": true,
                            "isLCPCandidate": true,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                            "intersectionRatio": 1,
                            "intersectionRect": {
                                "x": 219.53611755371094,
                                "y": 522.5829467773438,
                                "width": 609.9901733398438,
                                "height": 397.9101257324219,
                                "top": 522.5829467773438,
                                "right": 829.5262908935547,
                                "bottom": 920.4930725097656,
                                "left": 219.53611755371094
                            },
                            "boundingClientRect": {
                                "x": 219.53611755371094,
                                "y": 522.5829467773438,
                                "width": 609.9901733398438,
                                "height": 397.9101257324219,
                                "top": 522.5829467773438,
                                "right": 829.5262908935547,
                                "bottom": 920.4930725097656,
                                "left": 219.53611755371094
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[12][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 219.53611755371094,
                                "y": 4784.86767578125,
                                "width": 609.9901733398438,
                                "height": 400.8984069824219,
                                "top": 4784.86767578125,
                                "right": 829.5262908935547,
                                "bottom": 5185.766082763672,
                                "left": 219.53611755371094
                            }
                        },
                        {
                            "isLCP": false,
                            "isLCPCandidate": false,
                            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[13][self::FIGURE]/*[1][self::IMG]",
                            "intersectionRatio": 0,
                            "intersectionRect": {
                                "x": 0,
                                "y": 0,
                                "width": 0,
                                "height": 0,
                                "top": 0,
                                "right": 0,
                                "bottom": 0,
                                "left": 0
                            },
                            "boundingClientRect": {
                                "x": 219.53611755371094,
                                "y": 5215.76611328125,
                                "width": 609.9901733398438,
                                "height": 407.0507507324219,
                                "top": 5215.76611328125,
                                "right": 829.5262908935547,
                                "bottom": 5622.816864013672,
                                "left": 219.53611755371094
                            }
                        }
                    ],
                    "timestamp": 1718049314.755356
                }
            ]
        }
    ]
}

This is the URL metrics data which was used to optimize the page. It is in addition to any new URL metrics which are gathered via the detection logic and are also logged to the console:

image

Example JSON
{
    "url": "http://localhost:8888/2024/06/10/bison/",
    "slug": "92be7e8293bdbccfd5660691e16eb6c4",
    "nonce": "ec8038c842",
    "viewport": {
        "width": 476,
        "height": 95
    },
    "elements": [
        {
            "isLCP": false,
            "isLCPCandidate": false,
            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[1][self::A]/*[2][self::IMG]",
            "intersectionRatio": 1,
            "intersectionRect": {
                "x": 438.3984069824219,
                "y": 8.994139671325684,
                "width": 27.861326217651367,
                "height": 27.861326217651367,
                "top": 8.994139671325684,
                "right": 466.25973320007324,
                "bottom": 36.85546588897705,
                "left": 438.3984069824219
            },
            "boundingClientRect": {
                "x": 438.3984069824219,
                "y": 8.994139671325684,
                "width": 27.861326217651367,
                "height": 27.861326217651367,
                "top": 8.994139671325684,
                "right": 466.25973320007324,
                "bottom": 36.85546588897705,
                "left": 438.3984069824219
            }
        },
        {
            "isLCP": false,
            "isLCPCandidate": false,
            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[2][self::DIV]/*[1][self::DIV]/*[2][self::UL]/*[1][self::LI]/*[2][self::DIV]/*[1][self::UL]/*[1][self::LI]/*[1][self::A]/*[1][self::IMG]",
            "intersectionRatio": 0,
            "intersectionRect": {
                "x": 0,
                "y": 0,
                "width": 0,
                "height": 0,
                "top": 0,
                "right": 0,
                "bottom": 0,
                "left": 0
            },
            "boundingClientRect": {
                "x": 0,
                "y": 0,
                "width": 0,
                "height": 0,
                "top": 0,
                "right": 0,
                "bottom": 0,
                "left": 0
            }
        },
        {
            "isLCP": false,
            "isLCPCandidate": false,
            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[1][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
            "intersectionRatio": 0,
            "intersectionRect": {
                "x": 0,
                "y": 0,
                "width": 0,
                "height": 0,
                "top": 0,
                "right": 0,
                "bottom": 0,
                "left": 0
            },
            "boundingClientRect": {
                "x": 14.999999046325684,
                "y": 417.8759460449219,
                "width": 446.2499694824219,
                "height": 291.1083679199219,
                "top": 417.8759460449219,
                "right": 461.24996852874756,
                "bottom": 708.9843139648438,
                "left": 14.999999046325684
            }
        },
        {
            "isLCP": false,
            "isLCPCandidate": false,
            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[12][self::FIGURE]/*[1][self::PICTURE]/*[3][self::IMG]",
            "intersectionRatio": 0,
            "intersectionRect": {
                "x": 0,
                "y": 0,
                "width": 0,
                "height": 0,
                "top": 0,
                "right": 0,
                "bottom": 0,
                "left": 0
            },
            "boundingClientRect": {
                "x": 14.999999046325684,
                "y": 5754.38916015625,
                "width": 446.2499694824219,
                "height": 293.2763366699219,
                "top": 5754.38916015625,
                "right": 461.24996852874756,
                "bottom": 6047.665496826172,
                "left": 14.999999046325684
            }
        },
        {
            "isLCP": false,
            "isLCPCandidate": false,
            "xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[3][self::DIV]/*[3][self::DIV]/*[1][self::DIV]/*[1][self::MAIN]/*[1][self::ARTICLE]/*[2][self::DIV]/*[13][self::FIGURE]/*[1][self::IMG]",
            "intersectionRatio": 0,
            "intersectionRect": {
                "x": 0,
                "y": 0,
                "width": 0,
                "height": 0,
                "top": 0,
                "right": 0,
                "bottom": 0,
                "left": 0
            },
            "boundingClientRect": {
                "x": 14.999999046325684,
                "y": 6067.63134765625,
                "width": 446.2499694824219,
                "height": 297.7880554199219,
                "top": 6067.63134765625,
                "right": 461.24996852874756,
                "bottom": 6365.419403076172,
                "left": 14.999999046325684
            }
        }
    ]
}

Copy link

github-actions bot commented Jun 10, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: westonruter <[email protected]>
Co-authored-by: joemcgill <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@westonruter westonruter added [Type] Enhancement A suggestion for improvement of an existing feature [Plugin] Optimization Detective Issues for the Optimization Detective plugin labels Jun 10, 2024
Copy link
Member

@joemcgill joemcgill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me 👍🏻

@westonruter westonruter merged commit e1962ef into trunk Jun 10, 2024
23 of 25 checks passed
@westonruter westonruter deleted the add/od-debug branch June 10, 2024 22:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Plugin] Optimization Detective Issues for the Optimization Detective plugin [Type] Enhancement A suggestion for improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants