Add meta to preloaded tags and preload links

WordPress · Dec 16, 2024 · 2487118 · 2487118
1 parent 6005f4a
commit 2487118
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 15 deletions.
diff --git a/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php b/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php
@@ -88,7 +88,7 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
 
 		// If this element is the LCP (for a breakpoint group), add a preload link for it.
 		foreach ( $context->url_metric_group_collection->get_groups_by_lcp_element( $xpath ) as $group ) {
-			$this->add_image_preload_link( $context->link_collection, $group, $background_image_url );
+			$this->add_image_preload_link( $context, $group, $background_image_url );
 		}
 
 		$this->lazy_load_bg_images( $context );
@@ -171,7 +171,7 @@ private function maybe_preload_external_lcp_background_image( OD_Tag_Visitor_Con
 				&&
 				$processor->get_attribute( 'class' ) === $common['class'] // May be checking equality with null.
 			) {
-				$this->add_image_preload_link( $context->link_collection, $group, $common['url'] );
+				$this->add_image_preload_link( $context, $group, $common['url'] );
 
 				// Now that the preload link has been added, eliminate the entry to stop looking for it while iterating over the rest of the document.
 				unset( $this->group_common_lcp_element_external_background_images[ $i ] );
@@ -184,22 +184,24 @@ private function maybe_preload_external_lcp_background_image( OD_Tag_Visitor_Con
 	 *
 	 * @since n.e.x.t
 	 *
-	 * @param OD_Link_Collection  $link_collection Link collection.
-	 * @param OD_URL_Metric_Group $group           URL Metric group.
-	 * @param non-empty-string    $url             Image URL.
+	 * @param OD_Tag_Visitor_Context $context Context.
+	 * @param OD_URL_Metric_Group    $group   URL Metric group.
+	 * @param non-empty-string       $url     Image URL.
 	 */
-	private function add_image_preload_link( OD_Link_Collection $link_collection, OD_URL_Metric_Group $group, string $url ): void {
-		$link_collection->add_link(
+	private function add_image_preload_link( OD_Tag_Visitor_Context $context, OD_URL_Metric_Group $group, string $url ): void {
+		$context->link_collection->add_link(
 			array(
-				'rel'           => 'preload',
-				'fetchpriority' => 'high',
-				'as'            => 'image',
-				'href'          => $url,
-				'media'         => 'screen',
+				'rel'                          => 'preload',
+				'fetchpriority'                => 'high',
+				'as'                           => 'image',
+				'href'                         => $url,
+				'media'                        => 'screen',
+				'data-od-related-tag-selector' => $this->get_css_selector( $context->processor ),
 			),
 			$group->get_minimum_viewport_width(),
 			$group->get_maximum_viewport_width()
 		);
+		$context->processor->set_meta_attribute( 'preloaded', true );
 	}
 
 	/**

diff --git a/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php b/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php
@@ -339,13 +339,20 @@ static function ( $attribute_value ) {
 			)
 		);
 
+		// Construct CSS selector to assist with identifying the related tag.
+		$selector = $this->get_css_selector( $context->processor );
+
 		foreach ( $context->url_metric_group_collection->get_groups_by_lcp_element( $xpath ) as $group ) {
+			$attributes['data-od-related-tag-selector'] = $selector;
+
 			$context->link_collection->add_link(
 				$attributes,
 				$group->get_minimum_viewport_width(),
 				$group->get_maximum_viewport_width()
 			);
 		}
+
+		$context->processor->set_meta_attribute( 'preloaded', true );
 	}
 
 	/**

diff --git a/plugins/image-prioritizer/class-image-prioritizer-tag-visitor.php b/plugins/image-prioritizer/class-image-prioritizer-tag-visitor.php
@@ -66,4 +66,36 @@ protected function get_attribute_value( OD_HTML_Tag_Processor $processor, string
 		}
 		return $value;
 	}
+
+	/**
+	 * Constructs a CSS selector for the current tag.
+	 *
+	 * @since n.e.x.t
+	 * @todo Move this into OD_HTML_Tag_Processor itself.
+	 *
+	 * @param OD_HTML_Tag_Processor $processor Processor.
+	 * @return string Selector.
+	 */
+	protected function get_css_selector( OD_HTML_Tag_Processor $processor ): string {
+		$selector = join( ' > ', $processor->get_breadcrumbs() );
+		$id       = $processor->get_attribute( 'id' );
+		if ( is_string( $id ) ) {
+			$selector .= '#' . $id;
+		}
+		$class_attr = $processor->get_attribute( 'class' );
+		if ( is_string( $class_attr ) ) {
+			$selector .= join(
+				'',
+				array_map(
+					static function ( string $class_name ): string {
+						return '.' . $class_name;
+					},
+					array_filter(
+						(array) preg_split( '/\s+/', trim( $class_attr ) )
+					)
+				)
+			);
+		}
+		return $selector;
+	}
 }
diff --git a/plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php b/plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php
@@ -137,6 +137,9 @@ private function preload_poster_image( string $poster, OD_Tag_Visitor_Context $c
 
 		$xpath = $processor->get_xpath();
 
+		// Construct CSS selector to assist with identifying the related tag.
+		$selector = $this->get_css_selector( $context->processor );
+
 		// If this element is the LCP (for a breakpoint group), add a preload link for the poster image.
 		foreach ( $context->url_metric_group_collection->get_groups_by_lcp_element( $xpath ) as $group ) {
 			$link_attributes = array(
@@ -152,6 +155,9 @@ private function preload_poster_image( string $poster, OD_Tag_Visitor_Context $c
 				$link_attributes['crossorigin'] = 'use-credentials' === $crossorigin ? 'use-credentials' : 'anonymous';
 			}
 
+			$link_attributes['data-od-related-tag-selector'] = $selector;
+			$context->processor->set_meta_attribute( 'preloaded', true );
+
 			$context->link_collection->add_link(
 				$link_attributes,
 				$group->get_minimum_viewport_width(),

diff --git a/plugins/optimization-detective/class-od-link-collection.php b/plugins/optimization-detective/class-od-link-collection.php
@@ -52,9 +52,9 @@ final class OD_Link_Collection implements Countable {
 	 *
 	 * @phpstan-param LinkAttributes $attributes
 	 *
-	 * @param array             $attributes             Attributes.
-	 * @param int<0, max>|null  $minimum_viewport_width Minimum width or null if not bounded or relevant.
-	 * @param positive-int|null $maximum_viewport_width Maximum width or null if not bounded (i.e. infinity) or relevant.
+	 * @param array<string, string> $attributes             Attributes.
+	 * @param int<0, max>|null      $minimum_viewport_width Minimum width or null if not bounded or relevant.
+	 * @param positive-int|null     $maximum_viewport_width Maximum width or null if not bounded (i.e. infinity) or relevant.
 	 *
 	 * @throws InvalidArgumentException When invalid arguments are provided.
 	 */