closes #6672 add attribute to link preload (#6674)

wp-media · Jun 19, 2024 · 1b3b8a5 · 1b3b8a5
1 parent 6bc91c3
commit 1b3b8a5
Show file tree

Hide file tree

Showing 26 changed files with 52 additions and 52 deletions.
diff --git a/inc/Engine/Media/AboveTheFold/Frontend/Controller.php b/inc/Engine/Media/AboveTheFold/Frontend/Controller.php
@@ -266,7 +266,7 @@ private function generate_lcp_link_tag_with_sources( $lcp ): array {
 		}
 
 		$tag       = '';
-		$start_tag = '<link rel="preload" as="image" ';
+		$start_tag = '<link rel="preload" data-rocket-preload as="image" ';
 		$end_tag   = ' fetchpriority="high">';
 
 		$sources = [];

diff --git a/inc/Engine/Optimization/GoogleFonts/AbstractGFOptimization.php b/inc/Engine/Optimization/GoogleFonts/AbstractGFOptimization.php
@@ -116,7 +116,7 @@ protected function get_font_display_value(): string {
 	 */
 	protected function get_optimized_markup( string $url ): string {
 		return sprintf(
-			'<link rel="preload" as="style" href="%1$s" /><link rel="stylesheet" href="%1$s" media="print" onload="this.media=\'all\'" /><noscript><link rel="stylesheet" href="%1$s" /></noscript>', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
+			'<link rel="preload" data-rocket-preload as="style" href="%1$s" /><link rel="stylesheet" href="%1$s" media="print" onload="this.media=\'all\'" /><noscript><link rel="stylesheet" href="%1$s" /></noscript>', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
 			$url
 		);
 	}

diff --git a/inc/Engine/Optimization/RUCSS/Controller/UsedCSS.php b/inc/Engine/Optimization/RUCSS/Controller/UsedCSS.php
@@ -615,7 +615,7 @@ private function preload_links( array $urls ): string {
 		$links = '';
 
 		foreach ( $urls as $url ) {
-			$links .= '<link rel="preload" as="font" href="' . esc_url( $url ) . '" crossorigin>';
+			$links .= '<link rel="preload" data-rocket-preload as="font" href="' . esc_url( $url ) . '" crossorigin>';
 		}
 
 		return $links;

diff --git a/.../Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_bg_responsive_imgset_template.php b/.../Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_bg_responsive_imgset_template.php
@@ -8,7 +8,7 @@
 <html>
 <head>
 	<?php wp_head() ?>
-	<title>lcp_bg_responsive_template</title><link rel="preload" as="image" imagesrcset="http://example.org/wp-content/rocket-test-data/images/lcp/testavif.avif 1dppx,http://example.org/wp-content/rocket-test-data/images/lcp/testwebp.webp 2dppx" fetchpriority="high">
+	<title>lcp_bg_responsive_template</title><link rel="preload" data-rocket-preload as="image" imagesrcset="http://example.org/wp-content/rocket-test-data/images/lcp/testavif.avif 1dppx,http://example.org/wp-content/rocket-test-data/images/lcp/testwebp.webp 2dppx" fetchpriority="high">
 	<style>
 		.imgset-css-background-images{
 			width: 100%;

diff --git a/.../Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_bg_responsive_webkit_template.php b/.../Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_bg_responsive_webkit_template.php
@@ -8,7 +8,7 @@
 <html>
 <head>
 	<?php wp_head() ?>
-	<title>lcp_bg_responsive_template</title><link rel="preload" as="image" imagesrcset="https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8 1dppx,https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg 2dppx" fetchpriority="high">
+	<title>lcp_bg_responsive_template</title><link rel="preload" data-rocket-preload as="image" imagesrcset="https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8 1dppx,https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg 2dppx" fetchpriority="high">
 	<style>
 		.webkit-BG-images-external-domain {
 

diff --git a/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_image.php b/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_image.php
@@ -1,6 +1,6 @@
 <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">
+	<title>LCP/ATF image test</title><link rel="preload" data-rocket-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">

diff --git a/...Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_layered_bg.php b/...Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_layered_bg.php
@@ -8,7 +8,7 @@
 <html>
 <head>
 	<?php wp_head() ?>
-	<title>lcp_layered_bg</title><link rel="preload" as="image" href="https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8" fetchpriority="high"><link rel="preload" as="image" href="https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg" fetchpriority="high">
+	<title>lcp_layered_bg</title><link rel="preload" data-rocket-preload as="image" href="https://fastly.picsum.photos/id/976/200/300.jpg?hmac=s1Uz9fgJv32r8elfaIYn7pLpQXps7X9oYNwC5XirhO8" fetchpriority="high"><link rel="preload" data-rocket-preload as="image" href="https://rocketlabsqa.ovh/wp-content/rocket-test-data/images/fixtheissue.jpg" fetchpriority="high">
 	<style>
 		.bg-layared-css-background-images{
 			width: 100%;

diff --git a/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_picture.php b/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_picture.php
@@ -8,7 +8,7 @@
 <html>
 <head>
 	<?php wp_head() ?>
-	<title>lcp_responsive_bg</title><link rel="preload" as="image" href="small_cat.jpg" media="(max-width: 400px)" fetchpriority="high"><link rel="preload" as="image" href="medium_cat.jpg" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high"><link rel="preload" as="image" href="large_cat.jpg" media="(min-width: 800.1px)" fetchpriority="high">
+	<title>lcp_responsive_bg</title><link rel="preload" data-rocket-preload as="image" href="small_cat.jpg" media="(max-width: 400px)" fetchpriority="high"><link rel="preload" data-rocket-preload as="image" href="medium_cat.jpg" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high"><link rel="preload" data-rocket-preload as="image" href="large_cat.jpg" media="(min-width: 800.1px)" fetchpriority="high">
 </head>
 <body>
 

diff --git a/.../Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_picture_2.php b/.../Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_picture_2.php
@@ -8,7 +8,7 @@
 <html>
 <head>
 	<?php wp_head() ?>
-	<title>lcp_responsive_bg</title><link rel="preload" as="image" imagesrcset="https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1024x576.jpg.avif 1024w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-300x169.jpg.avif 300w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-768x432.jpg.avif 768w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1536x864.jpg.avif 1536w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1200x675.jpg.avif 1200w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-600x338.jpg.avif 600w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia.jpg.avif 1920w" imagesizes="(max-width: 1024px) 100vw, 1024px" fetchpriority="high">
+	<title>lcp_responsive_bg</title><link rel="preload" data-rocket-preload as="image" imagesrcset="https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1024x576.jpg.avif 1024w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-300x169.jpg.avif 300w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-768x432.jpg.avif 768w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1536x864.jpg.avif 1536w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1200x675.jpg.avif 1200w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-600x338.jpg.avif 600w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia.jpg.avif 1920w" imagesizes="(max-width: 1024px) 100vw, 1024px" fetchpriority="high">
 </head>
 <body>
 

diff --git a/.../Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_picture_3.php b/.../Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_picture_3.php
@@ -8,7 +8,7 @@
 <html>
 <head>
 	<?php wp_head() ?>
-	<title>lcp_responsive_bg</title><link rel="preload" as="image" imagesrcset="https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1024x576.jpg.avif 1024w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-300x169.jpg.avif 300w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-768x432.jpg.avif 768w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1536x864.jpg.avif 1536w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1200x675.jpg.avif 1200w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-600x338.jpg.avif 600w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia.jpg.avif 1920w" imagesizes="(max-width: 1024px) 100vw, 1024px" fetchpriority="high">
+	<title>lcp_responsive_bg</title><link rel="preload" data-rocket-preload as="image" imagesrcset="https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1024x576.jpg.avif 1024w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-300x169.jpg.avif 300w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-768x432.jpg.avif 768w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1536x864.jpg.avif 1536w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-1200x675.jpg.avif 1200w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia-600x338.jpg.avif 600w, https://imagify.rocketlabsqa.ovh/wp-content/uploads/2024/05/home-new-bg-free-img-—-kopia.jpg.avif 1920w" imagesizes="(max-width: 1024px) 100vw, 1024px" fetchpriority="high">
 </head>
 <body>
 

diff --git a/.../Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_picture_4.php b/.../Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_picture_4.php
@@ -8,7 +8,7 @@
 <html>
 <head>
 	<?php wp_head() ?>
-	<title>lcp_responsive_bg</title><link rel="preload" as="image" href="https://variance.pl/wp-content/uploads/2024/05/Kwiatowy-Ksiezyc-400x600.webp" media="(max-width: 500px)" fetchpriority="high"><link rel="preload" as="image" href="https://variance.pl/wp-content/uploads/2024/05/Kwiatowy-Ksiezyc-768x513.webp" media="(min-width: 501px) and (max-width: 768px)" fetchpriority="high"><link rel="preload" as="image" href="https://variance.pl/wp-content/uploads/2024/05/Kwiatowy-Ksiezyc-1348x900.webp" media="(min-width: 768.1px)" fetchpriority="high">
+	<title>lcp_responsive_bg</title><link rel="preload" data-rocket-preload as="image" href="https://variance.pl/wp-content/uploads/2024/05/Kwiatowy-Ksiezyc-400x600.webp" media="(max-width: 500px)" fetchpriority="high"><link rel="preload" data-rocket-preload as="image" href="https://variance.pl/wp-content/uploads/2024/05/Kwiatowy-Ksiezyc-768x513.webp" media="(min-width: 501px) and (max-width: 768px)" fetchpriority="high"><link rel="preload" data-rocket-preload as="image" href="https://variance.pl/wp-content/uploads/2024/05/Kwiatowy-Ksiezyc-1348x900.webp" media="(min-width: 768.1px)" fetchpriority="high">
 </head>
 <body>
 

diff --git a/...Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_responsive.php b/...Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_responsive.php
@@ -8,7 +8,7 @@
 <html>
 <head>
 	<?php wp_head() ?>
-	<title>lcp_responsive_bg</title><link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">
+	<title>lcp_responsive_bg</title><link rel="preload" data-rocket-preload as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">
 </head>
 <body>
 

diff --git a/.../Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_single_bg.php b/.../Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_single_bg.php
@@ -8,7 +8,7 @@
 <html>
 <head>
 	<?php wp_head() ?>
-	<title>lcp_single_bg</title><link rel="preload" as="image" href="http://example.org/wp-content/rocket-test-data/images/lcp/testavif.avif" fetchpriority="high">
+	<title>lcp_single_bg</title><link rel="preload" data-rocket-preload as="image" href="http://example.org/wp-content/rocket-test-data/images/lcp/testavif.avif" fetchpriority="high">
 	<style>
 		.img-single-css-background-image{
 			width: 100%;

diff --git a/...inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_with_fetchpriority.html b/...inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_with_fetchpriority.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-	<title>Relative test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/sample_relative_image.jpg" fetchpriority="high">
+	<title>Relative test</title><link rel="preload" data-rocket-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>

diff --git a/...nc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_with_markup_comment.html b/...nc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_lcp_with_markup_comment.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-	<title>Relative test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/sample_relative_image.jpg" fetchpriority="high">
+	<title>Relative test</title><link rel="preload" data-rocket-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">-->

diff --git a/...ixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_bg_image_lcp.html b/...ixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_bg_image_lcp.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-	<title>Test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/image.jpg" fetchpriority="high">
+	<title>Test</title><link rel="preload" data-rocket-preload as="image" href="http://example.org/wp-content/uploads/image.jpg" fetchpriority="high">
     <style>
        .test{
             width: 100%;

diff --git a/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_img_lcp.html b/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_img_lcp.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-	<title>Test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/image.jpg" fetchpriority="high">
+	<title>Test</title><link rel="preload" data-rocket-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">

diff --git a/...ures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_picture_img_lcp.html b/...ures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_picture_img_lcp.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-	<title>Test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/image.jpg" fetchpriority="high">
+	<title>Test</title><link rel="preload" data-rocket-preload as="image" href="http://example.org/wp-content/uploads/image.jpg" fetchpriority="high">
 </head>
 <body>
     <picture>

diff --git a/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_preload.html b/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_w_preload.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-	<title>Test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/image.jpg" fetchpriority="high">
+	<title>Test</title><link rel="preload" data-rocket-preload as="image" href="http://example.org/wp-content/uploads/image.jpg" fetchpriority="high">
 </head>
 <body>
 </body>

diff --git a/...s/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_with_absolute_img_lcp.php b/...s/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_with_absolute_img_lcp.php
@@ -1,6 +1,6 @@
 <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">
+	<title>Absolute url test</title><link rel="preload" data-rocket-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">

diff --git a/...s/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_with_relative_img_lcp.php b/...s/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/output_with_relative_img_lcp.php
@@ -1,6 +1,6 @@
 <html>
 <head>
-	<title>Relative test</title><link rel="preload" as="image" href="http://example.org/wp-content/uploads/sample_relative_image.jpg" fetchpriority="high">
+	<title>Relative test</title><link rel="preload" data-rocket-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">