-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1654 from ShyamGadde/add/breakpoints-in-preconnec…
…t-links Incorporate breakpoints into preconnect links added by Embed Optimizer
- Loading branch information
Showing
20 changed files
with
340 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
plugins/embed-optimizer/tests/test-cases/single-twitter-embed-outside-viewport-on-mobile.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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>— 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>— 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> | ||
| ', | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
73 changes: 73 additions & 0 deletions
73
...embed-optimizer/tests/test-cases/single-wordpress-tv-embed-outside-viewport-on-mobile.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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&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&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> | ||
| ', | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
plugins/embed-optimizer/tests/test-cases/single-youtube-embed-outside-viewport-on-mobile.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ', | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.