Skip to content

Commit e82a04b

Browse files
westonruterwestonruter
authored
Merge pull request #1654 from ShyamGadde/add/breakpoints-in-preconnect-links
Incorporate breakpoints into preconnect links added by Embed Optimizer
2 parents 623934d + 2c799ad commit e82a04b

20 files changed

+340
-33
lines changed

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

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ private function is_embed_wrapper( OD_HTML_Tag_Processor $processor ): bool {
8181
* Otherwise, if the embed is not in any initial viewport, it will add lazy-loading logic.
8282
*
8383
* @since 0.2.0
84+
* @since n.e.x.t Adds preconnect links for each viewport group and skips if the element is not in the viewport for that group.
8485
*
8586
* @param OD_Tag_Visitor_Context $context Tag visitor context.
8687
* @return bool Whether the tag should be tracked in URL Metrics.
@@ -109,7 +110,8 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
109110
&&
110111
$context->url_metric_group_collection->get_last_group()->count() > 0
111112
) {
112-
$max_intersection_ratio = $context->url_metric_group_collection->get_element_max_intersection_ratio( self::get_embed_wrapper_xpath( $processor->get_xpath() ) );
113+
$embed_wrapper_xpath = self::get_embed_wrapper_xpath( $processor->get_xpath() );
114+
$max_intersection_ratio = $context->url_metric_group_collection->get_element_max_intersection_ratio( $embed_wrapper_xpath );
113115
if ( $max_intersection_ratio > 0 ) {
114116
/*
115117
* The following embeds have been chosen for optimization due to their relative popularity among all embed types.
@@ -171,12 +173,20 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
171173
}
172174

173175
foreach ( $preconnect_hrefs as $preconnect_href ) {
174-
$context->link_collection->add_link(
175-
array(
176-
'rel' => 'preconnect',
177-
'href' => $preconnect_href,
178-
)
179-
);
176+
foreach ( $context->url_metric_group_collection as $group ) {
177+
if ( ! ( $group->get_element_max_intersection_ratio( $embed_wrapper_xpath ) > 0.0 ) ) {
178+
continue;
179+
}
180+
181+
$context->link_collection->add_link(
182+
array(
183+
'rel' => 'preconnect',
184+
'href' => $preconnect_href,
185+
),
186+
$group->get_minimum_viewport_width(),
187+
$group->get_maximum_viewport_width()
188+
);
189+
}
180190
}
181191
} elseif ( embed_optimizer_update_markup( $processor, false ) && ! $this->added_lazy_script ) {
182192
$processor->append_body_html( wp_get_inline_script_tag( embed_optimizer_get_lazy_load_script(), array( 'type' => 'module' ) ) );

‎plugins/embed-optimizer/hooks.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function embed_optimizer_add_non_optimization_detective_hooks(): void {
4242
* @param string $optimization_detective_version Current version of the optimization detective plugin.
4343
*/
4444
function embed_optimizer_init_optimization_detective( string $optimization_detective_version ): void {
45-
$required_od_version = '0.7.0';
45+
$required_od_version = '0.9.0';
4646
if ( version_compare( (string) strtok( $optimization_detective_version, '-' ), $required_od_version, '<' ) ) {
4747
add_action(
4848
'admin_notices',

‎plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-without-resized-data.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333
<head>
3434
<meta charset="utf-8">
3535
<title>...</title>
36-
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com">
3736
<link data-od-added-tag rel="preconnect" href="https://pbs.twimg.com">
37+
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com">
3838
</head>
3939
<body>
4040
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">

‎plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
4040
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
4141
</style>
42-
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com">
4342
<link data-od-added-tag rel="preconnect" href="https://pbs.twimg.com">
43+
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com">
4444
</head>
4545
<body>
4646
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">

‎plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport-on-mobile.php

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<?php
2+
return array(
3+
'set_up' => static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void {
4+
foreach ( array_merge( od_get_breakpoint_max_widths(), array( 1000 ) ) as $i => $viewport_width ) {
5+
$elements = array(
6+
array(
7+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]',
8+
'isLCP' => true,
9+
'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 + $i * 100 ) ),
10+
),
11+
);
12+
13+
// Embed not visible on mobile.
14+
if ( 480 === $viewport_width ) {
15+
$elements[0]['intersectionRatio'] = 0;
16+
$elements[0]['isLCP'] = false;
17+
}
18+
19+
$sample_size = od_get_url_metrics_breakpoint_sample_size();
20+
for ( $j = 0; $j < $sample_size; $j++ ) {
21+
OD_URL_Metrics_Post_Type::store_url_metric(
22+
od_get_url_metrics_slug( od_get_normalized_query_vars() ),
23+
$test_case->get_sample_url_metric(
24+
array(
25+
'viewport_width' => $viewport_width,
26+
'elements' => $elements,
27+
)
28+
)
29+
);
30+
}
31+
}
32+
},
33+
'buffer' => '
34+
<html lang="en">
35+
<head>
36+
<meta charset="utf-8">
37+
<title>...</title>
38+
</head>
39+
<body>
40+
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
41+
<div class="wp-block-embed__wrapper">
42+
<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">We want your feedback for the Privacy Sandbox 📨<br><br>Learn why your feedback is critical through real examples and learn how to provide it ↓ <a href="https://t.co/anGk6gWkbc">https://t.co/anGk6gWkbc</a></p>&mdash; Chrome for Developers (@ChromiumDev) <a href="https://twitter.com/ChromiumDev/status/1636796541368139777?ref_src=twsrc%5Etfw">March 17, 2023</a></blockquote>
43+
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
44+
</div>
45+
</figure>
46+
</body>
47+
</html>
48+
',
49+
'expected' => '
50+
<html lang="en">
51+
<head>
52+
<meta charset="utf-8">
53+
<title>...</title>
54+
<style>
55+
@media (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
56+
@media (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 600px; } }
57+
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 700px; } }
58+
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 800px; } }
59+
</style>
60+
<link data-od-added-tag rel="preconnect" href="https://pbs.twimg.com" media="(min-width: 481px)">
61+
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com" media="(min-width: 481px)">
62+
</head>
63+
<body>
64+
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
65+
<div class="wp-block-embed__wrapper">
66+
<blockquote class="twitter-tweet" data-width="550" data-dnt="true"><p lang="en" dir="ltr">We want your feedback for the Privacy Sandbox 📨<br><br>Learn why your feedback is critical through real examples and learn how to provide it ↓ <a href="https://t.co/anGk6gWkbc">https://t.co/anGk6gWkbc</a></p>&mdash; Chrome for Developers (@ChromiumDev) <a href="https://twitter.com/ChromiumDev/status/1636796541368139777?ref_src=twsrc%5Etfw">March 17, 2023</a></blockquote>
67+
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
68+
</div>
69+
</figure>
70+
</body>
71+
</html>
72+
',
73+
);

