Skip to content

Improve construction of inline scripts with sourceURL, hardened JSON encoding, and exporting JSON in separate script #2169

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 4 commits into from
Sep 16, 2025
Merged

Improve construction of inline scripts with sourceURL, hardened JSON encoding, and exporting JSON in separate script #2169

merged 4 commits into from
Sep 16, 2025

Conversation

@westonruter
Copy link
Member

@westonruter westonruter commented Sep 10, 2025 •
edited
Loading

This is a follow-up inspired by a few core changes which either landed or which are being proposed as a best practice:

Code review from Gemini:

Overall, the changes look good. They improve the security and debuggability of the codebase. Here's a summary of the changes:

  • Security: The wp_json_encode function is now called with JSON_HEX_TAG | JSON_UNESCAPED_SLASHES in many places. This is a great security improvement to prevent XSS vulnerabilities.
  • Debugging: sourceURL has been added to several inline scripts, which will make them much easier to debug in the browser.
  • Refactoring: The Optimization Detective's detection script has been refactored to use a JSON data island (<script type="application/json">) instead of inlining the data in the script. This is a good practice that separates data from code.
  • Testing: The test suite has been updated to account for all of the above changes.

I don't have any concerns with these changes. They are well-implemented and improve the quality of the codebase.

Markup Diffs

For a page configured with content which is related to Image Prioritizer and Embed Optimizer (and Optimization Detective), the diff of the changes this PR introduces with prettier formatting, is as follows:

--- before.html	2025-09-15 22:01:00
+++ after.html	2025-09-15 21:59:33
@@ -2476,6 +2476,8 @@
           background-image: none !important;
         }
       }
+
+      /*# sourceURL=http://localhost:8000/wp-content/plugins/image-prioritizer/lazy-load-bg-image.css?ver=1.0.0-beta2 */
     </style>
     <style>
       @media (width <= 480px) {
@@ -2488,6 +2490,7 @@
           min-height: 268px;
         }
       }
+      /*# sourceURL=embed-optimizer-reduce-layout-shifts */
     </style>
   </head>
 
@@ -3577,6 +3580,8 @@
       for (const bgImageElement of bgImageElements) {
         lazyBgImageObserver.observe(bgImageElement);
       }
