Merge branch 'feature/lcp-above-the-fold-optimization' into fix/6509-…

…clear-admin-url
wp-media · Apr 19, 2024 · fb81d0a · fb81d0a
2 parents e246da6 + af00697
commit fb81d0a
Show file tree

Hide file tree

Showing 17 changed files with 258 additions and 32 deletions.
diff --git a/inc/Engine/Activation/Activation.php b/inc/Engine/Activation/Activation.php
@@ -4,8 +4,13 @@
 
 use WP_Rocket\Admin\Options;
 use WP_Rocket\Dependencies\League\Container\Container;
-use WP_Rocket\Event_Management\Event_Manager;
+use WP_Rocket\ServiceProvider\Options as OptionsServiceProvider;
+use WP_Rocket\Engine\Preload\Activation\ServiceProvider as PreloadActivationServiceProvider;
+use WP_Rocket\Engine\License\ServiceProvider as LicenseServiceProvider;
+use WP_Rocket\Logger\ServiceProvider as LoggerServiceProvider;
+use WP_Rocket\Engine\Media\AboveTheFold\Activation\ServiceProvider as AboveTheFoldActivationServiceProvider;
 use WP_Rocket\ThirdParty\Hostings\HostResolver;
+use WP_Rocket\ThirdParty\Hostings\ServiceProvider as HostingsServiceProvider;
 
 /**
  * Plugin activation controller
@@ -38,14 +43,14 @@ public static function activate_plugin() {
 		$container->add( 'template_path', WP_ROCKET_PATH . 'views' );
 		$options_api = new Options( 'wp_rocket_' );
 		$container->add( 'options_api', $options_api );
-		$container->addServiceProvider( \WP_Rocket\ServiceProvider\Options::class );
-		$container->addServiceProvider( \WP_Rocket\Engine\Preload\Activation\ServiceProvider::class );
-		$container->addServiceProvider( ServiceProvider::class );
-		$container->addServiceProvider( \WP_Rocket\ThirdParty\Hostings\ServiceProvider::class );
-		$container->addServiceProvider( \WP_Rocket\Engine\License\ServiceProvider::class );
-		$container->addServiceProvider( \WP_Rocket\Logger\ServiceProvider::class );
+		$container->addServiceProvider( new OptionsServiceProvider() );
+		$container->addServiceProvider( new PreloadActivationServiceProvider() );
+		$container->addServiceProvider( new ServiceProvider() );
+		$container->addServiceProvider( new HostingsServiceProvider() );
+		$container->addServiceProvider( new LicenseServiceProvider() );
+		$container->addServiceProvider( new LoggerServiceProvider() );
 		$container->get( 'logger' );
-		$container->addServiceProvider( \WP_Rocket\Engine\Media\AboveTheFold\Activation\ServiceProvider::class );
+		$container->addServiceProvider( new AboveTheFoldActivationServiceProvider() );
 
 		$host_type = HostResolver::get_host_service();
 

diff --git a/inc/Engine/Deactivation/Deactivation.php b/inc/Engine/Deactivation/Deactivation.php
@@ -8,6 +8,7 @@
 use WP_Rocket\Engine\Support\ServiceProvider as SupportServiceProvider;
 use WP_Rocket\ServiceProvider\Options as OptionsServiceProvider;
 use WP_Rocket\ThirdParty\Hostings\HostResolver;
+use WP_Rocket\ThirdParty\Hostings\ServiceProvider as HostingsServiceProvider;
 
 class Deactivation {
 	/**
@@ -35,12 +36,12 @@ public static function deactivate_plugin() {
 		$container->add( 'options_api', new Options( 'wp_rocket_' ) );
 		$container->add( 'template_path', WP_ROCKET_PATH . 'views' );
 
-		$container->addServiceProvider( OptionsServiceProvider::class );
-		$container->addServiceProvider( BeaconServiceProvider::class );
-		$container->addServiceProvider( SupportServiceProvider::class );
+		$container->addServiceProvider( new OptionsServiceProvider() );
+		$container->addServiceProvider( new BeaconServiceProvider() );
+		$container->addServiceProvider( new SupportServiceProvider() );
 
-		$container->addServiceProvider( 'WP_Rocket\Engine\Deactivation\ServiceProvider' );
-		$container->addServiceProvider( 'WP_Rocket\ThirdParty\Hostings\ServiceProvider' );
+		$container->addServiceProvider( new ServiceProvider() );
+		$container->addServiceProvider( new HostingsServiceProvider() );
 
 		$host_type = HostResolver::get_host_service();
 

diff --git a/inc/Engine/Media/AboveTheFold/Activation/ServiceProvider.php b/inc/Engine/Media/AboveTheFold/Activation/ServiceProvider.php
@@ -28,12 +28,23 @@ class ServiceProvider extends AbstractServiceProvider {
 		'atf_activation',
 	];
 
+	/**
+	 * Check if the service provider provides a specific service.
+	 *
+	 * @param string $id The id of the service.
+	 *
+	 * @return bool
+	 */
+	public function provides( string $id ): bool {
+		return in_array( $id, $this->provides, true );
+	}
+
 	/**
 	 * Registers items with the container
 	 *
 	 * @return void
 	 */
