Merge pull request #1079 from WordPress/feature/image-loading-optimiz…

…ation

Merge Optimization Detective into trunk

.github/CODEOWNERS

@@ -63,3 +63,7 @@
 # Plugin: Embed Optimizer
 /plugins/embed-optimizer                    @adamsilverstein @westonruter
 /tests/plugins/embed-optimizer              @adamsilverstein @westonruter
+
+# Plugin: Optimization Detective
+/plugins/optimization-detective             @westonruter @felixarntz
+/tests/plugins/optimization-detective       @westonruter @felixarntz

.github/workflows/php-test-plugins.yml

@@ -61,6 +61,8 @@ jobs:
           cache: npm
       - name: npm install
         run: npm ci
+      - name: Build assets
+        run: npm run build
       - name: Install WordPress
         run: npm run wp-env start
         # Note that `composer update` is required instead of `composer install`

.github/workflows/php-test.yml

@@ -62,6 +62,8 @@ jobs:
           cache: npm
       - name: npm install
         run: npm ci
+      - name: Remove standalone plugins from wp-env config
+        run: jq '.plugins = [.plugins[0]]' .wp-env.json > .wp-env.override.json
       - name: Install WordPress
         run: npm run wp-env start
         # Note that `composer update` is required instead of `composer install`

.gitignore

@@ -23,6 +23,7 @@ nbproject/
 
 build
 .wp-env.override.json
+*.asset.php
 build-cs/vendor/
 build-cs/composer.lock
 
@@ -32,6 +33,7 @@ build-cs/composer.lock
 
 node_modules/
 vendor/
+plugins/optimization-detective/detection/web-vitals*
 
 ############
 ## OSes

.wp-env.json

@@ -5,6 +5,7 @@
     "./plugins/auto-sizes",
     "./plugins/dominant-color-images",
     "./plugins/embed-optimizer",
+    "./plugins/optimization-detective",
     "./plugins/speculation-rules",
     "./plugins/webp-uploads"
   ],

bin/webpack/utils.js

@@ -77,8 +77,30 @@ const generateBuildManifest = ( slug, from ) => {
 	fs.writeFileSync( manifestPath, JSON.stringify( manifest, null, 2 ) );
 };
 
+/**
+ * Transformer to get version from package.json and return it as a PHP file.
+ *
+ * @param {Buffer} content      The content as a Buffer of the file being transformed.
+ * @param {string} absoluteFrom The absolute path to the file being transformed.
+ *
+ * @return {Buffer|string} The transformed content.
+ */
+const assetDataTransformer = ( content, absoluteFrom ) => {
+	if ( 'package.json' !== path.basename( absoluteFrom ) ) {
+		return content;
+	}
+
+	const contentAsString = content.toString();
+	const contentAsJson = JSON.parse( contentAsString );
+	const { version } = contentAsJson;
+
+	return `<?php return array('dependencies' => array(), 'version' => '${ version }');`;
+};
+
 module.exports = {
+	getPluginRootPath,
 	deleteFileOrDirectory,
 	getPluginVersion,
 	generateBuildManifest,
+	assetDataTransformer,
 };

composer.json

@@ -17,6 +17,7 @@
   },
   "require": {
     "composer/installers": "~1.0",
+    "ext-dom": "*",
     "ext-json": "*",
     "php": ">=7|^8"
   },
@@ -31,12 +32,14 @@
       "@lint:auto-sizes",
       "@lint:dominant-color-images",
       "@lint:embed-optimizer",
+      "@lint:optimization-detective",
       "@lint:speculation-rules",
       "@lint:webp-uploads"
     ],
     "lint:auto-sizes": "@lint -- ./plugins/auto-sizes --standard=./plugins/auto-sizes/phpcs.xml.dist",
     "lint:dominant-color-images": "@lint -- ./plugins/dominant-color-images --standard=./plugins/dominant-color-images/phpcs.xml.dist",
     "lint:embed-optimizer": "@lint -- ./plugins/embed-optimizer --standard=./plugins/embed-optimizer/phpcs.xml.dist",
+    "lint:optimization-detective": "@lint -- ./plugins/optimization-detective --standard=./plugins/optimization-detective/phpcs.xml.dist",
     "lint:speculation-rules": "@lint -- ./plugins/speculation-rules --standard=./plugins/speculation-rules/phpcs.xml.dist",
     "lint:webp-uploads": "@lint -- ./plugins/webp-uploads --standard=./plugins/webp-uploads/phpcs.xml.dist",
     "test": "phpunit --verbose --testsuite performance-lab",
