Skip to content

Commit d656e11

Browse files
westonruterwestonruter
authored
Merge pull request #1783 from WordPress/fix/od-noscript-handling
Skip visiting any tags inside of NOSCRIPT elements
2 parents 4693bee + 14f57a8 commit d656e11

File tree

3 files changed

+91
-0
lines changed

3 files changed

+91
-0
lines changed

‎plugins/image-prioritizer/tests/test-cases/img-non-native-lazy-loading.php‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<?php
2+
return array(
3+
'set_up' => static function ( Test_Image_Prioritizer_Helper $test_case ): void {
4+
$slug = od_get_url_metrics_slug( od_get_normalized_query_vars() );
5+
6+
// Populate one URL Metric so that none of the IMG elements are unknown.
7+
OD_URL_Metrics_Post_Type::store_url_metric(
8+
$slug,
9+
$test_case->get_sample_url_metric(
10+
array(
11+
'viewport_width' => 1000,
12+
'elements' => array(
13+
array(
14+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]',
15+
'isLCP' => true,
16+
),
17+
),
18+
)
19+
)
20+
);
21+
},
22+
'buffer' => '
23+
<html lang="en">
24+
<head>
25+
<meta charset="utf-8">
26+
<title>...</title>
27+
<script>/* custom lazy-loading */</script>
28+
</head>
29+
<body>
30+
<!-- Example with an adjoining NOSCRIPT > IMG tag which should be excluded from URL Metrics. -->
31+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://example.com/bar.jpg" data-srcset="https://example.com/bar-large.jpg 1000w, https://example.com/bar-large.jpg 1000w" sizes="(max-width: 556px) 100vw, 556px" alt="Bar" class="attachment-large size-large wp-image-2 has-transparency lazyload" width="500" height="300">
32+
<noscript>
33+
<img src="https://example.com/bar.jpg" srcset="https://example.com/bar-large.jpg 1000w, https://example.com/bar-large.jpg 1000w" sizes="(max-width: 556px) 100vw, 556px" alt="Bar" class="attachment-large size-large wp-image-2 has-transparency lazyload" width="500" height="300">
34+
</noscript>
35+
</body>
36+
</html>
37+
',
38+
'expected' => '
39+
<html lang="en">
40+
<head>
41+
<meta charset="utf-8">
42+
<title>...</title>
43+
<script>/* custom lazy-loading */</script>
44+
</head>
45+
<body>
46+
<!-- Example with an adjoining NOSCRIPT > IMG tag which should be excluded from URL Metrics. -->
47+
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://example.com/bar.jpg" data-srcset="https://example.com/bar-large.jpg 1000w, https://example.com/bar-large.jpg 1000w" sizes="(max-width: 556px) 100vw, 556px" alt="Bar" class="attachment-large size-large wp-image-2 has-transparency lazyload" width="500" height="300">
48+
<noscript>
49+
<img src="https://example.com/bar.jpg" srcset="https://example.com/bar-large.jpg 1000w, https://example.com/bar-large.jpg 1000w" sizes="(max-width: 556px) 100vw, 556px" alt="Bar" class="attachment-large size-large wp-image-2 has-transparency lazyload" width="500" height="300">
50+
</noscript>
51+
<script type="module">/* import detect ... */</script>
52+
</body>
53+
</html>
54+
',
55+
);

‎plugins/optimization-detective/optimization.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,11 @@ function od_optimize_template_output_buffer( string $buffer ): string {
227227
$needs_detection = ! $group_collection->is_every_group_complete();
228228

229229
do {
230+
// Never process anything inside NOSCRIPT since it will never show up in the DOM when scripting is enabled, and thus it can never be detected nor measured.
231+
if ( in_array( 'NOSCRIPT', $processor->get_breadcrumbs(), true ) ) {
232+
continue;
233+
}
234+
230235
$tracked_in_url_metrics = false;
231236
$processor->set_bookmark( $current_tag_bookmark ); // TODO: Should we break if this returns false?
232237

‎plugins/optimization-detective/tests/test-cases/noscript.php‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<?php
2+
return array(
3+
'set_up' => static function (): void {},
4+
'buffer' => '
5+
<html lang="en">
6+
<head>
7+
<meta charset="utf-8">
8+
<title>...</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<img src="https://example.com/pixel.gif" alt="" width="1" height="1">
13+
</noscript>
14+
</body>
15+
</html>
16+
',
17+
'expected' => '
18+
<html lang="en">
19+
<head>
20+
<meta charset="utf-8">
21+
<title>...</title>
22+
</head>
23+
<body>
24+
<noscript>
25+
<img src="https://example.com/pixel.gif" alt="" width="1" height="1">
26+
</noscript>
27+
<script type="module">/* import detect ... */</script>
28+
</body>
29+
</html>
30+
',
31+
);

0 commit comments

Comments
 (0)