‎plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-inside-viewport.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@
4040
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
4141
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
4242
</style>
43-
<link data-od-added-tag rel="preconnect" href="https://video.wordpress.com">
4443
<link data-od-added-tag rel="preconnect" href="https://public-api.wordpress.com">
45-
<link data-od-added-tag rel="preconnect" href="https://videos.files.wordpress.com">
4644
<link data-od-added-tag rel="preconnect" href="https://v0.wordpress.com">
45+
<link data-od-added-tag rel="preconnect" href="https://video.wordpress.com">
46+
<link data-od-added-tag rel="preconnect" href="https://videos.files.wordpress.com">
4747
</head>
4848
<body>
4949
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" class="wp-block-embed is-type-video is-provider-wordpress-tv wp-block-embed-wordpress-tv wp-embed-aspect-16-9 wp-has-aspect-ratio">

‎plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-outside-viewport-on-mobile.php

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<?php
2+
return array(
3+
'set_up' => static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void {
4+
foreach ( array_merge( od_get_breakpoint_max_widths(), array( 1000 ) ) as $i => $viewport_width ) {
5+
$elements = array(
6+
array(
7+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]',
8+
'isLCP' => true,
9+
'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 + $i * 100 ) ),
10+
),
11+
);
12+
13+
// Embed not visible on mobile.
14+
if ( 480 === $viewport_width ) {
15+
$elements[0]['intersectionRatio'] = 0;
16+
$elements[0]['isLCP'] = false;
17+
}
18+
19+
OD_URL_Metrics_Post_Type::store_url_metric(
20+
od_get_url_metrics_slug( od_get_normalized_query_vars() ),
21+
$test_case->get_sample_url_metric(
22+
array(
23+
'viewport_width' => $viewport_width,
24+
'elements' => $elements,
25+
)
26+
)
27+
);
28+
}
29+
},
30+
'buffer' => '
31+
<html lang="en">
32+
<head>
33+
<meta charset="utf-8">
34+
<title>...</title>
35+
</head>
36+
<body>
37+
<figure class="wp-block-embed is-type-video is-provider-wordpress-tv wp-block-embed-wordpress-tv wp-embed-aspect-16-9 wp-has-aspect-ratio">
38+
<div class="wp-block-embed__wrapper">
39+
<iframe title="VideoPress Video Player" aria-label=\'VideoPress Video Player\' width=\'750\' height=\'422\' src=\'https://video.wordpress.com/embed/vaWm9zO6?hd=1&amp;cover=1\' frameborder=\'0\' allowfullscreen allow=\'clipboard-write\'></iframe>
40+
<script src=\'https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142\'></script>
41+
</div>
42+
</figure>
43+
</body>
44+
</html>
45+
',
46+
'expected' => '
47+
<html lang="en">
48+
<head>
49+
<meta charset="utf-8">
50+
<title>...</title>
51+
<style>
52+
@media (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
53+
@media (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 600px; } }
54+
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 700px; } }
55+
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 800px; } }
56+
</style>
57+
<link data-od-added-tag rel="preconnect" href="https://public-api.wordpress.com" media="(min-width: 481px)">
58+
<link data-od-added-tag rel="preconnect" href="https://v0.wordpress.com" media="(min-width: 481px)">
59+
<link data-od-added-tag rel="preconnect" href="https://video.wordpress.com" media="(min-width: 481px)">
60+
<link data-od-added-tag rel="preconnect" href="https://videos.files.wordpress.com" media="(min-width: 481px)">
61+
</head>
62+
<body>
63+
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" class="wp-block-embed is-type-video is-provider-wordpress-tv wp-block-embed-wordpress-tv wp-embed-aspect-16-9 wp-has-aspect-ratio">
64+
<div data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]" class="wp-block-embed__wrapper">
65+
<iframe title="VideoPress Video Player" aria-label=\'VideoPress Video Player\' width=\'750\' height=\'422\' src=\'https://video.wordpress.com/embed/vaWm9zO6?hd=1&amp;cover=1\' frameborder=\'0\' allowfullscreen allow=\'clipboard-write\'></iframe>
66+
<script src=\'https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142\'></script>
67+
</div>
68+
</figure>
69+
<script type="module">/* import detect ... */</script>
70+
</body>
71+
</html>
72+
',
73+
);

