Merge pull request #2109 from WordPress/fix/image-prioritizer-sizes

Remove responsive image sizes computation

Author: westonruter

bin/update-test-case-snapshots.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+# Updates snapshots used for testing Optimization Detective
+# Move actual.html files on top of an expected.html file in directories that also contain buffer.html files.
+
+set -e
+
+cd "$(git rev-parse --show-toplevel)"
+
+count=0
+
+while IFS= read -r -d '' actual_file; do
+	dir_path=$(dirname "$actual_file")
+	buffer_file="$dir_path/buffer.html"
+	if [ ! -e "$buffer_file" ]; then
+		continue
+	fi
+	expected_file="$dir_path/expected.html"
+
+	count=$((count + 1))
+
+	mv "$actual_file" "$expected_file"
+	echo "Updated $expected_file"
+done < <(find plugins -name 'actual.html' -path '*/test-cases/*' -print0)
+
+echo "Performed $count snapshot update(s)"

package.json

@@ -81,6 +81,7 @@
     "test-php-multisite:view-transitions": "wp-env run tests-cli --env-cwd=/var/www/html/wp-content/plugins/performance composer test-multisite:view-transitions",
     "test-php-multisite:web-worker-offloading": "wp-env run tests-cli --env-cwd=/var/www/html/wp-content/plugins/performance composer test-multisite:web-worker-offloading",
     "test-php-multisite:webp-uploads": "wp-env run tests-cli --env-cwd=/var/www/html/wp-content/plugins/performance composer test-multisite:webp-uploads",
+    "update-test-case-snapshots": "bin/update-test-case-snapshots.sh",
     "wp-env": "wp-env",
     "prepare": "husky"
   }

plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php

@@ -167,23 +167,11 @@ private function process_img( OD_HTML_Tag_Processor $processor, OD_Tag_Visitor_C
 				$sizes = (string) preg_replace( '/^[ \t\f\r\n]*auto[ \t\f\r\n]*(,[ \t\f\r\n]*)?/i', '', $sizes );
 			}
 
-			// Compute more accurate sizes when it isn't lazy-loaded and sizes=auto isn't taking care of it.
-			if ( ! $is_lazy ) {
-				$computed_sizes = $this->compute_sizes( $context );
-				if ( count( $computed_sizes ) > 0 ) {
-					$new_sizes = join( ', ', $computed_sizes );
-
-					// Preserve the original sizes as a fallback when URL Metrics are missing from one or more viewport group.
-					// Note that when all groups are populated, the media features will span all possible viewport widths from
-					// zero to infinity, so there is no need to include the original sizes since they will never match.
-					if ( '' !== $sizes && ! $context->url_metric_group_collection->is_every_group_populated() ) {
-						$new_sizes .= ", $sizes";
-					}
-					$sizes = $new_sizes;
-				}
+			if ( '' === trim( $sizes, " \t\f\r\n" ) ) {
+				$processor->remove_attribute( 'sizes' );
+			} else {
+				$processor->set_attribute( 'sizes', $sizes );
 			}
-
-			$processor->set_attribute( 'sizes', $sizes );
 		}
 
 		$parent_tag = $this->get_parent_tag_name( $context );
@@ -412,38 +400,4 @@ private function sizes_attribute_includes_valid_auto( string $sizes_attr ): bool
 			return 'auto' === $sizes_attr || str_starts_with( $sizes_attr, 'auto,' );
 		}
 	}
-
-	/**
-	 * Computes responsive sizes for the current element based on its boundingClientRect width captured in URL Metrics.
-	 *
-	 * @since 1.0.0
-	 *
-	 * @param OD_Tag_Visitor_Context $context Context.
-	 * @return non-empty-string[] Computed sizes.
-	 */
-	private function compute_sizes( OD_Tag_Visitor_Context $context ): array {
-		$sizes = array();
-
-		$xpath = $context->processor->get_xpath();
-		foreach ( $context->url_metric_group_collection as $group ) {
-			// Obtain the maximum width that the image appears among all URL Metrics collected for this viewport group.
-			$element_max_width = 0;
-			foreach ( $group->get_xpath_elements_map()[ $xpath ] ?? array() as $element ) {
-				$element_max_width = max( $element_max_width, $element->get_bounding_client_rect()['width'] );
-			}
-
-			// Use the maximum width as the size for image in this breakpoint.
-			if ( $element_max_width > 0 ) {
-				$size          = sprintf( '%dpx', $element_max_width );
-				$media_feature = od_generate_media_query( $group->get_minimum_viewport_width(), $group->get_maximum_viewport_width() );
-				if ( null !== $media_feature ) {
-					// Note: The null case only happens when a site has filtered od_breakpoint_max_widths to be an empty array, meaning there is only one viewport group.
-					$size = "$media_feature $size";
-				}
-				$sizes[] = $size;
-			}
-		}
-
-		return $sizes;
-	}
 }

plugins/image-prioritizer/readme.txt

@@ -28,8 +28,8 @@ The current optimizations include:
    2. Implement lazy loading of CSS background images added via inline `style` attributes.
    3. Lazy-load `VIDEO` tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a `VIDEO` is the LCP element, it gets `preload=auto`; if it is in an initial viewport, the `preload=metadata` default is left; if it is not in an initial viewport, it gets `preload=none`. Lazy-loaded videos also get initial `preload`, `autoplay`, and `poster` attributes restored when the `VIDEO` is going to enter the viewport.
 5. Responsive image sizes:
-   1. Compute the `sizes` attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by `sizes=auto`).
-   2. Ensure [`sizes=auto`](https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/) is set on `IMG` tags after setting correct lazy-loading (above).
+   1. Ensure [`sizes=auto`](https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/) is set on `IMG` tags after setting correct lazy-loading (above).
+   2. ~~Compute the `sizes` attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by `sizes=auto`).~~ (This has been removed due to an [issue](https://github.com/WordPress/performance/issues/2098); use [Enhanced Responsive Images instead](https://wordpress.org/plugins/auto-sizes/).)
 6. Reduce the size of the `poster` image of a `VIDEO` from full size to the size appropriate for the maximum width of the video (on desktop).
 
 **This plugin requires the [Optimization Detective](https://wordpress.org/plugins/optimization-detective/) plugin as a dependency.** Please refer to that plugin for additional background on how this plugin works as well as additional developer options.