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

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

Merged
merged 16 commits into from
Nov 20, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
9a3c838
Fix typo in comment
ShyamGadde Nov 15, 2024
a89a2b4
Fix typo in warning message
ShyamGadde Nov 15, 2024
6fba611
Take breakpoints into account while adding preconnect links
ShyamGadde Nov 15, 2024
622901a
Sort links by `href` before `minimum_viewport_width`
ShyamGadde Nov 15, 2024
c89ba87
Update test cases to account for the updated sorting logic of preconn…
ShyamGadde Nov 15, 2024
85d4fd4
Update test cases to account for updated link sorting logic in Image …
ShyamGadde Nov 15, 2024
192d382
Merge branch 'trunk' into add/breakpoints-in-preconnect-links
ShyamGadde Nov 18, 2024
aa06707
Refactor `OD_URL_Metric_Group_Collection` to leverage `OD_URL_Metric_…
ShyamGadde Nov 18, 2024
c22701f
Add caching for method return values in `OD_URL_Metric_Group` class
ShyamGadde Nov 18, 2024
5ecfcf2
Fix float comparison for intersection ratio
ShyamGadde Nov 18, 2024
9e0da37
Add test cases for when the embed is not visible on mobile
ShyamGadde Nov 19, 2024
096497f
Merge branch 'trunk' into add/breakpoints-in-preconnect-links
ShyamGadde Nov 19, 2024
9169bca
Update YT test case to check different media queries
westonruter Nov 20, 2024
415846d
Explicitly test variable-height embeds
westonruter Nov 20, 2024
dba4073
Bump OD to 0.9.0-alpha and update Embed Optimizer to require at least…
westonruter Nov 20, 2024
2c799ad
Fix test_embed_optimizer_init_optimization_detective
westonruter Nov 20, 2024
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
24 changes: 17 additions & 7 deletions plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ private function is_embed_wrapper( OD_HTML_Tag_Processor $processor ): bool {
* Otherwise, if the embed is not in any initial viewport, it will add lazy-loading logic.
*
* @since 0.2.0
* @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.
*
* @param OD_Tag_Visitor_Context $context Tag visitor context.
* @return bool Whether the tag should be tracked in URL Metrics.
Expand Down Expand Up @@ -109,7 +110,8 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
&&
$context->url_metric_group_collection->get_last_group()->count() > 0
) {
$max_intersection_ratio = $context->url_metric_group_collection->get_element_max_intersection_ratio( self::get_embed_wrapper_xpath( $processor->get_xpath() ) );
$embed_wrapper_xpath = self::get_embed_wrapper_xpath( $processor->get_xpath() );
$max_intersection_ratio = $context->url_metric_group_collection->get_element_max_intersection_ratio( $embed_wrapper_xpath );
if ( $max_intersection_ratio > 0 ) {
/*
* The following embeds have been chosen for optimization due to their relative popularity among all embed types.
Expand Down Expand Up @@ -171,12 +173,20 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool {
}

foreach ( $preconnect_hrefs as $preconnect_href ) {
$context->link_collection->add_link(
array(
'rel' => 'preconnect',
'href' => $preconnect_href,
)
);
foreach ( $context->url_metric_group_collection as $group ) {
if ( ! ( $group->get_element_max_intersection_ratio( $embed_wrapper_xpath ) > 0.0 ) ) {
continue;
}

$context->link_collection->add_link(
array(
'rel' => 'preconnect',
'href' => $preconnect_href,
),
$group->get_minimum_viewport_width(),
$group->get_maximum_viewport_width()
);
}
}
} elseif ( embed_optimizer_update_markup( $processor, false ) && ! $this->added_lazy_script ) {
$processor->append_body_html( wp_get_inline_script_tag( embed_optimizer_get_lazy_load_script(), array( 'type' => 'module' ) ) );
Expand Down
2 changes: 1 addition & 1 deletion plugins/embed-optimizer/hooks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ function embed_optimizer_add_non_optimization_detective_hooks(): void {
* @param string $optimization_detective_version Current version of the optimization detective plugin.
*/
function embed_optimizer_init_optimization_detective( string $optimization_detective_version ): void {
$required_od_version = '0.7.0';
$required_od_version = '0.9.0';
if ( version_compare( (string) strtok( $optimization_detective_version, '-' ), $required_od_version, '<' ) ) {
add_action(
'admin_notices',
Expand Down
2 changes: 1 addition & 1 deletion ...-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-without-resized-data.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@
<head>
<meta charset="utf-8">
<title>...</title>
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com">
<link data-od-added-tag rel="preconnect" href="https://pbs.twimg.com">
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com">
</head>
<body>
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
Expand Down
2 changes: 1 addition & 1 deletion plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com">
<link data-od-added-tag rel="preconnect" href="https://pbs.twimg.com">
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com">
</head>
<body>
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
Expand Down
73 changes: 73 additions & 0 deletions plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport-on-mobile.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<?php
return array(
'set_up' => static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void {
foreach ( array_merge( od_get_breakpoint_max_widths(), array( 1000 ) ) as $i => $viewport_width ) {
$elements = array(
array(
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]',
'isLCP' => true,
'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 + $i * 100 ) ),
),
);

// Embed not visible on mobile.
if ( 480 === $viewport_width ) {
$elements[0]['intersectionRatio'] = 0;
$elements[0]['isLCP'] = false;
}

$sample_size = od_get_url_metrics_breakpoint_sample_size();
for ( $j = 0; $j < $sample_size; $j++ ) {
OD_URL_Metrics_Post_Type::store_url_metric(
od_get_url_metrics_slug( od_get_normalized_query_vars() ),
$test_case->get_sample_url_metric(
array(
'viewport_width' => $viewport_width,
'elements' => $elements,
)
)
);
}
}
},
'buffer' => '
<html lang="en">
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
<div class="wp-block-embed__wrapper">
<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>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</figure>
</body>
</html>
',
'expected' => '
<html lang="en">
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 600px; } }
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 700px; } }
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 800px; } }
</style>
<link data-od-added-tag rel="preconnect" href="https://pbs.twimg.com" media="(min-width: 481px)">
<link data-od-added-tag rel="preconnect" href="https://syndication.twitter.com" media="(min-width: 481px)">
</head>
<body>
<figure data-od-added-id id="embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8" class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter">
<div class="wp-block-embed__wrapper">
<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>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</figure>
</body>
</html>
',
);
4 changes: 2 additions & 2 deletions plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-inside-viewport.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
<link data-od-added-tag rel="preconnect" href="https://video.wordpress.com">
<link data-od-added-tag rel="preconnect" href="https://public-api.wordpress.com">
<link data-od-added-tag rel="preconnect" href="https://videos.files.wordpress.com">
<link data-od-added-tag rel="preconnect" href="https://v0.wordpress.com">
<link data-od-added-tag rel="preconnect" href="https://video.wordpress.com">
<link data-od-added-tag rel="preconnect" href="https://videos.files.wordpress.com">
</head>
<body>
<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">
Expand Down
73 changes: 73 additions & 0 deletions ...embed-optimizer/tests/test-cases/single-wordpress-tv-embed-outside-viewport-on-mobile.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<?php
return array(
'set_up' => static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void {
foreach ( array_merge( od_get_breakpoint_max_widths(), array( 1000 ) ) as $i => $viewport_width ) {
$elements = array(
array(
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]',
'isLCP' => true,
'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 + $i * 100 ) ),
),
);

// Embed not visible on mobile.
if ( 480 === $viewport_width ) {
$elements[0]['intersectionRatio'] = 0;
$elements[0]['isLCP'] = false;
}

OD_URL_Metrics_Post_Type::store_url_metric(
od_get_url_metrics_slug( od_get_normalized_query_vars() ),
$test_case->get_sample_url_metric(
array(
'viewport_width' => $viewport_width,
'elements' => $elements,
)
)
);
}
},
'buffer' => '
<html lang="en">
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<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">
<div class="wp-block-embed__wrapper">
<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>
<script src=\'https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142\'></script>
</div>
</figure>
</body>
</html>
',
'expected' => '
<html lang="en">
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 600px; } }
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 700px; } }
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 800px; } }
</style>
<link data-od-added-tag rel="preconnect" href="https://public-api.wordpress.com" media="(min-width: 481px)">
<link data-od-added-tag rel="preconnect" href="https://v0.wordpress.com" media="(min-width: 481px)">
<link data-od-added-tag rel="preconnect" href="https://video.wordpress.com" media="(min-width: 481px)">
<link data-od-added-tag rel="preconnect" href="https://videos.files.wordpress.com" media="(min-width: 481px)">
</head>
<body>
<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">
<div data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]" class="wp-block-embed__wrapper">
<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>
<script src=\'https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142\'></script>
</div>
</figure>
<script type="module">/* import detect ... */</script>
</body>
</html>
',
);
2 changes: 1 addition & 1 deletion plugins/embed-optimizer/tests/test-cases/single-youtube-embed-inside-viewport.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
<link data-od-added-tag rel="preconnect" href="https://www.youtube.com">
<link data-od-added-tag rel="preconnect" href="https://i.ytimg.com">
<link data-od-added-tag rel="preconnect" href="https://www.youtube.com">
</head>
<body>
<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">
Expand Down
71 changes: 71 additions & 0 deletions plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-on-mobile.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<?php
return array(
'set_up' => static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void {
foreach ( array_merge( od_get_breakpoint_max_widths(), array( 1000 ) ) as $viewport_width ) {
$elements = array(
array(
'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]',
'isLCP' => true,
'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ),
),
);

// Embed is ONLY visible on phablet and tablet.
if ( ! in_array( $viewport_width, array( 600, 782 ), true ) ) {
$elements[0]['intersectionRatio'] = 0;
$elements[0]['isLCP'] = false;
}

$sample_size = od_get_url_metrics_breakpoint_sample_size();
for ( $i = 0; $i < $sample_size; $i++ ) {
OD_URL_Metrics_Post_Type::store_url_metric(
od_get_url_metrics_slug( od_get_normalized_query_vars() ),
$test_case->get_sample_url_metric(
array(
'viewport_width' => $viewport_width,
'elements' => $elements,
)
)
);
}
}
},
'buffer' => '
<html lang="en">
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
<div class="wp-block-embed__wrapper">
<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>
</div>
</figure>
</body>
</html>
',
'expected' => '
<html lang="en">
<head>
<meta charset="utf-8">
<title>...</title>
<style>
@media (max-width: 480px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media (min-width: 481px) and (max-width: 600px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media (min-width: 601px) and (max-width: 782px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
@media (min-width: 783px) { #embed-optimizer-a7659db28ecaa36ddee6ae66857dabd8 { min-height: 500px; } }
</style>
<link data-od-added-tag rel="preconnect" href="https://i.ytimg.com" media="(min-width: 481px) and (max-width: 782px)">
<link data-od-added-tag rel="preconnect" href="https://www.youtube.com" media="(min-width: 481px) and (max-width: 782px)">
</head>
<body>
<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">
<div class="wp-block-embed__wrapper">
<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>
</div>
</figure>
</body>
</html>
',
);
2 changes: 1 addition & 1 deletion plugins/embed-optimizer/tests/test-hooks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ public function data_provider_to_test_embed_optimizer_init_optimization_detectiv
'expected' => false,
),
'with_new_version' => array(
'version' => '0.7.0',
'version' => '99.0.0',
'expected' => true,
),
);
Expand Down
2 changes: 1 addition & 1 deletion ...t-lcp-elements-for-non-consecutive-viewport-groups-with-missing-data-for-middle-group.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@
<meta charset="utf-8">
<title>...</title>
<style>/* Never show mobile and desktop logos at the same time. */</style>
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/mobile-logo.png" media="screen and (max-width: 480px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/desktop-logo.png" media="screen and (min-width: 783px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/mobile-logo.png" media="screen and (max-width: 480px)">
</head>
<body>
<img data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]" src="https://example.com/mobile-logo.png" alt="Mobile Logo" width="600" height="600">
Expand Down
2 changes: 1 addition & 1 deletion ...ioritizer/tests/test-cases/different-lcp-elements-for-two-non-consecutive-breakpoints.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,8 @@ static function () {
<head>
<meta charset="utf-8">
<title>...</title>
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/mobile-logo.png" media="screen and (max-width: 480px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/desktop-logo.png" media="screen and (min-width: 601px) and (max-width: 782px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/mobile-logo.png" media="screen and (max-width: 480px)">
</head>
<body>
<img data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]" src="https://example.com/mobile-logo.png" alt="Mobile Logo" width="600" height="600">
Expand Down
2 changes: 1 addition & 1 deletion plugins/image-prioritizer/tests/test-cases/responsive-background-images.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ static function () use ( $mobile_breakpoint, $tablet_breakpoint ): array {
<meta charset="utf-8">
<title>...</title>
<style>/* responsive styles to show only one div.header at a time... */</style>
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/desktop-bg.jpg" media="screen and (min-width: 601px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/mobile-bg.jpg" media="screen and (max-width: 480px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/tablet-bg.jpg" media="screen and (min-width: 481px) and (max-width: 600px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/desktop-bg.jpg" media="screen and (min-width: 601px)">
</head>
<body>
<div class="header desktop" style="background: red no-repeat center/80% url(\'https://example.com/desktop-bg.jpg\'); width:100%; height: 200px;">This is the desktop background!</div>
Expand Down
2 changes: 1 addition & 1 deletion ...r/tests/test-cases/video-with-poster-lcp-element-on-mobile-and-desktop-but-not-tablet.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,8 @@ static function () use ( $breakpoint_max_widths ) {
<meta charset="utf-8">
<title>...</title>
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/poster.jpg" media="screen and (max-width: 480px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/tablet-header.jpg" media="screen and (min-width: 481px) and (max-width: 782px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/poster.jpg" media="screen and (min-width: 783px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/tablet-header.jpg" media="screen and (min-width: 481px) and (max-width: 782px)">
</head>
<body>
<img data-od-xpath="/*[1][self::HTML]/*[2][self::BODY]/*[1][self::IMG]" class="tablet" src="https://example.com/tablet-header.jpg" alt="Tablet header" width="800" height="600">
Expand Down
Loading
Loading