Add PHPUnit tests for Image Loading Optimization

composer.json

@@ -28,6 +28,7 @@
   "require": {
     "composer/installers": "~1.0",
     "php": ">=7|^8",
+    "ext-dom": "*",
     "ext-json": "*"
   },
   "scripts": {

modules/images/image-loading-optimization/class-ilo-html-tag-processor.php

@@ -183,7 +183,11 @@ public function open_tags(): Generator {
 				yield $tag_name;
 
 				// Immediately pop off self-closing tags.
-				if ( in_array( $tag_name, self::VOID_TAGS, true ) ) {
+				if (
+					in_array( $tag_name, self::VOID_TAGS, true )
+					||
+					( $p->has_self_closing_flag() && $this->is_foreign_element() )
+				) {
 					array_pop( $this->open_stack_tags );
 				}
 			} else {
@@ -192,32 +196,21 @@ public function open_tags(): Generator {
 					continue;
 				}
 
-				// Since SVG and MathML can have a lot more self-closing/empty tags, potentially pop off the stack until getting to the open tag.
-				$did_splice = false;
-				if ( 'SVG' === $tag_name || 'MATH' === $tag_name ) {
-					$i = array_search( $tag_name, $this->open_stack_tags, true );
-					if ( false !== $i ) {
-						array_splice( $this->open_stack_tags, $i );
-						$did_splice = true;
-					}
-				}
-
-				if ( ! $did_splice ) {
-					$popped_tag_name = array_pop( $this->open_stack_tags );
-					if ( $popped_tag_name !== $tag_name && function_exists( 'wp_trigger_error' ) ) {
-						wp_trigger_error(
-							__METHOD__,
-							esc_html(
-								sprintf(
-									/* translators: 1: Popped tag name, 2: Closing tag name */
-									__( 'Expected popped tag stack element %1$s to match the currently visited closing tag %2$s.', 'performance-lab' ),
-									$popped_tag_name,
-									$tag_name
-								)
+				$popped_tag_name = array_pop( $this->open_stack_tags );
+				if ( $popped_tag_name !== $tag_name && function_exists( 'wp_trigger_error' ) ) {
+					wp_trigger_error(
+						__METHOD__,
+						esc_html(
+							sprintf(
+								/* translators: 1: Popped tag name, 2: Closing tag name */
+								__( 'Expected popped tag stack element %1$s to match the currently visited closing tag %2$s.', 'performance-lab' ),
+								$popped_tag_name,
+								$tag_name
 							)
-						);
-					}
+						)
+					);
 				}
+
 				array_splice( $this->open_stack_indices, count( $this->open_stack_tags ) + 1 );
 			}
 		}
@@ -236,6 +229,20 @@ private function get_breadcrumbs(): Generator {
 		}
 	}
 
+	/**
+	 * Determines whether currently inside a foreign element (MATH or SVG).
+	 *
+	 * @return bool In foreign element.
+	 */
+	private function is_foreign_element(): bool {
+		foreach ( $this->open_stack_tags as $open_stack_tag ) {
+			if ( 'MATH' === $open_stack_tag || 'SVG' === $open_stack_tag ) {
+				return true;
+			}
+		}
+		return false;
+	}
+
 	/**
 	 * Gets XPath for the current open tag.
 	 *

modules/images/image-loading-optimization/detection.php

@@ -33,7 +33,7 @@ function ilo_get_detection_script( string $slug, array $needed_minimum_viewport_
 	 *
 	 * @param int $detection_time_window Detection time window in milliseconds.
 	 */
-	$detection_time_window = apply_filters( 'perflab_image_loading_detection_time_window', 5000 );
+	$detection_time_window = apply_filters( 'ilo_detection_time_window', 5000 );
 
 	$detect_args = array(
 		'serveTime'                   => microtime( true ) * 1000, // In milliseconds for comparison with `Date.now()` in JavaScript.

modules/images/image-loading-optimization/optimization.php

@@ -30,26 +30,27 @@ function ilo_maybe_add_template_output_buffer_filter() {
  * @since n.e.x.t
  * @access private
  *
- * @param array $lcp_images_by_minimum_viewport_widths LCP images keyed by minimum viewport width, amended with attributes key for the IMG attributes.
+ * @param array<int, array{attributes: array{src?: string, srcset?: string, sizes?: string, crossorigin?: string}}|false> $lcp_elements_by_minimum_viewport_widths LCP images keyed by minimum viewport width, amended with attributes key for the IMG attributes.
  * @return string Markup for zero or more preload link tags.
  */
-function ilo_construct_preload_links( array $lcp_images_by_minimum_viewport_widths ): string {
+function ilo_construct_preload_links( array $lcp_elements_by_minimum_viewport_widths ): string {
 	$preload_links = array();
 
 	// This uses a for loop to be able to access the following element within the iteration, using a numeric index.
-	$minimum_viewport_widths = array_keys( $lcp_images_by_minimum_viewport_widths );
+	$minimum_viewport_widths = array_keys( $lcp_elements_by_minimum_viewport_widths );
 	for ( $i = 0, $len = count( $minimum_viewport_widths ); $i < $len; $i++ ) {
-		$lcp_element = $lcp_images_by_minimum_viewport_widths[ $minimum_viewport_widths[ $i ] ];
-		if ( false === $lcp_element || empty( $lcp_element['attributes'] ) ) {
-			// No LCP element at this breakpoint, so nothing to preload.
+		$lcp_element = $lcp_elements_by_minimum_viewport_widths[ $minimum_viewport_widths[ $i ] ];
+		if ( false === $lcp_element ) {
+			// No supported LCP element at this breakpoint, so nothing to preload.
 			continue;
 		}
 
-		$img_attributes = $lcp_element['attributes'];
+		// TODO: Add support for background images.
+		$attributes = $lcp_element['attributes'];
 
 		// Prevent preloading src for browsers that don't support imagesrcset on the link element.
-		if ( isset( $img_attributes['src'], $img_attributes['srcset'] ) ) {
-			unset( $img_attributes['src'] );
+		if ( isset( $attributes['src'], $attributes['srcset'] ) ) {
+			unset( $attributes['src'] );
 		}
 
 		// Add media query if it's going to be something other than just `min-width: 0px`.
@@ -60,12 +61,12 @@ function ilo_construct_preload_links( array $lcp_images_by_minimum_viewport_widt
 			if ( null !== $maximum_viewport_width ) {
 				$media_query .= sprintf( ' and ( max-width: %dpx )', $maximum_viewport_width );
 			}
-			$img_attributes['media'] = $media_query;
+			$attributes['media'] = $media_query;
 		}
 
 		// Construct preload link.
 		$link_tag = '<link data-ilo-added-tag rel="preload" fetchpriority="high" as="image"';
-		foreach ( array_filter( $img_attributes ) as $name => $value ) {
+		foreach ( array_filter( $attributes ) as $name => $value ) {
 			// Map img attribute name to link attribute name.
 			if ( 'srcset' === $name || 'sizes' === $name ) {
 				$name = 'image' . $name;
@@ -169,10 +170,13 @@ function ilo_optimize_template_output_buffer( string $buffer ): string {
 			$processor->remove_attribute( 'fetchpriority' );
 		}
 
+		// TODO: If the image is visible (intersectionRatio!=0) in any of the URL metrics, remove loading=lazy.
+		// TODO: Conversely, if an image is the LCP element for one breakpoint but not another, add loading=lazy. This won't hurt performance since the image is being preloaded.
+
 		// Capture the attributes from the LCP elements to use in preload links.
 		if ( isset( $lcp_element_minimum_viewport_width_by_xpath[ $xpath ] ) ) {
 			$attributes = array();
-			foreach ( array( 'src', 'srcset', 'sizes', 'crossorigin', 'integrity' ) as $attr_name ) {
+			foreach ( array( 'src', 'srcset', 'sizes', 'crossorigin' ) as $attr_name ) {
 				$attributes[ $attr_name ] = $processor->get_attribute( $attr_name );
 			}
 			foreach ( $lcp_element_minimum_viewport_width_by_xpath[ $xpath ] as $minimum_viewport_width ) {

modules/images/image-loading-optimization/storage/data.php

@@ -150,33 +150,40 @@ function ilo_verify_url_metrics_storage_nonce( string $nonce, string $slug ): in
  * @since n.e.x.t
  * @access private
  *
- * @param array $url_metrics          URL metrics.
+ * @param array $url_metrics          URL metrics. Each URL metric is expected to have a timestamp key.
  * @param array $validated_url_metric Validated URL metric. See JSON Schema defined in ilo_register_endpoint().
- * @return array Updated URL metrics.
+ * @param int[] $breakpoints          Breakpoint max widths.
+ * @param int   $sample_size          Sample size for URL metrics at a given breakpoint.
+ * @return array Updated URL metrics, with timestamp key added.
  */
-function ilo_unshift_url_metrics( array $url_metrics, array $validated_url_metric ): array {
+function ilo_unshift_url_metrics( array $url_metrics, array $validated_url_metric, array $breakpoints, int $sample_size ): array {
+	$validated_url_metric['timestamp'] = microtime( true );
 	array_unshift( $url_metrics, $validated_url_metric );
-	$breakpoints         = ilo_get_breakpoint_max_widths();
-	$sample_size         = ilo_get_url_metrics_breakpoint_sample_size();
 	$grouped_url_metrics = ilo_group_url_metrics_by_breakpoint( $url_metrics, $breakpoints );
 
-	foreach ( $grouped_url_metrics as &$breakpoint_url_metrics ) {
-		if ( count( $breakpoint_url_metrics ) > $sample_size ) {
-
-			// Sort URL metrics in descending order by timestamp.
-			usort(
-				$breakpoint_url_metrics,
-				static function ( $a, $b ) {
-					if ( ! isset( $a['timestamp'] ) || ! isset( $b['timestamp'] ) ) {
-						return 0;
+	// Make sure there is at most $sample_size number of URL metrics for each breakpoint.
+	$grouped_url_metrics = array_map(
+		static function ( $breakpoint_url_metrics ) use ( $sample_size ) {
+			if ( count( $breakpoint_url_metrics ) > $sample_size ) {
+
+				// Sort URL metrics in descending order by timestamp.
+				usort(
+					$breakpoint_url_metrics,
+					static function ( $a, $b ) {
+						if ( ! isset( $a['timestamp'] ) || ! isset( $b['timestamp'] ) ) {
+							return 0;
+						}
+						return $b['timestamp'] <=> $a['timestamp'];
 					}
-					return $b['timestamp'] <=> $a['timestamp'];
-				}
-			);
+				);
 
-			$breakpoint_url_metrics = array_slice( $breakpoint_url_metrics, 0, $sample_size );
-		}
-	}
+				// Only keep the sample size of the newest URL metrics.
+				$breakpoint_url_metrics = array_slice( $breakpoint_url_metrics, 0, $sample_size );
+			}
+			return $breakpoint_url_metrics;
+		},
+		$grouped_url_metrics
+	);
 
 	return array_merge( ...$grouped_url_metrics );
 }
@@ -266,24 +273,23 @@ function ilo_get_url_metrics_breakpoint_sample_size(): int {
 function ilo_group_url_metrics_by_breakpoint( array $url_metrics, array $breakpoints ): array {
 
 	// Convert breakpoint max widths into viewport minimum widths.
-	$viewport_minimum_widths = array_map(
+	$minimum_viewport_widths = array_map(
 		static function ( $breakpoint ) {
 			return $breakpoint + 1;
 		},
 		$breakpoints
 	);
 
-	$grouped = array_fill_keys( array_merge( array( 0 ), $viewport_minimum_widths ), array() );
+	$grouped = array_fill_keys( array_merge( array( 0 ), $minimum_viewport_widths ), array() );
 
 	foreach ( $url_metrics as $url_metric ) {
 		if ( ! isset( $url_metric['viewport']['width'] ) ) {
 			continue;
 		}
-		$viewport_width = $url_metric['viewport']['width'];
 
 		$current_minimum_viewport = 0;
-		foreach ( $viewport_minimum_widths as $viewport_minimum_width ) {
-			if ( $viewport_width > $viewport_minimum_width ) {
+		foreach ( $minimum_viewport_widths as $viewport_minimum_width ) {
+			if ( $url_metric['viewport']['width'] > $viewport_minimum_width ) {
 				$current_minimum_viewport = $viewport_minimum_width;
 			} else {
 				break;
@@ -299,15 +305,16 @@ static function ( $breakpoint ) {
  * Gets the LCP element for each breakpoint.
  *
  * The array keys are the minimum viewport width required for the element to be LCP. If there are URL metrics for a
- * given breakpoint and yet there is no LCP element, then the array value is `false`. If there is an LCP element at the
- * breakpoint, then the array value is an array representing that element, including its breadcrumbs. If two adjoining
- * breakpoints have the same value, then the latter is dropped.
+ * given breakpoint and yet there is no supported LCP element, then the array value is `false`. (Currently only IMG is
+ * a supported LCP element.) If there is a supported LCP element at the breakpoint, then the array value is an array
+ * representing that element, including its breadcrumbs. If two adjoining breakpoints have the same value, then the
+ * latter is dropped.
  *
  * @since n.e.x.t
  * @access private
  *
  * @param array $grouped_url_metrics URL metrics grouped by breakpoint. See `ilo_group_url_metrics_by_breakpoint()`.
- * @return array LCP elements keyed by its minimum viewport width. If there is no LCP element at a breakpoint, then `false` is used.
+ * @return array LCP elements keyed by its minimum viewport width. If there is no supported LCP element at a breakpoint, then `false` is used.
  */
 function ilo_get_lcp_elements_by_minimum_viewport_widths( array $grouped_url_metrics ): array {
 
@@ -382,8 +389,8 @@ static function ( $lcp_element ) use ( &$prev_lcp_element ) {
  * @since n.e.x.t
  * @access private
  *
- * @param array $url_metrics           URL metrics.
- * @param float $current_time           Current time as returned by microtime(true).
+ * @param array $url_metrics            URL metrics.
+ * @param float $current_time           Current time as returned by `microtime(true)`.
  * @param int[] $breakpoint_max_widths  Breakpoint max widths.
  * @param int   $sample_size            Sample size for viewports in a breakpoint.
  * @param int   $freshness_ttl          Freshness TTL for a URL metric.

modules/images/image-loading-optimization/storage/post-type.php

@@ -46,6 +46,8 @@ function ilo_register_url_metrics_post_type() {
  * @since n.e.x.t
  * @access private
  *
+ * @todo Consider returning post ID instead of WP_Post object.
+ *
  * @param string $slug URL metrics slug.
  * @return WP_Post|null Post object if exists.
  */
@@ -110,7 +112,40 @@ function ilo_parse_stored_url_metrics( WP_Post $post ): array {
 		);
 		$url_metrics = array();
 	}
-	return $url_metrics;
+
+	return array_values(
+		array_filter(
+			$url_metrics,
+			static function ( $url_metric ) use ( $trigger_error ) {
+				// TODO: If we wanted, we could use the JSON Schema to validate the stored metrics.
+				$is_valid = (
+					is_array( $url_metric )
+					&&
+					isset(
+						$url_metric['viewport']['width'],
+						$url_metric['viewport']['height'],
+						$url_metric['elements']
+					)
+					&&
+					is_int( $url_metric['viewport']['width'] )
+					&&
+					is_array( $url_metric['elements'] )
+				);
+
+				if ( ! $is_valid ) {
+					$trigger_error(
+						sprintf(
+							/* translators: %s is post type slug */
+							__( 'Unexpected shape to JSON array in post_content of %s post type.', 'performance-lab' ),
+							ILO_URL_METRICS_POST_TYPE
+						)
+					);
+				}
+
+				return $is_valid;
+			}
+		)
+	);
 }
 
 /**
@@ -119,13 +154,12 @@ function ilo_parse_stored_url_metrics( WP_Post $post ): array {
  * @since n.e.x.t
  * @access private
  *
- * @param string $url                   URL for the URL metrics. This is used purely as metadata.
- * @param string $slug                  URL metrics slug (computed from query vars).
+ * @param string $url                  URL for the URL metrics. This is used purely as metadata.
+ * @param string $slug                 URL metrics slug (computed from query vars).
  * @param array  $validated_url_metric Validated URL metric. See JSON Schema defined in ilo_register_endpoint().
  * @return int|WP_Error Post ID or WP_Error otherwise.
  */
 function ilo_store_url_metric( string $url, string $slug, array $validated_url_metric ) {
-	$validated_url_metric['timestamp'] = microtime( true );
 
 	// TODO: What about storing a version identifier?
 	$post_data = array(
@@ -143,7 +177,9 @@ function ilo_store_url_metric( string $url, string $slug, array $validated_url_m
 		$url_metrics            = array();
 	}
 
-	$url_metrics = ilo_unshift_url_metrics( $url_metrics, $validated_url_metric );
+	$breakpoints = ilo_get_breakpoint_max_widths();
+	$sample_size = ilo_get_url_metrics_breakpoint_sample_size();
+	$url_metrics = ilo_unshift_url_metrics( $url_metrics, $validated_url_metric, $breakpoints, $sample_size );
 
 	$post_data['post_content'] = wp_json_encode( $url_metrics, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES ); // TODO: No need for pretty-printing.