-	public function register() {
+	public function register(): void {
 		$this->getContainer()->add( 'atf_context', Context::class );
 
 		$this->getContainer()->add( 'warmup_apiclient', APIClient::class )

diff --git a/inc/Engine/Media/AboveTheFold/Frontend/Controller.php b/inc/Engine/Media/AboveTheFold/Frontend/Controller.php
@@ -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] ) ) {
@@ -217,7 +217,7 @@ private function get_path_for_exclusion( array $exclusions ): array {
 		$exclusions = array_map(
 				function ( $exclusion ) {
 					$exclusion = wp_parse_url( $exclusion );
-					return $exclusion['path'];
+					return ltrim( $exclusion['path'], '/' );
 				},
 			$exclusions
 			);

diff --git a/inc/Engine/Media/AboveTheFold/WarmUp/APIClient.php b/inc/Engine/Media/AboveTheFold/WarmUp/APIClient.php
@@ -15,6 +15,8 @@ class APIClient extends BaseAPIClient {
 	 * @return array
 	 */
 	public function add_to_atf_queue( string $url ): array {
+		$is_home = Utils::is_home( $url );
+
 		$url = add_query_arg(
 			[
 				'wpr_imagedimensions' => 1,
@@ -24,7 +26,7 @@ public function add_to_atf_queue( string $url ): array {
 
 		$config = [
 			'optimization_list' => '',
-			'is_home'           => Utils::is_home( $url ),
+			'is_home'           => $is_home,
 		];
 
 		return $this->add_to_queue( $url, $config );

diff --git a/inc/Engine/Media/AboveTheFold/WarmUp/Controller.php b/inc/Engine/Media/AboveTheFold/WarmUp/Controller.php
@@ -6,6 +6,7 @@
 use WP_Rocket\Engine\Common\Context\ContextInterface;
 use WP_Rocket\Admin\Options_Data;
 use WP_Rocket\Engine\License\API\User;
+use WP_Rocket\Engine\Common\Utils;
 
 class Controller {
 
@@ -125,12 +126,16 @@ function ( $link ) {
 			function ( $link ) use ( $home_url ) {
 				$link_host = wp_parse_url( $link );
 				$site_host = wp_parse_url( $home_url );
-
 				/**
 				 * Check for valid link.
 				 * Check that no external link.
+				 * Check that it's not home.
 				 */
-				return wp_http_validate_url( $link ) && $link_host['host'] === $site_host['host'];
+				$is_valid_url = wp_http_validate_url( $link );
+				$is_same_host = isset( $link_host['host'] ) ? $link_host['host'] === $site_host['host'] : false;
+				$is_not_home  = ! Utils::is_home( $link );
+
+				return $is_valid_url && $is_same_host && $is_not_home;
 			}
 		);
 
@@ -144,6 +149,8 @@ function ( $link ) use ( $home_url ) {
 		 */
 		$link_number = apply_filters( 'rocket_atf_warmup_links_number', 10 );
 		$links       = array_slice( $links, 0, $link_number );
+		// Add home url to the list of links.
+		$links[] = home_url();
 
 		return $links;
 	}

diff --git a/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Controller/addExclusions.php b/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Controller/addExclusions.php
@@ -55,12 +55,12 @@
 			'row'                     => (object) [
 				'lcp'      => json_encode( (object) [
 					'type' => 'img',
-					'src'  => 'bar',
+					'src'  => 'https://example.com/bar.jpg',
 				] ),
 				'viewport' => json_encode( [
 					0 => (object) [
 						'type' => 'img',
-						'src'  => 'foobar',
+						'src'  => 'https://example.com/foobar.jpg',
 					],
 				] ),
 			],
@@ -73,8 +73,8 @@
 		],
 		'expected'   => [
 			'foo',
-			'bar',
-			'foobar',
+			'bar.jpg',
+			'foobar.jpg',
 		],
 	],
 ];
diff --git a/...Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_w_bg_image_lcp.html b/...Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_w_bg_image_lcp.html
@@ -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>
diff --git a/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_w_img_lcp.html b/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_w_img_lcp.html
@@ -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>
diff --git a/...tures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_w_picture_img_lcp.html b/...tures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/HTML/input_w_picture_img_lcp.html
@@ -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>
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
@@ -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>
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
@@ -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>
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
@@ -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>
diff --git a/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/lcp.php b/tests/Fixtures/inc/Engine/Media/AboveTheFold/Frontend/Subscriber/lcp.php
@@ -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' => [
@@ -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',
 						],
 					] ),
 				],
@@ -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,
+	],
 ];