Embed Optimizer wastefully adds `preconnect` links for initial-viewport embeds when only `dns-prefetch` is used

[westonruter]

In #1058 I proposed adding preconnect links for resources used in embeds which appear in the initial viewport. This logic can be seen here:

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

Lines 286 to 306 in 6888788

	private function add_preconnect_links( OD_Tag_Visitor_Context $context ): void {
	$processor = $context->processor;
	$embed_wrapper_xpath = self::get_embed_wrapper_xpath( $processor->get_xpath() );
	foreach ( $this->get_preconnect_urls( $processor ) as $preconnect_url ) {
	foreach ( $context->url_metric_group_collection as $group ) {
	if ( $group->get_element_max_intersection_ratio( $embed_wrapper_xpath ) < PHP_FLOAT_EPSILON ) {
	continue;
	}
	$context->link_collection->add_link(
	array(
	'rel' => 'preconnect',
	'href' => $preconnect_url,
	),
	$group->get_minimum_viewport_width(),
	$group->get_maximum_viewport_width()
	);
	}
	}
	}

However, because the resources are loaded in an iframe (typically), most of the time the preconnect is wasted because of cross-origin isolation: the iframed third-party embed will have to connect again anyway.

Nevertheless, there is a benefit to preconnecting but only in that it warms the operating system's DNS cache. Since a preconnect also involves a dns-prefetch, this explains why there was some performance benefit measured when the preconnect links were added. But the performance would surely be even better if it had gone with dns-prefetch to begin with.

This was discussed in the Web Performance Slack.

[peterwilsoncc]

I think there would be some benefit to using a mix or dn-prefetching and preconnecting.

For YouTube embed, preconnecting to www.youtube.com would speed up the iframe loading, while the other domains could be dns-prefectched.

For Vimeo, the preconnection would be to player.vimeo.com and dns-prefetching for the other domains.

For embeds such as X (formally Twitter) that use JavaScript, the scripts domain would be the target of the preconnect.

[westonruter]

Hummm. That's a good point. Resources which are exclusively inside the embed's iframe should get dns-prefetch whereas resources which are eventually used in the page should get preconnect.