Incorporate media queries into preconnect links to account for whether embeds are in viewport #1654

ShyamGadde · 2024-11-15T16:45:52Z

Summary

For example, if an embed is not visible on mobile:

Relevant technical choices

Sorting and Merging of Links: The href attributes of preconnect links are sorted to group identical URLs together. If the URLs are identical, they are further sorted by minimum_viewport_width. This strategy enables merging of consecutive links, reducing redundancy. Refer to the discussion in Incorporate breakpoints into preconnect links added by Embed Optimizer #1341 (comment).
Introduced OD_URL_Metric_Group::get_xpath_elements_map(), OD_URL_Metric_Group::get_all_element_max_intersection_ratios() and OD_URL_Metric_Group::get_element_max_intersection_ratio() methods to help determine if a link should get preconnected on that particular viewport group.
But the lazy load script is injected only when an embed element is not visible in any viewport group.

Previously, links were sorted only by `minimum_viewport_width`, which caused issues when merging consecutive preconnect links, especially when dealing with breakpoints and different URLs. This update changes the sorting logic to first sort links by the `href` attribute, grouping identical URLs together. Once grouped, links are then sorted by `minimum_viewport_width`. This ensures that preconnect links are correctly merged when attributes align.

westonruter · 2024-11-15T16:49:31Z

plugins/optimization-detective/helper.php

