From 216d22c02979367e5e9ca88b7196ef79645932fb Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 17 Oct 2024 17:18:18 -0700 Subject: [PATCH 1/3] Avoid lazy-loading images and embeds unless there are URL metrics for both mobile and desktop --- .../class-embed-optimizer-tag-visitor.php | 147 +++++++++--------- ...-viewport-with-only-mobile-url-metrics.php | 55 +++++++ .../tests/test-cases/too-many-bookmarks.php | 11 ++ ...lass-image-prioritizer-img-tag-visitor.php | 13 +- ...ss-image-prioritizer-video-tag-visitor.php | 1 - ...mage-with-fully-incomplete-sample-data.php | 7 +- 6 files changed, 159 insertions(+), 75 deletions(-) create mode 100644 plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-with-only-mobile-url-metrics.php diff --git a/plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php b/plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php index e3b4e9c077..118196cd30 100644 --- a/plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php +++ b/plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php @@ -101,78 +101,85 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool { $this->reduce_layout_shifts( $context ); - $max_intersection_ratio = $context->url_metric_group_collection->get_element_max_intersection_ratio( self::get_embed_wrapper_xpath( $processor->get_xpath() ) ); - if ( $max_intersection_ratio > 0 ) { - /* - * The following embeds have been chosen for optimization due to their relative popularity among all embed types. - * See . - * The list of hosts being preconnected to was obtained by inserting an embed into a post and then looking - * at the network log on the frontend as the embed renders. Each should include the host of the iframe src - * as well as URLs for assets used by the embed, _if_ the URL looks like it is not geotargeted (e.g. '-us') - * or load-balanced (e.g. 's0.example.com'). For the load balancing case, attempt to load the asset by - * incrementing the number appearing in the subdomain (e.g. s1.example.com). If the asset still loads, then - * it is a likely case of a load balancing domain name which cannot be safely preconnected since it could - * not end up being the load balanced domain used for the embed. Lastly, these domains are only for the URLs - * for GET requests, as POST requests are not likely to be part of the critical rendering path. - */ - $preconnect_hrefs = array(); - $has_class = static function ( string $wanted_class ) use ( $processor ): bool { - return true === $processor->has_class( $wanted_class ); - }; - if ( $has_class( 'wp-block-embed-youtube' ) ) { - $preconnect_hrefs[] = 'https://www.youtube.com'; - $preconnect_hrefs[] = 'https://i.ytimg.com'; - } elseif ( $has_class( 'wp-block-embed-twitter' ) ) { - $preconnect_hrefs[] = 'https://syndication.twitter.com'; - $preconnect_hrefs[] = 'https://pbs.twimg.com'; - } elseif ( $has_class( 'wp-block-embed-vimeo' ) ) { - $preconnect_hrefs[] = 'https://player.vimeo.com'; - $preconnect_hrefs[] = 'https://f.vimeocdn.com'; - $preconnect_hrefs[] = 'https://i.vimeocdn.com'; - } elseif ( $has_class( 'wp-block-embed-spotify' ) ) { - $preconnect_hrefs[] = 'https://apresolve.spotify.com'; - $preconnect_hrefs[] = 'https://embed-cdn.spotifycdn.com'; - $preconnect_hrefs[] = 'https://encore.scdn.co'; - $preconnect_hrefs[] = 'https://i.scdn.co'; - } elseif ( $has_class( 'wp-block-embed-videopress' ) || $has_class( 'wp-block-embed-wordpress-tv' ) ) { - $preconnect_hrefs[] = 'https://video.wordpress.com'; - $preconnect_hrefs[] = 'https://public-api.wordpress.com'; - $preconnect_hrefs[] = 'https://videos.files.wordpress.com'; - $preconnect_hrefs[] = 'https://v0.wordpress.com'; // This does not appear to be a load-balanced domain since v1.wordpress.com is not valid. - } elseif ( $has_class( 'wp-block-embed-instagram' ) ) { - $preconnect_hrefs[] = 'https://www.instagram.com'; - $preconnect_hrefs[] = 'https://static.cdninstagram.com'; - $preconnect_hrefs[] = 'https://scontent.cdninstagram.com'; - } elseif ( $has_class( 'wp-block-embed-tiktok' ) ) { - $preconnect_hrefs[] = 'https://www.tiktok.com'; - // Note: The other domains used for TikTok embeds include https://lf16-tiktok-web.tiktokcdn-us.com, - // https://lf16-cdn-tos.tiktokcdn-us.com, and https://lf16-tiktok-common.tiktokcdn-us.com among others - // which either appear to be geo-targeted ('-us') _or_ load-balanced ('lf16'). So these are not added - // to the preconnected hosts. - } elseif ( $has_class( 'wp-block-embed-amazon' ) ) { - $preconnect_hrefs[] = 'https://read.amazon.com'; - $preconnect_hrefs[] = 'https://m.media-amazon.com'; - } elseif ( $has_class( 'wp-block-embed-soundcloud' ) ) { - $preconnect_hrefs[] = 'https://w.soundcloud.com'; - $preconnect_hrefs[] = 'https://widget.sndcdn.com'; - // Note: There is also https://i1.sndcdn.com which is for the album art, but the '1' indicates it may be geotargeted/load-balanced. - } elseif ( $has_class( 'wp-block-embed-pinterest' ) ) { - $preconnect_hrefs[] = 'https://assets.pinterest.com'; - $preconnect_hrefs[] = 'https://widgets.pinterest.com'; - $preconnect_hrefs[] = 'https://i.pinimg.com'; - } + // Preconnect links and lazy-loading can only be done once there are URL metrics collected for both mobile and desktop. + if ( + $context->url_metric_group_collection->get_first_group()->count() > 0 + && + $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() ) ); + if ( $max_intersection_ratio > 0 ) { + /* + * The following embeds have been chosen for optimization due to their relative popularity among all embed types. + * See . + * The list of hosts being preconnected to was obtained by inserting an embed into a post and then looking + * at the network log on the frontend as the embed renders. Each should include the host of the iframe src + * as well as URLs for assets used by the embed, _if_ the URL looks like it is not geotargeted (e.g. '-us') + * or load-balanced (e.g. 's0.example.com'). For the load balancing case, attempt to load the asset by + * incrementing the number appearing in the subdomain (e.g. s1.example.com). If the asset still loads, then + * it is a likely case of a load balancing domain name which cannot be safely preconnected since it could + * not end up being the load balanced domain used for the embed. Lastly, these domains are only for the URLs + * for GET requests, as POST requests are not likely to be part of the critical rendering path. + */ + $preconnect_hrefs = array(); + $has_class = static function ( string $wanted_class ) use ( $processor ): bool { + return true === $processor->has_class( $wanted_class ); + }; + if ( $has_class( 'wp-block-embed-youtube' ) ) { + $preconnect_hrefs[] = 'https://www.youtube.com'; + $preconnect_hrefs[] = 'https://i.ytimg.com'; + } elseif ( $has_class( 'wp-block-embed-twitter' ) ) { + $preconnect_hrefs[] = 'https://syndication.twitter.com'; + $preconnect_hrefs[] = 'https://pbs.twimg.com'; + } elseif ( $has_class( 'wp-block-embed-vimeo' ) ) { + $preconnect_hrefs[] = 'https://player.vimeo.com'; + $preconnect_hrefs[] = 'https://f.vimeocdn.com'; + $preconnect_hrefs[] = 'https://i.vimeocdn.com'; + } elseif ( $has_class( 'wp-block-embed-spotify' ) ) { + $preconnect_hrefs[] = 'https://apresolve.spotify.com'; + $preconnect_hrefs[] = 'https://embed-cdn.spotifycdn.com'; + $preconnect_hrefs[] = 'https://encore.scdn.co'; + $preconnect_hrefs[] = 'https://i.scdn.co'; + } elseif ( $has_class( 'wp-block-embed-videopress' ) || $has_class( 'wp-block-embed-wordpress-tv' ) ) { + $preconnect_hrefs[] = 'https://video.wordpress.com'; + $preconnect_hrefs[] = 'https://public-api.wordpress.com'; + $preconnect_hrefs[] = 'https://videos.files.wordpress.com'; + $preconnect_hrefs[] = 'https://v0.wordpress.com'; // This does not appear to be a load-balanced domain since v1.wordpress.com is not valid. + } elseif ( $has_class( 'wp-block-embed-instagram' ) ) { + $preconnect_hrefs[] = 'https://www.instagram.com'; + $preconnect_hrefs[] = 'https://static.cdninstagram.com'; + $preconnect_hrefs[] = 'https://scontent.cdninstagram.com'; + } elseif ( $has_class( 'wp-block-embed-tiktok' ) ) { + $preconnect_hrefs[] = 'https://www.tiktok.com'; + // Note: The other domains used for TikTok embeds include https://lf16-tiktok-web.tiktokcdn-us.com, + // https://lf16-cdn-tos.tiktokcdn-us.com, and https://lf16-tiktok-common.tiktokcdn-us.com among others + // which either appear to be geo-targeted ('-us') _or_ load-balanced ('lf16'). So these are not added + // to the preconnected hosts. + } elseif ( $has_class( 'wp-block-embed-amazon' ) ) { + $preconnect_hrefs[] = 'https://read.amazon.com'; + $preconnect_hrefs[] = 'https://m.media-amazon.com'; + } elseif ( $has_class( 'wp-block-embed-soundcloud' ) ) { + $preconnect_hrefs[] = 'https://w.soundcloud.com'; + $preconnect_hrefs[] = 'https://widget.sndcdn.com'; + // Note: There is also https://i1.sndcdn.com which is for the album art, but the '1' indicates it may be geotargeted/load-balanced. + } elseif ( $has_class( 'wp-block-embed-pinterest' ) ) { + $preconnect_hrefs[] = 'https://assets.pinterest.com'; + $preconnect_hrefs[] = 'https://widgets.pinterest.com'; + $preconnect_hrefs[] = 'https://i.pinimg.com'; + } - foreach ( $preconnect_hrefs as $preconnect_href ) { - $context->link_collection->add_link( - array( - 'rel' => 'preconnect', - 'href' => $preconnect_href, - ) - ); + foreach ( $preconnect_hrefs as $preconnect_href ) { + $context->link_collection->add_link( + array( + 'rel' => 'preconnect', + 'href' => $preconnect_href, + ) + ); + } + } 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' ) ) ); + $this->added_lazy_script = true; } - } 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' ) ) ); - $this->added_lazy_script = true; } /* diff --git a/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-with-only-mobile-url-metrics.php b/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-with-only-mobile-url-metrics.php new file mode 100644 index 0000000000..ec86becada --- /dev/null +++ b/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-with-only-mobile-url-metrics.php @@ -0,0 +1,55 @@ + static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { + 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' => 100, + 'elements' => array( + array( + 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]', + 'isLCP' => false, + 'intersectionRatio' => 0.0, + 'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ), + ), + ), + ) + ) + ); + }, + 'buffer' => ' + + + + ... + + +
+
+ +
+
+ + + ', + 'expected' => ' + + + + ... + + + +
+
+ +
+
+ + + + ', +); diff --git a/plugins/embed-optimizer/tests/test-cases/too-many-bookmarks.php b/plugins/embed-optimizer/tests/test-cases/too-many-bookmarks.php index 696f16c603..bd56e9c71d 100644 --- a/plugins/embed-optimizer/tests/test-cases/too-many-bookmarks.php +++ b/plugins/embed-optimizer/tests/test-cases/too-many-bookmarks.php @@ -3,6 +3,17 @@ 'set_up' => static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { $test_case->setExpectedIncorrectUsage( 'WP_HTML_Tag_Processor::set_bookmark' ); + $test_case->populate_url_metrics( + array( + array( + 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::BOGUS]', + 'isLCP' => false, + 'intersectionRatio' => 0.0, + ), + ), + false + ); + // Check what happens when there are too many bookmarks. add_action( 'od_register_tag_visitors', diff --git a/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php b/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php index eb1feb0197..bc408dc70f 100644 --- a/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php +++ b/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php @@ -70,12 +70,23 @@ public function __invoke( OD_Tag_Visitor_Context $context ): bool { $processor->remove_attribute( 'fetchpriority' ); } + /* + * Do not do any lazy-loading if the mobile and desktop viewport groups lack URL metrics. This is important + * because if there is an IMG in the initial viewport on desktop but not mobile, if then there are only URL + * metrics collected for mobile then the IMG will get lazy-loaded which is good for mobile but for desktop + * it will hurt performance. So this is why it is important to have URL metrics collected for both desktop and + * mobile to verify whether maximum intersectionRatio is accounting for both screen sizes. + */ $element_max_intersection_ratio = $context->url_metric_group_collection->get_element_max_intersection_ratio( $xpath ); // If the element was not found, we don't know if it was visible for not, so don't do anything. if ( is_null( $element_max_intersection_ratio ) ) { $processor->set_meta_attribute( 'unknown-tag', true ); // Mostly useful for debugging why an IMG isn't optimized. - } else { + } elseif ( + $context->url_metric_group_collection->get_first_group()->count() > 0 + && + $context->url_metric_group_collection->get_last_group()->count() > 0 + ) { // Otherwise, make sure visible elements omit the loading attribute, and hidden elements include loading=lazy. $is_visible = $element_max_intersection_ratio > 0.0; $loading = $this->get_attribute_value( $processor, 'loading' ); diff --git a/plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php b/plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php index dd43684ae7..4c0d68ea2d 100644 --- a/plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php +++ b/plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php @@ -178,7 +178,6 @@ private function lazy_load_videos( ?string $poster, OD_Tag_Visitor_Context $cont * metrics collected for mobile then the VIDEO will get lazy-loaded which is good for mobile but for desktop * it will hurt performance. So this is why it is important to have URL metrics collected for both desktop and * mobile to verify whether maximum intersectionRatio is accounting for both screen sizes. - * TODO: Add this same condition to IMG lazy-loading and Embed lazy-loading. */ if ( $context->url_metric_group_collection->get_first_group()->count() === 0 diff --git a/plugins/image-prioritizer/tests/test-cases/common-lcp-image-with-fully-incomplete-sample-data.php b/plugins/image-prioritizer/tests/test-cases/common-lcp-image-with-fully-incomplete-sample-data.php index bd647f30b9..58f4c83cd9 100644 --- a/plugins/image-prioritizer/tests/test-cases/common-lcp-image-with-fully-incomplete-sample-data.php +++ b/plugins/image-prioritizer/tests/test-cases/common-lcp-image-with-fully-incomplete-sample-data.php @@ -4,7 +4,7 @@ $slug = od_get_url_metrics_slug( od_get_normalized_query_vars() ); $sample_size = od_get_url_metrics_breakpoint_sample_size(); - // Only populate the largest viewport group. + // Only populate the largest (desktop) viewport group. for ( $i = 0; $i < $sample_size; $i++ ) { OD_URL_Metrics_Post_Type::store_url_metric( $slug, @@ -26,6 +26,7 @@ ); } }, + // Note: loading=lazy is not removed from these images URL Metrics are only gathered for desktop so far. Both mobile and desktop URL Metrics are required to proceed with lazy-loading. 'buffer' => ' @@ -46,8 +47,8 @@ - Foo - Bar + Foo + Bar From fde893be6bb638dc245519405659142097a95c27 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Thu, 17 Oct 2024 17:19:38 -0700 Subject: [PATCH 2/3] Eliminate DOMRect duplication in tests --- .../tests/test-cases/nested-figure-embed.php | 15 ++------------- ...ed-outside-viewport-with-subsequent-script.php | 14 +------------- ...embed-inside-viewport-without-resized-data.php | 10 ---------- .../single-twitter-embed-inside-viewport.php | 12 +----------- .../single-twitter-embed-outside-viewport.php | 12 +----------- .../single-wordpress-tv-embed-inside-viewport.php | 12 +----------- ...single-wordpress-tv-embed-outside-viewport.php | 12 +----------- .../single-youtube-embed-inside-viewport.php | 12 +----------- .../single-youtube-embed-outside-viewport.php | 12 +----------- 9 files changed, 9 insertions(+), 102 deletions(-) diff --git a/plugins/embed-optimizer/tests/test-cases/nested-figure-embed.php b/plugins/embed-optimizer/tests/test-cases/nested-figure-embed.php index c9ae145167..60c56b04ac 100644 --- a/plugins/embed-optimizer/tests/test-cases/nested-figure-embed.php +++ b/plugins/embed-optimizer/tests/test-cases/nested-figure-embed.php @@ -1,24 +1,13 @@ static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { - $rect = array( - 'width' => 500.1, - 'height' => 500.2, - 'x' => 100.3, - 'y' => 100.4, - 'top' => 0.1, - 'right' => 0.2, - 'bottom' => 0.3, - 'left' => 0.4, - ); - $test_case->populate_url_metrics( array( array( 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]', 'isLCP' => false, 'intersectionRatio' => 1, - 'resizedBoundingClientRect' => array_merge( $rect, array( 'height' => 500 ) ), + 'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ), ), array( 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]/*[1][self::VIDEO]', @@ -29,7 +18,7 @@ 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[2][self::FIGURE]/*[1][self::DIV]', 'isLCP' => false, 'intersectionRatio' => 0, - 'resizedBoundingClientRect' => array_merge( $rect, array( 'height' => 654 ) ), + 'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 654 ) ), ), array( 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[2][self::FIGURE]/*[1][self::DIV]/*[1][self::FIGURE]/*[2][self::VIDEO]', diff --git a/plugins/embed-optimizer/tests/test-cases/single-spotify-embed-outside-viewport-with-subsequent-script.php b/plugins/embed-optimizer/tests/test-cases/single-spotify-embed-outside-viewport-with-subsequent-script.php index 6e2e483cfe..484b25cb2e 100644 --- a/plugins/embed-optimizer/tests/test-cases/single-spotify-embed-outside-viewport-with-subsequent-script.php +++ b/plugins/embed-optimizer/tests/test-cases/single-spotify-embed-outside-viewport-with-subsequent-script.php @@ -1,25 +1,13 @@ static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { - - $rect = array( - 'width' => 500.1, - 'height' => 500.2, - 'x' => 100.3, - 'y' => 100.4, - 'top' => 0.1, - 'right' => 0.2, - 'bottom' => 0.3, - 'left' => 0.4, - ); - $test_case->populate_url_metrics( array( array( 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]', 'isLCP' => false, 'intersectionRatio' => 0, - 'resizedBoundingClientRect' => array_merge( $rect, array( 'height' => 500 ) ), + 'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ), ), ), false diff --git a/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-without-resized-data.php b/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-without-resized-data.php index 1cd9bb40fb..113950c837 100644 --- a/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-without-resized-data.php +++ b/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport-without-resized-data.php @@ -1,16 +1,6 @@ static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { - $rect = array( - 'width' => 500.1, - 'height' => 500.2, - 'x' => 100.3, - 'y' => 100.4, - 'top' => 0.1, - 'right' => 0.2, - 'bottom' => 0.3, - 'left' => 0.4, - ); $test_case->populate_url_metrics( array( array( diff --git a/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport.php b/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport.php index 63968e9758..1e7d455393 100644 --- a/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport.php +++ b/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-inside-viewport.php @@ -1,23 +1,13 @@ static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { - $rect = array( - 'width' => 500.1, - 'height' => 500.2, - 'x' => 100.3, - 'y' => 100.4, - 'top' => 0.1, - 'right' => 0.2, - 'bottom' => 0.3, - 'left' => 0.4, - ); $test_case->populate_url_metrics( array( array( 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]', 'isLCP' => true, 'intersectionRatio' => 1, - 'resizedBoundingClientRect' => array_merge( $rect, array( 'height' => 500 ) ), + 'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ), ), ) ); diff --git a/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport.php b/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport.php index 770c8de3e2..ccdf5fbcfc 100644 --- a/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport.php +++ b/plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport.php @@ -1,23 +1,13 @@ static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { - $rect = array( - 'width' => 500.1, - 'height' => 500.2, - 'x' => 100.3, - 'y' => 100.4, - 'top' => 0.1, - 'right' => 0.2, - 'bottom' => 0.3, - 'left' => 0.4, - ); $test_case->populate_url_metrics( array( array( 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]', 'isLCP' => false, 'intersectionRatio' => 0, - 'resizedBoundingClientRect' => array_merge( $rect, array( 'height' => 500 ) ), + 'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ), ), ) ); diff --git a/plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-inside-viewport.php b/plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-inside-viewport.php index 24f56c8e4b..1fd4ad7972 100644 --- a/plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-inside-viewport.php +++ b/plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-inside-viewport.php @@ -1,23 +1,13 @@ static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { - $rect = array( - 'width' => 500.1, - 'height' => 500.2, - 'x' => 100.3, - 'y' => 100.4, - 'top' => 0.1, - 'right' => 0.2, - 'bottom' => 0.3, - 'left' => 0.4, - ); $test_case->populate_url_metrics( array( array( 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]', 'isLCP' => true, 'intersectionRatio' => 1, - 'resizedBoundingClientRect' => array_merge( $rect, array( 'height' => 500 ) ), + 'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ), ), ), false diff --git a/plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-outside-viewport.php b/plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-outside-viewport.php index b7255a6b81..7d3cd53df8 100644 --- a/plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-outside-viewport.php +++ b/plugins/embed-optimizer/tests/test-cases/single-wordpress-tv-embed-outside-viewport.php @@ -1,23 +1,13 @@ static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { - $rect = array( - 'width' => 500.1, - 'height' => 500.2, - 'x' => 100.3, - 'y' => 100.4, - 'top' => 0.1, - 'right' => 0.2, - 'bottom' => 0.3, - 'left' => 0.4, - ); $test_case->populate_url_metrics( array( array( 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]', 'isLCP' => false, 'intersectionRatio' => 0, - 'resizedBoundingClientRect' => array_merge( $rect, array( 'height' => 500 ) ), + 'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ), ), ), false diff --git a/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-inside-viewport.php b/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-inside-viewport.php index 78dcf667a9..f0e62bba6d 100644 --- a/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-inside-viewport.php +++ b/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-inside-viewport.php @@ -1,23 +1,13 @@ static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { - $rect = array( - 'width' => 500.1, - 'height' => 500.2, - 'x' => 100.3, - 'y' => 100.4, - 'top' => 0.1, - 'right' => 0.2, - 'bottom' => 0.3, - 'left' => 0.4, - ); $test_case->populate_url_metrics( array( array( 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]', 'isLCP' => true, 'intersectionRatio' => 1, - 'resizedBoundingClientRect' => array_merge( $rect, array( 'height' => 500 ) ), + 'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ), ), ) ); diff --git a/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport.php b/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport.php index f95d503763..daef5292c6 100644 --- a/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport.php +++ b/plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport.php @@ -1,23 +1,13 @@ static function ( Test_Embed_Optimizer_Optimization_Detective $test_case ): void { - $rect = array( - 'width' => 500.1, - 'height' => 500.2, - 'x' => 100.3, - 'y' => 100.4, - 'top' => 0.1, - 'right' => 0.2, - 'bottom' => 0.3, - 'left' => 0.4, - ); $test_case->populate_url_metrics( array( array( 'xpath' => '/*[1][self::HTML]/*[2][self::BODY]/*[1][self::FIGURE]/*[1][self::DIV]', 'isLCP' => false, 'intersectionRatio' => 0, - 'resizedBoundingClientRect' => array_merge( $rect, array( 'height' => 500 ) ), + 'resizedBoundingClientRect' => array_merge( $test_case->get_sample_dom_rect(), array( 'height' => 500 ) ), ), ) ); From 4fc33a193a9834abb0004040a2daf17331582398 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Fri, 18 Oct 2024 07:32:54 -0700 Subject: [PATCH 3/3] Fix comment typo Co-authored-by: Pascal Birchler --- .../common-lcp-image-with-fully-incomplete-sample-data.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/image-prioritizer/tests/test-cases/common-lcp-image-with-fully-incomplete-sample-data.php b/plugins/image-prioritizer/tests/test-cases/common-lcp-image-with-fully-incomplete-sample-data.php index 58f4c83cd9..13a7d2f7de 100644 --- a/plugins/image-prioritizer/tests/test-cases/common-lcp-image-with-fully-incomplete-sample-data.php +++ b/plugins/image-prioritizer/tests/test-cases/common-lcp-image-with-fully-incomplete-sample-data.php @@ -26,7 +26,7 @@ ); } }, - // Note: loading=lazy is not removed from these images URL Metrics are only gathered for desktop so far. Both mobile and desktop URL Metrics are required to proceed with lazy-loading. + // Note: loading=lazy is not removed from these images because URL Metrics are only gathered for desktop so far. Both mobile and desktop URL Metrics are required to proceed with lazy-loading. 'buffer' => '