@@ -53,13 +56,15 @@
       "@test:auto-sizes",
       "@test:dominant-color-images",
       "@test:embed-optimizer",
+      "@test:optimization-detective",
       "@test:speculation-rules",
       "@test:webp-uploads"
     ],
     "test-multisite:plugins": [
       "@test-multisite:auto-sizes",
       "@test-multisite:dominant-color-images",
       "@test-multisite:embed-optimizer",
+      "@test-multisite:optimization-detective",
       "@test-multisite:speculation-rules",
       "@test-multisite:webp-uploads"
     ],
@@ -69,6 +74,8 @@
     "test-multisite:dominant-color-images": "phpunit -c tests/multisite.xml --verbose --testsuite dominant-color-images",
     "test:embed-optimizer": "phpunit --verbose --testsuite embed-optimizer",
     "test-multisite:embed-optimizer": "phpunit -c tests/multisite.xml --verbose --testsuite embed-optimizer",
+    "test:optimization-detective": "phpunit --verbose --testsuite optimization-detective",
+    "test-multisite:optimization-detective": "phpunit -c tests/multisite.xml --verbose --testsuite optimization-detective",
     "test:speculation-rules": "phpunit --verbose --testsuite speculation-rules",
     "test-multisite:speculation-rules": "phpunit -c tests/multisite.xml --verbose --testsuite speculation-rules",
     "test:webp-uploads": "phpunit --verbose --testsuite webp-uploads",

includes/admin/server-timing.php

@@ -43,16 +43,18 @@ function perflab_add_server_timing_page() {
  * @since 2.6.0
  */
 function perflab_load_server_timing_page() {
-	/*
-	 * This settings section technically includes a field, however it is directly rendered as part of the section
-	 * callback due to requiring custom markup.
-	 */
-	add_settings_section(
-		'output-buffering',
-		__( 'Output Buffering', 'performance-lab' ),
-		'perflab_render_server_timing_page_output_buffering_section',
-		PERFLAB_SERVER_TIMING_SCREEN
-	);
+	if ( ! has_filter( 'template_include', 'od_buffer_output' ) ) {
+		/*
+		 * This settings section technically includes a field, however it is directly rendered as part of the section
+		 * callback due to requiring custom markup.
+		 */
+		add_settings_section(
+			'output-buffering',
+			__( 'Output Buffering', 'performance-lab' ),
+			'perflab_render_server_timing_page_output_buffering_section',
+			PERFLAB_SERVER_TIMING_SCREEN
+		);
+	}
 
 	// Minor style tweaks to improve appearance similar to other core settings screen instances.
 	add_action(
@@ -93,7 +95,7 @@ static function () {
 				);
 				?>
 			</p>
-			<?php if ( ! perflab_server_timing_use_output_buffer() ) : ?>
+			<?php if ( ! perflab_server_timing_use_output_buffer() && ! has_filter( 'template_include', 'od_buffer_output' ) ) : ?>
 				<p>
 					<?php
 					echo wp_kses(

includes/server-timing/class-perflab-server-timing.php

@@ -225,6 +225,21 @@ public function use_output_buffer() {
 	 * @return mixed Unmodified value of $passthrough.
 	 */
 	public function on_template_include( $passthrough = null ) {
+		// Skip doing anything with output buffering if it is already enabled via Optimization Detective.
+		if ( has_filter( 'template_include', 'od_buffer_output' ) ) {
+			// It feels better if this could rather be replaced with add_action( 'shutdown', [ $this, 'send_header' ] )
+			// However, this does not work because the buffer is sent before the shutdown callback is executed.
+			add_filter(
+				'od_template_output_buffer',
+				function ( $buffer ) {
+					$this->send_header();
+					return $buffer;
+				},
+				PHP_INT_MAX
+			);
+			return $passthrough;
+		}
+
 		if ( ! $this->use_output_buffer() ) {
 			$this->send_header();
 			return $passthrough;

load.php

@@ -94,6 +94,7 @@ function perflab_get_standalone_plugin_version_constants() {
 		'webp-uploads'            => 'WEBP_UPLOADS_VERSION',
 		'dominant-color-images'   => 'DOMINANT_COLOR_IMAGES_VERSION',
 		'embed-optimizer'         => 'EMBED_OPTIMIZER_VERSION',
+		// TODO: Add image loading optimization plugin, dependent of Optimization Detective, once ready for end users.
 		'performant-translations' => 'PERFORMANT_TRANSLATIONS_VERSION',
 		'auto-sizes'              => 'IMAGE_AUTO_SIZES_VERSION',
 		'speculation-rules'       => 'SPECULATION_RULES_VERSION',