Skip to content

Commit

Permalink
Closes #6553: Frontend optimization applied for the wrong element in …
Browse files Browse the repository at this point in the history 
…some cases (#6554)
  • Loading branch information
@jeawhanlee
jeawhanlee authored Apr 18, 2024
1 parent 5d51e47 commit 0a85128
Show file tree
Hide file tree
Showing 8 changed files with 158 additions and 2 deletions.
2 changes: 1 addition & 1 deletion inc/Engine/Media/AboveTheFold/Frontend/Controller.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ private function set_fetchpriority( $lcp, string $html ): string {

$url = preg_quote( $lcp->src, '/' );
$html = preg_replace_callback(
'#<img(?:[^>]*?\s+src=["\']' . $url . '["\'][^>]*?|[^>]*?)>#',
'#<img(?:[^>]*?\s+)?src=["\']' . $url . '["\'](?:\s+[^>]*?)?>#',
function ( $matches ) {
// Check if the fetchpriority attribute already exists.
if ( preg_match( '/fetchpriority\s*=\s*[\'"]([^\'"]+)[\'"]/i', $matches[0] ) ) {
Expand Down
17 changes: 17 additions & 0 deletions ...Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_w_bg_image_lcp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<html>
<head>
<title>Test</title>
<style>
.test{
width: 100%;
height: 400px;
background-image: url("http://example.org/wp-content/uploads/image.jpg");
}
</style>
</head>
<body>
<div class="test"></div>
<img src="http://example.org/wp-content/uploads/image2.jpg" alt="image2" />
<img src="http://example.org/wp-content/uploads/image3.jpg" alt="image3" />
</body>
</html>
10 changes: 10 additions & 0 deletions tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_w_img_lcp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="http://example.org/wp-content/uploads/image.jpg">
<img src="http://example.org/wp-content/uploads/image2.jpg">
<img src="http://example.org/wp-content/uploads/image3.jpg">
</body>
</html>
12 changes: 12 additions & 0 deletions ...tures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_w_picture_img_lcp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<html>
<head>
<title>Test</title>
</head>
<body>
<picture>
<img src="http://example.org/wp-content/uploads/image.jpg">
</picture>
<img src="http://example.org/wp-content/uploads/image2.jpg">
<img src="http://example.org/wp-content/uploads/image3.jpg">
</body>
</html>
17 changes: 17 additions & 0 deletions ...ixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_bg_image_lcp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<html>
<head>
<title>Test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/image.jpg" fetchpriority="high">
<style>
.test{
width: 100%;
height: 400px;
background-image: url("http://example.org/wp-content/uploads/image.jpg");
}
</style>
</head>
<body>
<div class="test"></div>
<img src="http://example.org/wp-content/uploads/image2.jpg" alt="image2" />
<img src="http://example.org/wp-content/uploads/image3.jpg" alt="image3" />
</body>
</html>
10 changes: 10 additions & 0 deletions tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_img_lcp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<html>
<head>
<title>Test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/image.jpg" fetchpriority="high">
</head>
<body>
<img fetchpriority="high" src="http://example.org/wp-content/uploads/image.jpg">
<img src="http://example.org/wp-content/uploads/image2.jpg">
<img src="http://example.org/wp-content/uploads/image3.jpg">
</body>
</html>
12 changes: 12 additions & 0 deletions ...ures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_picture_img_lcp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<html>
<head>
<title>Test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/image.jpg" fetchpriority="high">
</head>
<body>
<picture>
<img fetchpriority="high" src="http://example.org/wp-content/uploads/image.jpg">
</picture>
<img src="http://example.org/wp-content/uploads/image2.jpg">
<img src="http://example.org/wp-content/uploads/image3.jpg">
</body>
</html>
80 changes: 79 additions & 1 deletion tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/lcp.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
$html_output = file_get_contents(__DIR__ . '/HTML/output.html');
$html_output_with_preload = file_get_contents(__DIR__ . '/HTML/output_w_preload.html');
$html_output_with_beacon = file_get_contents(__DIR__ . '/HTML/output_w_beacon.html');
$html_input_with_bg_image_lcp = file_get_contents(__DIR__ . '/HTML/input_w_bg_image_lcp.html');
$html_output_with_bg_image_lcp = file_get_contents(__DIR__ . '/HTML/output_w_bg_image_lcp.html');
$html_input_with_picture_img_lcp = file_get_contents(__DIR__ . '/HTML/input_w_picture_img_lcp.html');
$html_output_with_picture_img_lcp = file_get_contents(__DIR__ . '/HTML/output_w_picture_img_lcp.html');
$html_input_with_img_lcp = file_get_contents(__DIR__ . '/HTML/input_w_img_lcp.html');
$html_output_with_img_lcp = file_get_contents(__DIR__ . '/HTML/output_w_img_lcp.html');

return [
'test_data' => [
Expand All @@ -27,7 +33,7 @@
'viewport' => json_encode( [
0 => (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/image.jpg',
'src' => 'http://example.org/wp-content/uploads/image2.jpg',
],
] ),
],
Expand All @@ -49,4 +55,76 @@
'expected' => $html_output,
],
],
'shouldNotApplyFetchPriorityToTheWrongElement' => [
'config' => [
'html' => $html_input_with_bg_image_lcp,
'row' => [
'status' => 'completed',
'url' => 'http://example.org',
'lcp' => json_encode( (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/image.jpg',
] ),
'viewport' => json_encode( [
0 => (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/image2.jpg',
],
1 => (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/image3.jpg',
],
] ),
],
],
'expected' => $html_output_with_bg_image_lcp,
],
'shouldApplyFetchPriorityToTheImgTagWithPictureElement' => [
'config' => [
'html' => $html_input_with_picture_img_lcp,
'row' => [
'status' => 'completed',
'url' => 'http://example.org',
'lcp' => json_encode( (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/image.jpg',
] ),
'viewport' => json_encode( [
0 => (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/image2.jpg',
],
1 => (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/image3.jpg',
],
] ),
],
],
'expected' => $html_output_with_picture_img_lcp,
],
'shouldApplyFetchPriorityToTheImgElement' => [
'config' => [
'html' => $html_input_with_img_lcp,
'row' => [
'status' => 'completed',
'url' => 'http://example.org',
'lcp' => json_encode( (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/image.jpg',
] ),
'viewport' => json_encode( [
0 => (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/image2.jpg',
],
1 => (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/image3.jpg',
],
] ),
],
],
'expected' => $html_output_with_img_lcp,
],
];

0 comments on commit 0a85128

Please sign in to comment.