From 2487118bcb3f9205386109e83c796c038f410228 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Sun, 15 Dec 2024 17:54:25 -0800 Subject: [PATCH] Add meta to preloaded tags and preload links --- ...er-background-image-styled-tag-visitor.php | 26 ++++++++------- ...lass-image-prioritizer-img-tag-visitor.php | 7 ++++ .../class-image-prioritizer-tag-visitor.php | 32 +++++++++++++++++++ ...ss-image-prioritizer-video-tag-visitor.php | 6 ++++ .../class-od-link-collection.php | 6 ++-- 5 files changed, 62 insertions(+), 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 index c6570d4d2..a95a90df1 100644 --- 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 index ba14edf57..4f7c5c1f5 100644 --- 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 index ba2850f6a..da0f93f4a 100644 --- 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 index 4399d7a40..59dca4590 100644 --- 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 index 4e41a7af7..d344f8eb1 100644 --- 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 $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. */