Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add meta attributes to preloaded tags and preload links for Image Prioritizer #1742

Draft
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Draft

Add meta attributes to preloaded tags and preload links for Image Prioritizer #1742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 14 additions & 12 deletions plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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 ] );
Expand All @@ -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 );
}

/**
Expand Down
7 changes: 7 additions & 0 deletions plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}

/**
Expand Down
32 changes: 32 additions & 0 deletions plugins/image-prioritizer/class-image-prioritizer-tag-visitor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
6 changes: 6 additions & 0 deletions plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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(),
Expand Down
6 changes: 3 additions & 3 deletions plugins/optimization-detective/class-od-link-collection.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
Loading