Skip to content

Commit

Permalink
Closes #6604 Add fetch priority to LCP when url is relative (#6626)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Khadreal
Khadreal authored May 27, 2024
1 parent e78c9fe commit 58962d2
Show file tree
Hide file tree
Showing 12 changed files with 175 additions and 4 deletions.
19 changes: 15 additions & 4 deletions inc/Engine/Media/AboveTheFold/Frontend/Controller.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,12 +146,23 @@ private function set_fetchpriority( $lcp, string $html ): string {
return $html;
}

$url = preg_quote( $lcp->src, '/' );
$html = $this->replace_html_comments( $html );
$url = preg_quote( $lcp->src, '/' );
$pattern = '#<img(?:[^>]*?\s+)?src=["\']' . $url . '["\'](?:\s+[^>]*?)?>#';
if ( wp_http_validate_url( $lcp->src ) && ! $this->is_external_file( $lcp->src ) ) {
$url = preg_quote(
wp_parse_url( $lcp->src, PHP_URL_PATH ),
'/'
);

$pattern = '#<img(?:[^>]*?\s+)?src\s*=\s*["\'](?:https?:)?(?:\/\/(?:[^\/]+)\/?)?\/?' . $url . '["\'](?:\s+[^>]*?)?>#i';
}

$html = preg_replace_callback(
'#<img(?:[^>]*?\s+)?src=["\']' . $url . '["\'](?:\s+[^>]*?)?>#',
$pattern,
function ( $matches ) {
// Check if the fetchpriority attribute already exists.
if ( preg_match( '/fetchpriority\s*=\s*[\'"]([^\'"]+)[\'"]/i', $matches[0] ) ) {
if ( preg_match( '/<img[^>]*\sfetchpriority(?:\s*=\s*["\'][^"\']*["\'])?[^>]*>/i', $matches[0] ) ) {
// If it exists, don't modify the tag.
return $matches[0];
}
Expand All @@ -163,7 +174,7 @@ function ( $matches ) {
1
);

return $html;
return $this->restore_html_comments( $html );
}

/**
Expand Down
8 changes: 8 additions & 0 deletions tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_lcp_image.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<html>
<head>
<title>LCP/ATF image test</title>
</head>
<body>
<img src="//example.org/wp-content/uploads/sample_url_image.png" alt="Sample alt">
</body>
</html>
8 changes: 8 additions & 0 deletions .../inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_lcp_with_fetchpriority.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<html>
<head>
<title>Relative test</title>
</head>
<body>
<img Src="/wp-content/uploads/sample_relative_image.jpg" alt="Relative url" FetchPriority>
</body>
</html>
9 changes: 9 additions & 0 deletions ...inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_lcp_with_markup_comment.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<html>
<head>
<title>Relative test</title>
</head>
<body>
<!--<img src="/wp-content/uploads/duplicate.jpg" alt="Duplicate image">-->
<img src="/wp-content/uploads/sample_relative_image.jpg" alt="Relative url">
</body>
</html>
8 changes: 8 additions & 0 deletions ...s/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_with_absolute_img_lcp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<html>
<head>
<title>Absolute url test</title>
</head>
<body>
<img src="http://example.com/wp-content/uploads/sample_absolute_image.jpg" alt="Absolute url">
</body>
</html>
8 changes: 8 additions & 0 deletions ...s/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_with_relative_img_lcp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<html>
<head>
<title>Relative test</title>
</head>
<body>
<img SRC="/wp-content/uploads/sample_relative_image.jpg" alt="Relative url">
</body>
</html>
8 changes: 8 additions & 0 deletions tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_image.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<html>
<head>
<title>LCP/ATF image test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/sample_url_image.png" fetchpriority="high">
</head>
<body>
<img fetchpriority="high" src="//example.org/wp-content/uploads/sample_url_image.png" alt="Sample alt">
</body>
</html>
8 changes: 8 additions & 0 deletions ...inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_with_fetchpriority.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<html>
<head>
<title>Relative test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/sample_relative_image.jpg" fetchpriority="high">
</head>
<body>
<img Src="/wp-content/uploads/sample_relative_image.jpg" alt="Relative url" FetchPriority>
</body>
</html>
9 changes: 9 additions & 0 deletions ...nc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_with_markup_comment.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<html>
<head>
<title>Relative test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/sample_relative_image.jpg" fetchpriority="high">
</head>
<body>
<!--<img src="/wp-content/uploads/duplicate.jpg" alt="Duplicate image">-->
<img fetchpriority="high" src="/wp-content/uploads/sample_relative_image.jpg" alt="Relative url">
</body>
</html>
8 changes: 8 additions & 0 deletions ...s/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_with_absolute_img_lcp.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<html>
<head>
<title>Absolute url test</title><link rel="preload" as="image" href="http://example.com/wp-content/uploads/sample_absolute_image.jpg" fetchpriority="high">
</head>
<body>
<img fetchpriority="high" src="http://example.com/wp-content/uploads/sample_absolute_image.jpg" alt="Absolute url">
</body>
</html>
8 changes: 8 additions & 0 deletions ...s/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_with_relative_img_lcp.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<html>
<head>
<title>Relative test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/sample_relative_image.jpg" fetchpriority="high">
</head>
<body>
<img fetchpriority="high" SRC="/wp-content/uploads/sample_relative_image.jpg" alt="Relative url">
</body>
</html>
78 changes: 78 additions & 0 deletions tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/lcp.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
$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');
$html_input_with_relative_img_lcp = file_get_contents(__DIR__ . '/HTML/input_with_relative_img_lcp.html');
$html_input_with_absolute_img_lcp = file_get_contents(__DIR__ . '/HTML/input_with_absolute_img_lcp.html');
$html_input_with_domain_img_lcp = file_get_contents(__DIR__ . '/HTML/input_lcp_image.html');

return [
'test_data' => [
Expand Down Expand Up @@ -142,6 +145,81 @@
],
'expected' => file_get_contents(__DIR__ . '/HTML/output_lcp_responsive.php'),
],
'shouldApplyFetchPriorityToReturnRelativeImage' => [
'config' => [
'html' => $html_input_with_relative_img_lcp,
'row' => [
'status' => 'completed',
'url' => 'http://example.org',
'lcp' => json_encode( (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/sample_relative_image.jpg',
] ),
'viewport' => json_encode ( [] ),
],
],
'expected' => file_get_contents(__DIR__ . '/HTML/output_with_relative_img_lcp.php'),
],
'shouldApplyFetchPriorityToAbsoluteImage' => [
'config' => [
'html' => $html_input_with_absolute_img_lcp,
'row' => [
'status' => 'completed',
'url' => 'http://example.org',
'lcp' => json_encode( (object) [
'type' => 'img',
'src' => 'http://example.com/wp-content/uploads/sample_absolute_image.jpg',
] ),
'viewport' => json_encode ( [] ),
],
],
'expected' => file_get_contents(__DIR__ . '/HTML/output_with_absolute_img_lcp.php'),
],
'shouldApplyFetchPriorityToImageWithDomain' => [
'config' => [
'html' => $html_input_with_domain_img_lcp,
'row' => [
'status' => 'completed',
'url' => 'http://example.org',
'lcp' => json_encode( (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/sample_url_image.png',
] ),
'viewport' => json_encode ( [] ),
],
],
'expected' => file_get_contents(__DIR__ . '/HTML/output_lcp_image.php'),
],
'shouldNotApplyFetchPriorityToImageWithFetchpriority' => [
'config' => [
'html' => file_get_contents(__DIR__ . '/HTML/input_lcp_with_fetchpriority.html'),
'row' => [
'status' => 'completed',
'url' => 'http://example.org',
'lcp' => json_encode( (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/sample_relative_image.jpg',
] ),
'viewport' => json_encode ( [] ),
],
],
'expected' => file_get_contents(__DIR__ . '/HTML/output_lcp_with_fetchpriority.html'),
],
'shouldNotApplyFetchPriorityToImageWithDuplicateMarkup' => [
'config' => [
'html' => file_get_contents(__DIR__ . '/HTML/input_lcp_with_markup_comment.html'),
'row' => [
'status' => 'completed',
'url' => 'http://example.org',
'lcp' => json_encode( (object) [
'type' => 'img',
'src' => 'http://example.org/wp-content/uploads/sample_relative_image.jpg',
] ),
'viewport' => json_encode ( [] ),
],
],
'expected' => file_get_contents(__DIR__ . '/HTML/output_lcp_with_markup_comment.html'),
],
],
'shouldPreloadPictureTag' => [
'config' => [
Expand Down

0 comments on commit 58962d2

Please sign in to comment.