Skip to content

Commit 8edcd7c

Browse files
committed
Delay loading detect module until page is loaded and idle
1 parent 85001b9 commit 8edcd7c

File tree

4 files changed

+47
-26
lines changed

4 files changed

+47
-26
lines changed
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* Loads the detect logic after the page has loaded to prevent a high-priority script module network request from competing with other critical resources.
3+
*
4+
* This JavaScript file must be contain a single top-level function which is not exported. The file is inlined as part of another module which wraps the module in an IIFE.
5+
*
6+
* @param {string} detectSrc
7+
* @param {Object} detectArgs
8+
*/
9+
// eslint-disable-next-line no-unused-vars
10+
async function load( detectSrc, detectArgs ) {
11+
const doc = document;
12+
const win = window;
13+
14+
// Ensure the DOM is loaded (although it surely already is since we're executing in a module).
15+
await new Promise( ( resolve ) => {
16+
if ( doc.readyState !== 'loading' ) {
17+
resolve();
18+
} else {
19+
doc.addEventListener( 'DOMContentLoaded', resolve, { once: true } );
20+
}
21+
} );
22+
23+
// Wait until the resources on the page have fully loaded.
24+
await new Promise( ( resolve ) => {
25+
if ( doc.readyState === 'complete' ) {
26+
resolve();
27+
} else {
28+
win.addEventListener( 'load', resolve, { once: true } );
29+
}
30+
} );
31+
32+
// Wait yet further until idle.
33+
if ( typeof requestIdleCallback === 'function' ) {
34+
await new Promise( ( resolve ) => {
35+
requestIdleCallback( resolve );
36+
} );
37+
}
38+
39+
const { default: detect } = await import( detectSrc );
40+
await detect( detectArgs );
41+
}

plugins/optimization-detective/detect.js

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -635,31 +635,6 @@ export default async function detect( {
635635
return;
636636
}
637637

638-
// Ensure the DOM is loaded (although it surely already is since we're executing in a module).
639-
await new Promise( ( resolve ) => {
640-
if ( doc.readyState !== 'loading' ) {
641-
resolve();
642-
} else {
643-
doc.addEventListener( 'DOMContentLoaded', resolve, { once: true } );
644-
}
645-
} );
646-
647-
// Wait until the resources on the page have fully loaded.
648-
await new Promise( ( resolve ) => {
649-
if ( doc.readyState === 'complete' ) {
650-
resolve();
651-
} else {
652-
win.addEventListener( 'load', resolve, { once: true } );
653-
}
654-
} );
655-
656-
// Wait yet further until idle.
657-
if ( typeof requestIdleCallback === 'function' ) {
658-
await new Promise( ( resolve ) => {
659-
requestIdleCallback( resolve );
660-
} );
661-
}
662-
663638
// TODO: Does this make sense here? Should it be moved up above the isViewportNeeded condition?
664639
// As an alternative to this, the od_print_detection_script() function can short-circuit if the
665640
// od_is_url_metric_storage_locked() function returns true. However, the downside with that is page caching could

plugins/optimization-detective/detection.php

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,8 @@ static function ( OD_URL_Metric_Group $group ): array {
151151

152152
return wp_get_inline_script_tag(
153153
sprintf(
154-
'import detect from %s; detect( %s );',
154+
'( %s )( %s, %s );',
155+
file_get_contents( __DIR__ . '/' . od_get_asset_path( 'detect-loader.js' ) ), // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- It's a local filesystem path not a remote request.
155156
wp_json_encode( plugins_url( add_query_arg( 'ver', OPTIMIZATION_DETECTIVE_VERSION, od_get_asset_path( 'detect.js' ) ), __FILE__ ) ),
156157
wp_json_encode( $detect_args )
157158
),

webpack.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,10 @@ const optimizationDetective = ( env ) => {
214214
cache: false,
215215
},
216216
},
217+
{
218+
from: `${ destination }/detect-loader.js`,
219+
to: `${ destination }/detect-loader.min.js`,
220+
},
217221
{
218222
from: `${ destination }/detect.js`,
219223
to: `${ destination }/detect.min.js`,

0 commit comments

Comments
 (0)