+
+      //# sourceURL=http://localhost:8000/wp-content/plugins/image-prioritizer/lazy-load-bg-image.js?ver=1.0.0-beta2
     </script>
     <script type="module">
       const lazyVideoObserver = new IntersectionObserver(
@@ -3619,6 +3624,8 @@
       for (const video of videos) {
         lazyVideoObserver.observe(video);
       }
+
+      //# sourceURL=http://localhost:8000/wp-content/plugins/image-prioritizer/lazy-load-video.js?ver=1.0.0-beta2
     </script>
     <script type="module">
       /**
@@ -3676,356 +3683,362 @@
           lazyEmbedObserver.observe(lazyEmbedParent);
         }
       }
+
+      //# sourceURL=http://localhost:8000/wp-content/plugins/embed-optimizer/lazy-load.js?ver=1.0.0-beta2
     </script>
-    <script type="module">
-      /**
-       * Loads the detect module after the page has loaded.
-       *
-       * This prevents a high-priority script module network request from competing with other critical resources. This
-       * JavaScript file must contain a single top-level function which is not exported. The file is inlined as part of
-       * another module which wraps the function in an IIFE.
-       *
-       * @since 1.0.0
-       *
-       * @param {string}                                   detectSrc  - The URL to detect.js.
-       * @param {import("./detect.js").DetectFunctionArgs} detectArgs - The arguments exported from PHP.
-       */
-      // eslint-disable-next-line no-unused-vars
-      (async function load(detectSrc, detectArgs) {
-        // Wait until the resources on the page have fully loaded.
-        await new Promise((resolve) => {
-          if (document.readyState === "complete") {
-            resolve();
-          } else {
-            window.addEventListener("load", resolve, { once: true });
-          }
-        });
-
-        // Wait yet further until idle.
-        if (typeof requestIdleCallback === "function") {
-          await new Promise((resolve) => {
-            requestIdleCallback(resolve);
-          });
-        }
-
-        const detect = /** @type {import("./detect.js").DetectFunction} */ (
-          (await import(detectSrc)).default
-        );
-        await detect(detectArgs);
-      })(
-        "http:\/\/localhost:8000\/wp-content\/plugins\/optimization-detective\/detect.js?ver=1.0.0-beta4",
+    <script type="application/json" id="optimization-detective-detect-args">
+      [
+        "http://localhost:8000/wp-content/plugins/optimization-detective/detect.js?ver=1.0.0-beta4",
         {
-          minViewportAspectRatio: 0,
-          maxViewportAspectRatio: 9.223372036854776e18,
-          isDebug: true,
-          extensionModuleUrls: [
-            "http:\/\/localhost:8000\/wp-content\/plugins\/od-store-query-vars\/detect.js?ver=0.2.0",
-            "http:\/\/localhost:8000\/wp-content\/plugins\/od-store-user-agent\/detect.js?ver=0.2.0",
-            "http:\/\/localhost:8000\/wp-content\/plugins\/image-prioritizer\/detect.js?ver=1.0.0-beta2",
-            "http:\/\/localhost:8000\/wp-content\/plugins\/embed-optimizer\/detect.js?ver=1.0.0-beta2",
+          "minViewportAspectRatio": 0,
+          "maxViewportAspectRatio": 9.223372036854776e18,
+          "isDebug": true,
+          "extensionModuleUrls": [
+            "http://localhost:8000/wp-content/plugins/od-store-query-vars/detect.js?ver=0.2.0",
+            "http://localhost:8000/wp-content/plugins/od-store-user-agent/detect.js?ver=0.2.0",
+            "http://localhost:8000/wp-content/plugins/image-prioritizer/detect.js?ver=1.0.0-beta2",
+            "http://localhost:8000/wp-content/plugins/embed-optimizer/detect.js?ver=1.0.0-beta2"
           ],
-          restApiEndpoint:
-            "http:\/\/localhost:8000\/wp-json\/optimization-detective\/v1\/url-metrics:store",
-          currentETag: "0c1bd8fc5ce3b5dfda91c29e449671ea",
-          currentUrl:
-            "http:\/\/localhost:8000\/2025\/09\/15\/optimization-detective-modules\/",
-          urlMetricSlug: "5ee3d140f3ef75abd789fd03efddd12b",
-          cachePurgePostId: 322,
-          urlMetricHMAC: "2f22d910ad387d69487c1d2b46d80a78",
-          urlMetricGroupStatuses: [
+          "restApiEndpoint": "http://localhost:8000/wp-json/optimization-detective/v1/url-metrics:store",
+          "currentETag": "0c1bd8fc5ce3b5dfda91c29e449671ea",
+          "currentUrl": "http://localhost:8000/2025/09/15/optimization-detective-modules/",
+          "urlMetricSlug": "5ee3d140f3ef75abd789fd03efddd12b",
+          "cachePurgePostId": 322,
+          "urlMetricHMAC": "2f22d910ad387d69487c1d2b46d80a78",
+          "urlMetricGroupStatuses": [
             {
-              minimumViewportWidth: 0,
-              maximumViewportWidth: 480,
-              complete: false,
+              "minimumViewportWidth": 0,
+              "maximumViewportWidth": 480,
+              "complete": false
             },
             {
-              minimumViewportWidth: 480,
-              maximumViewportWidth: 600,
-              complete: false,
+              "minimumViewportWidth": 480,
+              "maximumViewportWidth": 600,
+              "complete": false
             },
             {
-              minimumViewportWidth: 600,
-              maximumViewportWidth: 782,
-              complete: false,
+              "minimumViewportWidth": 600,
+              "maximumViewportWidth": 782,
+              "complete": false
             },
             {
-              minimumViewportWidth: 782,
-              maximumViewportWidth: null,
-              complete: false,
-            },
+              "minimumViewportWidth": 782,
+              "maximumViewportWidth": null,
+              "complete": false
+            }
           ],
-          storageLockTTL: 0,
-          freshnessTTL: 0,
-          webVitalsLibrarySrc:
-            "http:\/\/localhost:8000\/wp-content\/plugins\/optimization-detective\/build\/web-vitals.js?ver=5.0.3",
-          gzdecodeAvailable: true,
-          maxUrlMetricSize: 1048576,
-          urlMetricGroupCollection: {
-            current_etag: "0c1bd8fc5ce3b5dfda91c29e449671ea",
-            breakpoints: [480, 600, 782],
-            freshness_ttl: 0,
-            sample_size: 1,
-            all_element_max_intersection_ratios: {
-              "\/HTML\/BODY\/DIV[@class='wp-site-blocks']\/*[2][self::MAIN]\/*[1][self::DIV]\/*[5][self::DIV]\/*[16][self::DIV]\/*[1][self::DIV]": 0,
-              "\/HTML\/BODY\/DIV[@class='wp-site-blocks']\/*[2][self::MAIN]\/*[1][self::DIV]\/*[5][self::DIV]\/*[17][self::FIGURE]\/*[1][self::VIDEO]": 0,
-              "\/HTML\/BODY\/DIV[@class='wp-site-blocks']\/*[2][self::MAIN]\/*[1][self::DIV]\/*[5][self::DIV]\/*[18][self::FIGURE]\/*[1][self::DIV]": 0,
+          "storageLockTTL": 0,
+          "freshnessTTL": 0,
+          "webVitalsLibrarySrc": "http://localhost:8000/wp-content/plugins/optimization-detective/build/web-vitals.js?ver=5.0.3",
+          "gzdecodeAvailable": true,
+          "maxUrlMetricSize": 1048576,
+          "urlMetricGroupCollection": {
+            "current_etag": "0c1bd8fc5ce3b5dfda91c29e449671ea",
+            "breakpoints": [480, 600, 782],
+            "freshness_ttl": 0,
+            "sample_size": 1,
+            "all_element_max_intersection_ratios": {
+              "/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[5][self::DIV]/*[16][self::DIV]/*[1][self::DIV]": 0,
+              "/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[5][self::DIV]/*[17][self::FIGURE]/*[1][self::VIDEO]": 0,
+              "/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[5][self::DIV]/*[18][self::FIGURE]/*[1][self::DIV]": 0
             },
-            common_lcp_element: null,
-            every_group_complete: false,
-            every_group_populated: false,
-            groups: [
+            "common_lcp_element": null,
+            "every_group_complete": false,
+            "every_group_populated": false,
+            "groups": [
               {
-                minimum_viewport_width: 0,
-                maximum_viewport_width: 480,
-                lcp_element: null,
-                complete: false,
-                url_metrics: [
+                "minimum_viewport_width": 0,
+                "maximum_viewport_width": 480,
+                "lcp_element": null,
+                "complete": false,
+                "url_metrics": [
                   {
-                    url: "http:\/\/localhost:8000\/2025\/09\/15\/optimization-detective-modules\/",
-                    viewport: { width: 360, height: 640 },
-                    elements: [
+                    "url": "http://localhost:8000/2025/09/15/optimization-detective-modules/",
+                    "viewport": {
+                      "width": 360,
+                      "height": 640
+                    },
+                    "elements": [
                       {
-                        isLCP: false,
-                        isLCPCandidate: false,
-                        xpath:
-                          "\/HTML\/BODY\/DIV[@class='wp-site-blocks']\/*[2][self::MAIN]\/*[1][self::DIV]\/*[5][self::DIV]\/*[16][self::DIV]\/*[1][self::DIV]",
-                        intersectionRatio: 0,
-                        intersectionRect: {
-                          x: 0,
-                          y: 0,
-                          width: 0,
-                          height: 0,
-                          top: 0,
-                          right: 0,
-                          bottom: 0,
-                          left: 0,
+                        "isLCP": false,
+                        "isLCPCandidate": false,
+                        "xpath": "/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[5][self::DIV]/*[16][self::DIV]/*[1][self::DIV]",
+                        "intersectionRatio": 0,
+                        "intersectionRect": {
+                          "x": 0,
+                          "y": 0,
+                          "width": 0,
+                          "height": 0,
+                          "top": 0,
+                          "right": 0,
+                          "bottom": 0,
+                          "left": 0
                         },
-                        boundingClientRect: {
-                          x: 30,
-                          y: 9237.2890625,
-                          width: 300,
-                          height: 430,
-                          top: 9237.2890625,
-                          right: 330,
-                          bottom: 9667.2890625,
-                          left: 30,
-                        },
+                        "boundingClientRect": {
+                          "x": 30,
+                          "y": 9237.2890625,
+                          "width": 300,
+                          "height": 430,
+                          "top": 9237.2890625,
+                          "right": 330,
+                          "bottom": 9667.2890625,
+                          "left": 30
+                        }
                       },
                       {
-                        isLCP: false,
-                        isLCPCandidate: false,
-                        xpath:
-                          "\/HTML\/BODY\/DIV[@class='wp-site-blocks']\/*[2][self::MAIN]\/*[1][self::DIV]\/*[5][self::DIV]\/*[17][self::FIGURE]\/*[1][self::VIDEO]",
-                        intersectionRatio: 0,
-                        intersectionRect: {
-                          x: 0,
-                          y: 0,
-                          width: 0,
-                          height: 0,
-                          top: 0,
-                          right: 0,
-                          bottom: 0,
-                          left: 0,
+                        "isLCP": false,
+                        "isLCPCandidate": false,
+                        "xpath": "/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[5][self::DIV]/*[17][self::FIGURE]/*[1][self::VIDEO]",
+                        "intersectionRatio": 0,
+                        "intersectionRect": {
+                          "x": 0,
+                          "y": 0,
+                          "width": 0,
+                          "height": 0,
+                          "top": 0,
+                          "right": 0,
+                          "bottom": 0,
+                          "left": 0
                         },
-                        boundingClientRect: {
-                          x: 30,
-                          y: 9686.484375,
-                          width: 300,
-                          height: 168.75,
-                          top: 9686.484375,
-                          right: 330,
-                          bottom: 9855.234375,
-                          left: 30,
-                        },
+                        "boundingClientRect": {
+                          "x": 30,
+                          "y": 9686.484375,
+                          "width": 300,
+                          "height": 168.75,
+                          "top": 9686.484375,
+                          "right": 330,
+                          "bottom": 9855.234375,
+                          "left": 30
+                        }
                       },
                       {
-                        isLCP: false,
-                        isLCPCandidate: false,
-                        xpath:
-                          "\/HTML\/BODY\/DIV[@class='wp-site-blocks']\/*[2][self::MAIN]\/*[1][self::DIV]\/*[5][self::DIV]\/*[18][self::FIGURE]\/*[1][self::DIV]",
-                        intersectionRatio: 0,
-                        intersectionRect: {
-                          x: 0,
-                          y: 0,
-                          width: 0,
-                          height: 0,
-                          top: 0,
-                          right: 0,
-                          bottom: 0,
-                          left: 0,
+                        "isLCP": false,
+                        "isLCPCandidate": false,
+                        "xpath": "/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[5][self::DIV]/*[18][self::FIGURE]/*[1][self::DIV]",
+                        "intersectionRatio": 0,
+                        "intersectionRect": {
+                          "x": 0,
+                          "y": 0,
+                          "width": 0,
+                          "height": 0,
+                          "top": 0,
+                          "right": 0,
+                          "bottom": 0,
+                          "left": 0
                         },
-                        boundingClientRect: {
-                          x: 30,
-                          y: 9874.4296875,
-                          width: 300,
-                          height: 475.609375,
-                          top: 9874.4296875,
-                          right: 330,
-                          bottom: 10350.0390625,
-                          left: 30,
+                        "boundingClientRect": {
+                          "x": 30,
+                          "y": 9874.4296875,
+                          "width": 300,
+                          "height": 475.609375,
+                          "top": 9874.4296875,
+                          "right": 330,
+                          "bottom": 10350.0390625,
+                          "left": 30
                         },
-                        resizedBoundingClientRect: {
-                          x: 0,
-                          y: 0,
-                          width: 300,
-                          height: 596,
-                          top: 0,
-                          right: 300,
-                          bottom: 596,
-                          left: 0,
-                        },
-                      },
-                    ],
-                    userAgent:
-                      "Mozilla\/5.0 (Linux; Android 6.0.1; Moto G (4)) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/140.0.0.0 Mobile Safari\/537.36",
-                    queryVars: {
-                      page: "",
-                      year: "2025",
-                      monthnum: "09",
-                      day: "15",
-                      name: "optimization-detective-modules",
+                        "resizedBoundingClientRect": {
+                          "x": 0,
+                          "y": 0,
+                          "width": 300,
+                          "height": 596,
+                          "top": 0,
+                          "right": 300,
+                          "bottom": 596,
+                          "left": 0
+                        }
+                      }
+                    ],
+                    "userAgent": "Mozilla/5.0 (Linux; Android 6.0.1; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Mobile Safari/537.36",
+                    "queryVars": {
+                      "page": "",
+                      "year": "2025",
+                      "monthnum": "09",
+                      "day": "15",
+                      "name": "optimization-detective-modules"
                     },
-                    timestamp: 1757997020.245984,
-                    uuid: "513c6289-fb71-46cc-81e0-3b2c2b2c1731",
-                    etag: "76f347f61e5d404ba2876ab2bd8c0df8",
-                  },
-                ],
+                    "timestamp": 1757997020.245984,
+                    "uuid": "513c6289-fb71-46cc-81e0-3b2c2b2c1731",
+                    "etag": "76f347f61e5d404ba2876ab2bd8c0df8"
+                  }
+                ]
               },
               {
-                minimum_viewport_width: 480,
-                maximum_viewport_width: 600,
-                lcp_element: null,
-                complete: false,
-                url_metrics: [],
+                "minimum_viewport_width": 480,
+                "maximum_viewport_width": 600,
+                "lcp_element": null,
+                "complete": false,
+                "url_metrics": []
               },
               {
-                minimum_viewport_width: 600,
-                maximum_viewport_width: 782,
-                lcp_element: null,
-                complete: false,
-                url_metrics: [],
+                "minimum_viewport_width": 600,
+                "maximum_viewport_width": 782,
+                "lcp_element": null,
+                "complete": false,
+                "url_metrics": []
               },
               {
-                minimum_viewport_width: 782,
-                maximum_viewport_width: null,
-                lcp_element: null,
-                complete: false,
-                url_metrics: [
+                "minimum_viewport_width": 782,
+                "maximum_viewport_width": null,
+                "lcp_element": null,
+                "complete": false,
+                "url_metrics": [
                   {
-                    url: "http:\/\/localhost:8000\/2025\/09\/15\/optimization-detective-modules\/",
-                    viewport: { width: 3008, height: 900 },
-                    elements: [
+                    "url": "http://localhost:8000/2025/09/15/optimization-detective-modules/",
+                    "viewport": {
+                      "width": 3008,
+                      "height": 900
+                    },
+                    "elements": [
                       {
-                        isLCP: false,
-                        isLCPCandidate: false,
-                        xpath:
-                          "\/HTML\/BODY\/DIV[@class='wp-site-blocks']\/*[2][self::MAIN]\/*[1][self::DIV]\/*[5][self::DIV]\/*[16][self::DIV]\/*[1][self::DIV]",
-                        intersectionRatio: 0,
-                        intersectionRect: {
-                          x: 0,
-                          y: 0,
-                          width: 0,
-                          height: 0,
-                          top: 0,
-                          right: 0,
-                          bottom: 0,
-                          left: 0,
+                        "isLCP": false,
+                        "isLCPCandidate": false,
+                        "xpath": "/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[5][self::DIV]/*[16][self::DIV]/*[1][self::DIV]",
+                        "intersectionRatio": 0,
+                        "intersectionRect": {
+                          "x": 0,
+                          "y": 0,
+                          "width": 0,
+                          "height": 0,
+                          "top": 0,
+                          "right": 0,
+                          "bottom": 0,
+                          "left": 0
                         },
-                        boundingClientRect: {
-                          x: 1174,
-                          y: 6521.3125,
-                          width: 645,
-                          height: 430,
-                          top: 6521.3125,
-                          right: 1819,
-                          bottom: 6951.3125,
-                          left: 1174,
-                        },
+                        "boundingClientRect": {
+                          "x": 1174,
+                          "y": 6521.3125,
+                          "width": 645,
+                          "height": 430,
+                          "top": 6521.3125,
+                          "right": 1819,
+                          "bottom": 6951.3125,
+                          "left": 1174
+                        }
                       },
                       {
-                        isLCP: false,
-                        isLCPCandidate: false,
-                        xpath:
-                          "\/HTML\/BODY\/DIV[@class='wp-site-blocks']\/*[2][self::MAIN]\/*[1][self::DIV]\/*[5][self::DIV]\/*[17][self::FIGURE]\/*[1][self::VIDEO]",
-                        intersectionRatio: 0,
-                        intersectionRect: {
-                          x: 0,
-                          y: 0,
-                          width: 0,
-                          height: 0,
-                          top: 0,
-                          right: 0,
-                          bottom: 0,
-                          left: 0,
+                        "isLCP": false,
+                        "isLCPCandidate": false,
+                        "xpath": "/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[5][self::DIV]/*[17][self::FIGURE]/*[1][self::VIDEO]",
+                        "intersectionRatio": 0,
+                        "intersectionRect": {
+                          "x": 0,
+                          "y": 0,
+                          "width": 0,
+                          "height": 0,
+                          "top": 0,
+                          "right": 0,
+                          "bottom": 0,
+                          "left": 0
                         },
-                        boundingClientRect: {
-                          x: 1174,
-                          y: 6970.5078125,
-                          width: 645,
-                          height: 362.8125,
-                          top: 6970.5078125,
-                          right: 1819,
-                          bottom: 7333.3203125,
-                          left: 1174,
-                        },
+                        "boundingClientRect": {
+                          "x": 1174,
+                          "y": 6970.5078125,
+                          "width": 645,
+                          "height": 362.8125,
+                          "top": 6970.5078125,
+                          "right": 1819,
+                          "bottom": 7333.3203125,
+                          "left": 1174
+                        }
                       },
                       {
-                        isLCP: false,
-                        isLCPCandidate: false,
-                        xpath:
-                          "\/HTML\/BODY\/DIV[@class='wp-site-blocks']\/*[2][self::MAIN]\/*[1][self::DIV]\/*[5][self::DIV]\/*[18][self::FIGURE]\/*[1][self::DIV]",
-                        intersectionRatio: 0,
-                        intersectionRect: {
-                          x: 0,
-                          y: 0,
-                          width: 0,
-                          height: 0,
-                          top: 0,
-                          right: 0,
-                          bottom: 0,
-                          left: 0,
+                        "isLCP": false,
+                        "isLCPCandidate": false,
+                        "xpath": "/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[1][self::DIV]/*[5][self::DIV]/*[18][self::FIGURE]/*[1][self::DIV]",
+                        "intersectionRatio": 0,
+                        "intersectionRect": {
+                          "x": 0,
+                          "y": 0,
+                          "width": 0,
+                          "height": 0,
+                          "top": 0,
+                          "right": 0,
+                          "bottom": 0,
+                          "left": 0
                         },
-                        boundingClientRect: {
-                          x: 1174,
-                          y: 7355.3203125,
-                          width: 645,
-                          height: 268.375,
-                          top: 7355.3203125,
-                          right: 1819,
-                          bottom: 7623.6953125,
-                          left: 1174,
+                        "boundingClientRect": {
+                          "x": 1174,
+                          "y": 7355.3203125,
+                          "width": 645,
+                          "height": 268.375,
+                          "top": 7355.3203125,
+                          "right": 1819,
+                          "bottom": 7623.6953125,
+                          "left": 1174
                         },
-                        resizedBoundingClientRect: {
-                          x: 0,
-                          y: 0,
-                          width: 645,
-                          height: 268.375,
-                          top: 0,
-                          right: 645,
-                          bottom: 268.375,
-                          left: 0,
-                        },
-                      },
+                        "resizedBoundingClientRect": {
+                          "x": 0,
+                          "y": 0,
+                          "width": 645,
+                          "height": 268.375,
+                          "top": 0,
+                          "right": 645,
+                          "bottom": 268.375,
+                          "left": 0
+                        }
+                      }
                     ],
-                    queryVars: {
-                      page: "",
-                      year: "2025",
-                      monthnum: "09",
-                      day: "15",
-                      name: "optimization-detective-modules",
+                    "queryVars": {
+                      "page": "",
+                      "year": "2025",
+                      "monthnum": "09",
+                      "day": "15",
+                      "name": "optimization-detective-modules"
                     },
-                    userAgent:
-                      "Mozilla\/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/140.0.0.0 Safari\/537.36",
-                    timestamp: 1757997191.244589,
-                    uuid: "4e8d45e5-ef03-4c28-a1c2-3e02dfd8d11a",
-                    etag: "824fb51fc9d6da0e184dacbd1e9b19d0",
-                  },
-                ],
-              },
-            ],
-          },
-        },
-      );
+                    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36",
+                    "timestamp": 1757997191.244589,
+                    "uuid": "4e8d45e5-ef03-4c28-a1c2-3e02dfd8d11a",
+                    "etag": "824fb51fc9d6da0e184dacbd1e9b19d0"
+                  }
+                ]
+              }
+            ]
+          }
+        }
+      ]
     </script>
+    <script type="module">
+      /**
+       * Loads the detect module after the page has loaded.
+       *
+       * This prevents a high-priority script module network request from competing with other critical resources.
+       *
+       * @since 1.0.0
+       */
+      async function load() {
+        // Wait until the resources on the page have fully loaded.
+        await new Promise((resolve) => {
+          if (document.readyState === "complete") {
+            resolve();
+          } else {
+            window.addEventListener("load", resolve, { once: true });
+          }
+        });
+
+        // Wait yet further until idle.
+        if (typeof requestIdleCallback === "function") {
+          await new Promise((resolve) => {
+            requestIdleCallback(resolve);
+          });
+        }
+
+        const data = JSON.parse(
+          document.getElementById("optimization-detective-detect-args")
+            .textContent,
+        );
+
+        const detectSrc = /** @type {string} */ data[0];
+        const detectArgs =
+          /** @type {import("./detect.js").DetectFunctionArgs} */ data[1];
+        const detect = /** @type {import("./detect.js").DetectFunction} */ (
+          (await import(detectSrc)).default
+        );
+        await detect(detectArgs);
+      }
+
+      load();
+
+      //# sourceURL=http://localhost:8000/wp-content/plugins/optimization-detective/detect-loader.js?ver=1.0.0-beta4
+    </script>
   </body>
 </html>

@westonruter westonruter added the [Type] Enhancement A suggestion for improvement of an existing feature label Sep 10, 2025
@westonruter westonruter added the [Plugin] Modern Image Formats Issues for the Modern Image Formats plugin (formerly WebP Uploads) label Sep 10, 2025
@westonruter westonruter added [Plugin] Optimization Detective Issues for the Optimization Detective plugin [Plugin] Speculative Loading Issues for the Speculative Loading plugin (formerly Speculation Rules) [Plugin] Image Prioritizer Issues for the Image Prioritizer plugin (dependent on Optimization Detective) [Plugin] Web Worker Offloading Issues for the Web Worker Offloading plugin. [Plugin] View Transitions Issues for the View Transitions plugin labels Sep 10, 2025
@github-actions
Copy link

github-actions bot commented Sep 10, 2025 •
edited
Loading

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: ShyamGadde <[email protected]>

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

@codecov
Copy link

codecov bot commented Sep 10, 2025 •
edited
Loading

Codecov Report

❌ Patch coverage is 87.17949% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 68.92%. Comparing base (62b54c0) to head (b0c3686).
⚠️ Report is 23 commits behind head on trunk.

Files with missing lines Patch % Lines
plugins/embed-optimizer/helper.php 0.00% 7 Missing ⚠️
plugins/webp-uploads/settings.php 0.00% 2 Missing ⚠️
plugins/optimization-detective/detection.php 96.29% 1 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##            trunk    #2169      +/-   ##
==========================================
+ Coverage   68.81%   68.92%   +0.10%     
==========================================
  Files          90       90              
  Lines        8006     8060      +54     
==========================================
+ Hits         5509     5555      +46     
- Misses       2497     2505       +8
Flag Coverage Δ
multisite 68.92% <87.17%> (+0.10%) ⬆️
single 35.55% <44.87%> (+0.08%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@westonruter westonruter mentioned this pull request Sep 16, 2025
Open
@westonruter westonruter merged commit a6dbbca into trunk Sep 16, 2025
22 checks passed
@westonruter westonruter deleted the update/inline-scripts branch September 16, 2025 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ShyamGadde ShyamGadde ShyamGadde approved these changes

@felixarntz felixarntz Awaiting requested review from felixarntz felixarntz is a code owner

@adamsilverstein adamsilverstein Awaiting requested review from adamsilverstein adamsilverstein is a code owner

Assignees

No one assigned

Labels

[Plugin] Image Prioritizer Issues for the Image Prioritizer plugin (dependent on Optimization Detective) [Plugin] Modern Image Formats Issues for the Modern Image Formats plugin (formerly WebP Uploads) [Plugin] Optimization Detective Issues for the Optimization Detective plugin [Plugin] Speculative Loading Issues for the Speculative Loading plugin (formerly Speculation Rules) [Plugin] View Transitions Issues for the View Transitions plugin [Plugin] Web Worker Offloading Issues for the Web Worker Offloading plugin. [Type] Enhancement A suggestion for improvement of an existing feature

Projects

None yet

Milestone

optimization-detective 1.0.0-beta4

Development

Successfully merging this pull request may close these issues.

3 participants

@westonruter @ShyamGadde