@@ -37,7 +37,7 @@ function od_initialize_extensions(): void {
 */
 function od_generate_media_query( ?int $minimum_viewport_width, ?int $maximum_viewport_width ): ?string {
 	if ( is_int( $minimum_viewport_width ) && is_int( $maximum_viewport_width ) && $minimum_viewport_width > $maximum_viewport_width ) {
-		_doing_it_wrong( __FUNCTION__, esc_html__( 'The minimum width must be greater than the maximum width.', 'optimization-detective' ), 'Optimization Detective 0.7.0' );
+		_doing_it_wrong( __FUNCTION__, esc_html__( 'The minimum width cannot be greater than the maximum width.', 'optimization-detective' ), 'Optimization Detective 0.7.0' );


westonruter · 2024-11-15T16:52:57Z

plugins/optimization-detective/class-od-link-collection.php

+				$href_a = $a['attributes']['href'] ?? '';
+				$href_b = $b['attributes']['href'] ?? '';
+
+				$href_comparison = strcmp( $href_a, $href_b );


This would be the same as:

$href_comparison = ( $href_a <=> $href_b );

Right?

I believe in this case it would be the same.

…ect links

…Prioritizer

github-actions · 2024-11-15T17:42:56Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ShyamGadde <[email protected]>
Co-authored-by: westonruter <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

westonruter · 2024-11-15T19:10:16Z

FYI: The screenshot is broken.

westonruter

Looking good!

Added some feedback.

Let's also add a test case specifically for when there is an embed visible on a desktop viewport but hidden on a mobile viewport.

plugins/optimization-detective/class-od-url-metric-group.php

westonruter · 2024-11-15T19:24:58Z

plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php

+					foreach ( $context->url_metric_group_collection as $group ) {
+						if ( $group->get_element_max_intersection_ratio( $embed_wrapper_xpath ) <= 0 ) {
+							continue;
+						}
+
+						$context->link_collection->add_link(
+							array(
+								'rel'  => 'preconnect',
+								'href' => $preconnect_href,
+							),
+							$group->get_minimum_viewport_width(),
+							$group->get_maximum_viewport_width()
+						);
+					}


The analogous logic that adds preload links for the LCP image:

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

Lines 146 to 180 in df29967

foreach ( $context->url_metric_group_collection->get_groups_by_lcp_element( $xpath ) as $group ) {

$link_attributes = array_merge(

array(

'rel' => 'preload',

'fetchpriority' => 'high',

'as' => 'image',

),

array_filter(

array(

'href' => (string) $processor->get_attribute( 'src' ),

'imagesrcset' => (string) $processor->get_attribute( 'srcset' ),

'imagesizes' => (string) $processor->get_attribute( 'sizes' ),

),

static function ( string $value ): bool {

return '' !== $value;

}

)

);

$crossorigin = $this->get_attribute_value( $processor, 'crossorigin' );

if ( null !== $crossorigin ) {

$link_attributes['crossorigin'] = 'use-credentials' === $crossorigin ? 'use-credentials' : 'anonymous';

}

$link_attributes['media'] = 'screen';

$context->link_collection->add_link(

$link_attributes,

$group->get_minimum_viewport_width(),

$group->get_maximum_viewport_width()

);

}

return true;

}

For that we use $context->url_metric_group_collection->get_groups_by_lcp_element() to get the groups, whereas here it is looping over each group in the collection and then checking for each one whether the current embed is visible in it. So this makes sense to me.

westonruter · 2024-11-15T19:32:02Z

plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php

-						)
-					);
+					foreach ( $context->url_metric_group_collection as $group ) {
+						if ( $group->get_element_max_intersection_ratio( $embed_wrapper_xpath ) <= 0 ) {


Can the intersection ratio ever be less than 0? I don't think so, and Gemini confirms. Since we're comparing floats, it's probably not safe to check if the return value is exactly equal to 0. How about:

Suggested change

if ( $group->get_element_max_intersection_ratio( $embed_wrapper_xpath ) <= 0 ) {

if ( ! ( $group->get_element_max_intersection_ratio( $embed_wrapper_xpath ) > 0.0 ) ) {

You are right. Changed it in 5ecfcf2.

…Group` methods

Co-authored-by: Weston Ruter <[email protected]>

westonruter

Great work!

… that version

westonruter · 2024-12-18T17:37:08Z

In testing this I found a small issue preventing preconnect links from being added unless URL Metrics are collected for both desktop and mobile: #1757

ShyamGadde added 4 commits November 15, 2024 05:48

Fix typo in comment

9a3c838

Fix typo in warning message

a89a2b4

Take breakpoints into account while adding preconnect links

6fba611

westonruter reviewed Nov 15, 2024

View reviewed changes

ShyamGadde added 2 commits November 15, 2024 22:46

Update test cases to account for the updated sorting logic of preconn…

c89ba87

…ect links

Update test cases to account for updated link sorting logic in Image …

85d4fd4

…Prioritizer

ShyamGadde marked this pull request as ready for review November 15, 2024 17:42

ShyamGadde requested review from felixarntz and adamsilverstein as code owners November 15, 2024 17:42

westonruter requested changes Nov 15, 2024

View reviewed changes

plugins/optimization-detective/class-od-url-metric-group.php Show resolved Hide resolved

plugins/optimization-detective/class-od-url-metric-group.php Show resolved Hide resolved

westonruter reviewed Nov 15, 2024

View reviewed changes

westonruter added this to the embed-optimizer n.e.x.t milestone Nov 15, 2024

ShyamGadde and others added 6 commits November 18, 2024 09:07

Merge branch 'trunk' into add/breakpoints-in-preconnect-links

192d382

Refactor OD_URL_Metric_Group_Collection to leverage `OD_URL_Metric_…

aa06707

…Group` methods

Add caching for method return values in OD_URL_Metric_Group class

c22701f

Fix float comparison for intersection ratio

5ecfcf2

Co-authored-by: Weston Ruter <[email protected]>

Add test cases for when the embed is not visible on mobile

9e0da37

Merge branch 'trunk' into add/breakpoints-in-preconnect-links

096497f

ShyamGadde requested a review from westonruter November 19, 2024 14:03

westonruter added [Type] Enhancement A suggestion for improvement of an existing feature [Plugin] Optimization Detective Issues for the Optimization Detective plugin [Plugin] Embed Optimizer Issues for the Embed Optimizer plugin (formerly Auto Sizes) labels Nov 20, 2024

westonruter added 2 commits November 19, 2024 17:32

Update YT test case to check different media queries

9169bca

Explicitly test variable-height embeds

415846d

westonruter approved these changes Nov 20, 2024

View reviewed changes

westonruter added 2 commits November 19, 2024 17:56

Bump OD to 0.9.0-alpha and update Embed Optimizer to require at least…

dba4073

… that version

Fix test_embed_optimizer_init_optimization_detective

2c799ad

westonruter merged commit e82a04b into WordPress:trunk Nov 20, 2024
13 checks passed

westonruter changed the title ~~Incorporate breakpoints into preconnect links added by Embed Optimizer~~ Incorporate media queries into preconnect links to account for whether embeds are in viewport Dec 17, 2024

westonruter mentioned this pull request Dec 18, 2024

Preconnect links for embeds need not require URL Metrics to be collected from both mobile and desktop #1757

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Incorporate media queries into preconnect links to account for whether embeds are in viewport #1654

Incorporate media queries into preconnect links to account for whether embeds are in viewport #1654

ShyamGadde commented Nov 15, 2024 •

edited

Loading

westonruter Nov 15, 2024

westonruter Nov 15, 2024

ShyamGadde Nov 15, 2024 •

edited

Loading

github-actions bot commented Nov 15, 2024

westonruter commented Nov 15, 2024

westonruter left a comment

westonruter Nov 15, 2024

westonruter Nov 15, 2024

ShyamGadde Nov 18, 2024

westonruter left a comment

westonruter commented Dec 18, 2024

	foreach ( $context->url_metric_group_collection->get_groups_by_lcp_element( $xpath ) as $group ) {
	$link_attributes = array_merge(
	array(
	'rel' => 'preload',
	'fetchpriority' => 'high',
	'as' => 'image',
	),
	array_filter(
	array(
	'href' => (string) $processor->get_attribute( 'src' ),
	'imagesrcset' => (string) $processor->get_attribute( 'srcset' ),
	'imagesizes' => (string) $processor->get_attribute( 'sizes' ),
	),
	static function ( string $value ): bool {
	return '' !== $value;
	}
	)
	);

	$crossorigin = $this->get_attribute_value( $processor, 'crossorigin' );
	if ( null !== $crossorigin ) {
	$link_attributes['crossorigin'] = 'use-credentials' === $crossorigin ? 'use-credentials' : 'anonymous';
	}

	$link_attributes['media'] = 'screen';

	$context->link_collection->add_link(
	$link_attributes,
	$group->get_minimum_viewport_width(),
	$group->get_maximum_viewport_width()
	);
	}

	return true;
	}

	if ( $group->get_element_max_intersection_ratio( $embed_wrapper_xpath ) <= 0 ) {
	if ( ! ( $group->get_element_max_intersection_ratio( $embed_wrapper_xpath ) > 0.0 ) ) {

Incorporate media queries into preconnect links to account for whether embeds are in viewport #1654

Incorporate media queries into preconnect links to account for whether embeds are in viewport #1654

Conversation

ShyamGadde commented Nov 15, 2024 • edited Loading

Summary

Relevant technical choices

westonruter Nov 15, 2024

Choose a reason for hiding this comment

westonruter Nov 15, 2024

Choose a reason for hiding this comment

ShyamGadde Nov 15, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Nov 15, 2024

westonruter commented Nov 15, 2024

westonruter left a comment

Choose a reason for hiding this comment

westonruter Nov 15, 2024

Choose a reason for hiding this comment

westonruter Nov 15, 2024

Choose a reason for hiding this comment

ShyamGadde Nov 18, 2024

Choose a reason for hiding this comment

westonruter left a comment

Choose a reason for hiding this comment

westonruter commented Dec 18, 2024

ShyamGadde commented Nov 15, 2024 •

edited

Loading

ShyamGadde Nov 15, 2024 •

edited

Loading