‎plugins/embed-optimizer/tests/test-cases/single-youtube-embed-inside-viewport.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
3939
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
4040
</style>
41-
<link data-od-added-tag rel="preconnect" href="https://www.youtube.com">
4241
<link data-od-added-tag rel="preconnect" href="https://i.ytimg.com">
42+
<link data-od-added-tag rel="preconnect" href="https://www.youtube.com">
4343
</head>
4444
<body>
4545
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">

‎plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-on-mobile.php

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<?php
2+
return array(
3+
'set_up' => static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void {
4+
foreach ( array_merge( od_get_breakpoint_max_widths(), array( 1000 ) ) as $viewport_width ) {
5+
$elements = array(
6+
array(
7+
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]',
8+
'isLCP' => true,
9+
'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ),
10+
),
11+
);
12+
13+
// Embed is ONLY visible on phablet and tablet.
14+
if ( ! in_array( $viewport_width, array( 600, 782 ), true ) ) {
15+
$elements[0]['intersectionRatio'] = 0;
16+
$elements[0]['isLCP'] = false;
17+
}
18+
19+
$sample_size = od_get_url_metrics_breakpoint_sample_size();
20+
for ( $i = 0; $i < $sample_size; $i++ ) {
21+
OD_URL_Metrics_Post_Type::store_url_metric(
22+
od_get_url_metrics_slug( od_get_normalized_query_vars() ),
23+
$test_case->get_sample_url_metric(
24+
array(
25+
'viewport_width' => $viewport_width,
26+
'elements' => $elements,
27+
)
28+
)
29+
);
30+
}
31+
}
32+
},
33+
'buffer' => '
34+
<html lang="en">
35+
<head>
36+
<meta charset="utf-8">
37+
<title>...</title>
38+
</head>
39+
<body>
40+
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
41+
<div class="wp-block-embed__wrapper">
42+
<iframe title="Matt Mullenweg: State of the Word 2023" width="750" height="422" src="https://www.youtube.com/embed/c7M4mBVgP3Y?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
43+
</div>
44+
</figure>
45+
</body>
46+
</html>
47+
',
48+
'expected' => '
49+
<html lang="en">
50+
<head>
51+
<meta charset="utf-8">
52+
<title>...</title>
53+
<style>
54+
@media (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
55+
@media (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
56+
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
57+
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
58+
</style>
59+
<link data-od-added-tag rel="preconnect" href="https://i.ytimg.com" media="(min-width: 481px) and (max-width: 782px)">
60+
<link data-od-added-tag rel="preconnect" href="https://www.youtube.com" media="(min-width: 481px) and (max-width: 782px)">
61+
</head>
62+
<body>
63+
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
64+
<div class="wp-block-embed__wrapper">
65+
<iframe title="Matt Mullenweg: State of the Word 2023" width="750" height="422" src="https://www.youtube.com/embed/c7M4mBVgP3Y?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
66+
</div>
67+
</figure>
68+
</body>
69+
</html>
70+
',
71+
);

‎plugins/embed-optimizer/tests/test-hooks.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ public function data_provider_to_test_embed_optimizer_init_optimization_detectiv
6363
'expected' => false,
6464
),
6565
'with_new_version' => array(
66-
'version' => '0.7.0',
66+
'version' => '99.0.0',
6767
'expected' => true,
6868
),
6969
);

0 commit comments

Comments
 (0)