Delay loading detect module until page is loaded and idle

[westonruter]

The detect module is loaded via a dynamic import which involves a high fetch priority. No resources for Optimization Detective should ever compete with the loading of any resources for the critical rendering path. So this introduces an inlined detect-loader script module which explicitly waits for the page to be fully loaded and idle before beginning to load the detect module. This wait-until-idle logic was previously in the detect module itself, but it is better to put in inline on the page to delay the loading of the script module.

Additionally, the client-side extensions for Optimization Detective (e.g. Image Prioritizer and Embed Optimizer) now get their extension modules loaded in parallel, further reducing the time between load and detection start.

On a single post template with the LCP element being the featured image, the impact on the LCP-TTFB metric are as follows (capturing the median of 50 requests):

Network Conditions	Before	After	Diff (ms)	Diff (%)
Fast 4G	771.75	766.7	-5.05	-0.65%
broadband	252.85	243.95	-8.90	-3.52%

Network Waterfall

Before

Note how Optimization Detective's detect.js is loaded concurrently with the LCP image resource. Note also how the extensions' detect.js modules are loaded in series.

After

Note how detect.js is loaded at the load event, after the critical resources have been loaded. Note also how the extensions' detect.js modules are loaded in parallel.

[westonruter]

• Update tests to account for the inlined JS.
• The Optimization Detective client-side extension modules are being loaded sequentially. We should look at loading them in parallel.

[westonruter]

As of 305fff3, the extensions are now loaded in parallel:

Before:

After:

[github-actions]

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]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (trunk@b837d81). Learn more about missing BASE report.
⚠️ Report is 27 commits behind head on trunk.

Additional details and impacted files

@@           Coverage Diff            @@
##             trunk    #2017   +/-   ##
========================================
  Coverage         ?   67.19%           
========================================
  Files            ?       93           
  Lines            ?     7751           
  Branches         ?        0           
========================================
  Hits             ?     5208           
  Misses           ?     2543           
  Partials         ?        0           

Flag	Coverage Δ
multisite	67.19% <100.00%> (?)
single	36.61% <0.00%> (?)

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.

[ShyamGadde]

All looks good to me here too. Nothing more to add on my end 👍