Leverage Optimization Detective to optimize embeds in Embed Optimizer #1302

westonruter · 2024-06-13T14:30:09Z

Summary

When an embed appears in the initial viewport, preconnect links are added for the domains for assets known to be loaded when that embed is on the page. Initial support has been added for YouTube, Twitter, and WordPress TV. Fixes Preconnect to domains of resources for LCP elements known to be in embeds when in initial viewport #1058.
When embeds are in the initial viewport they now do not get lazy-loaded. Only embeds which do not appear in any initial viewport will get lazy-loaded. Fixes Integrate Embed Optimizer with Optimization Detective to skip lazy-loading LCP embeds #1054.

Relevant technical choices

The OD_HTML_Tag_Walker class has been eliminated. This was a wrapper around the WP_HTML_Tag_Processor subclass to ensure that any of the visitors would not call next_tag or seek and thus cause the processor to lose track of where it was in the document which would cause problems with generating XPaths for the tags. For Image Optimizer, iterating over the document tag-by-tag in a forward direction was sufficient. For Embed Optimizer, however, it was too limiting. Embed Optimizer needs to be able to iterate over the tags in an embed, and then based on what it discovers, go back and apply the lazy-loading optimizations. Extenders who write tag visitors will have the full WP_HTML_Tag_Processor API available to them. Many of the changes you'll see are just swapping out walker for processor.
The OD_HTML_Tag_Processor::append_head_html() and OD_HTML_Tag_Processor::append_body_html() no longer require that the closing </head> and </body> tag to have first been visited to be successful. The supplied HTML is buffered until the time that get_updated_html() is called.
The existing logic to apply lazy-loading to embeds has been refactored so that it can apply to both the cases in which Optimization Detective is or is not active.
Embed Optimizer now adds a notice to the plugin row meta to suggest installing Optimization Detective and conversely that Optimization Detective is recommended by Embed Optimizer:

The OD_Preload_Link_Collection class has been made more generic as an OD_Link_Collection class, allowing tag visitors to register links of any relation type. For Embed Optimizer, this is leveraged to add preconnect links. Support for additional link attributes has also been added.
Enhanced static analysis with better typing in a few places.
The PHPUnit bootstrap logic now looks for plugin-specific bootstrap file in plugins/$slug/tests/bootstrap.php. This is needed for Embed Optimizer to load Optimization Detective to test its integration.

…utes" This reverts commit 8e27c27. The reason is that PhpStorm is reporting a problem: > Duplicate type 'PreloadLinkAttributes' It's not a problem with PHPStan, however.

…nd add tests for link collection

plugins/embed-optimizer/hooks.php

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

Co-authored-by: Pascal Birchler <pascalb@google.com>

… add/od-embed-optimizer * 'trunk' of https://github.com/WordPress/performance: Facilitate embedding of Embed Optimizer Lowercase context Improve testcase structure Update WP version in CONTRIBUTING.md Test less verbose Remove redundant tests Improve testcase Add test for alt attribute and improve test for source Remove unuse code Update testcase Add srcset back to the original image Revert "Add alt tag to original_image_without_srcset" Add alt tag to original_image_without_srcset Improve I18N Issue Based on Modern Image Formats 2.0.1

westonruter · 2024-07-10T18:39:58Z

plugins/optimization-detective/optimization.php

-	$generator = $walker->open_tags();
-	while ( $generator->valid() ) {
+	$visitors = iterator_to_array( $tag_visitor_registry );
+	while ( $processor->next_open_tag() ) {


Initially I had this as $processor->next_tag() which was not correct as it was resulting in visits to closing tags. Then I added a $processor->is_tag_closer() check which would continue if true. But then I remembered this subclass's next_open_tag() helper method which "works a treat".

plugins/embed-optimizer/hooks.php

adamsilverstein · 2024-07-10T20:56:22Z

plugins/embed-optimizer/hooks.php

+			// over all tags in the document, and this embed_optimizer_update_markup() is usd as part of the tag visitor
+			// from Embed Optimizer. On the other hand, if $html_processor is not an OD_HTML_Tag_Processor then this is
+			// iterating over the tags of the embed markup alone as is passed into the embed_oembed_html filter.
+			if ( $html_processor instanceof OD_HTML_Tag_Processor ) {


this feels a bit hacky to determine the context this way. could you add an additional parameter to embed_optimizer_update_markup instead (and then use a wrapper for the filter callback). not a blocker.

OK, fair enough. Changed in 357364e.

plugins/embed-optimizer/readme.txt

Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

adamsilverstein · 2024-07-10T21:06:23Z

plugins/embed-optimizer/readme.txt

@@ -13,6 +13,10 @@ Optimizes the performance of embeds by lazy-loading iframes and scripts.

 This plugin's purpose is to optimize the performance of [embeds in WordPress](https://wordpress.org/documentation/article/embeds/), such as YouTube videos, TikToks, and so on. Initially this is achieved by lazy-loading them only when they come into view. This improves performance because embeds are generally very resource-intensive and so lazy-loading them ensures that they don't compete with resources when the page is loading. [Other optimizations](https://github.com/WordPress/performance/issues?q=is%3Aissue+is%3Aopen+label%3A%22%5BPlugin%5D+Embed+Optimizer%22) are planned for the future.

+This plugin also recommends that you install and activate the [Optimization Detective](https://wordpress.org/plugins/optimization-detective/) plugin. When it is active, it will start learning about which embeds appear in the initial viewport based on actual visitors to your site. With this information in hand, Embed Optimizer will then avoid lazy-loading embeds which appear in the initial viewport (above the fold). This is important because lazy-loading adds a delay which can hurt the user experience and even degrade the Largest Contentful Paint (LCP) score for the page. In addition to not lazy-loading such above-the-fold embeds, Embed Optimizer will add preconnect links for the hosts of network resources known to be required for embeds (e.g. YouTube, Twitter, and WordPress TV); this can further speed up the loading of critical embeds. Again, these performance enhancements are only enabled when Optimization Detective is active.


I notice you don't mention breakpoints, are you planning to add that in a future PR?

I believe you're referring to https://github.com/WordPress/performance/pull/1302/files#r1670865833 ?

Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

… document Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

adamsilverstein

Looks good, left some small feedback/questions

westonruter added [Plugin] Optimization Detective Issues for the Optimization Detective plugin [Plugin] Embed Optimizer Issues for the Embed Optimizer plugin labels Jun 13, 2024

westonruter added this to the embed-optimizer n.e.x.t milestone Jun 13, 2024

westonruter added the [Type] Enhancement A suggestion for improvement of an existing feature label Jun 13, 2024

westonruter force-pushed the add/od-embed-optimizer branch 6 times, most recently from 1eaffd7 to b6a78d1 Compare June 15, 2024 15:11

westonruter force-pushed the add/od-embed-optimizer branch from a90d933 to a95c4b2 Compare June 28, 2024 00:17

westonruter added 19 commits July 1, 2024 11:43

Add has_class() wrapper method to OD_HTML_Tag_Walker

d74fd95

Add tag visitor stub for embed optimizer

58fa415

Add recommendation notices for OD to be active

22d4e63

Add stub conditional for two logic paths

fca4f64

Rename OD_Preload_Link_Collection to drop 'preload'

8d20c51

Allow adding preconnect links in addition to preload links

44fa472

Fix method.childReturnType

34aec53

Fix plus.leftNonNumeric

db9c50b

Fix instance of booleanAnd.leftNotBoolean

1c15cb3

Start refactoring Link Collection for non-preload links

83b883a

Allow non-preload links to have consecutives merged

bfbe95a

Explicitly pass media type to link

ee8fece

Try using static analysis to enforce rel-specific link attributes

6c70e6e

Revert "Try using static analysis to enforce rel-specific link attrib…

ea0bc0a

…utes" This reverts commit 8e27c27. The reason is that PhpStorm is reporting a problem: > Duplicate type 'PreloadLinkAttributes' It's not a problem with PHPStan, however.

Use runtime check to enforce preconnect attributes

833c281

Add support for more link attributes, fix media attribute handling, a…

2de5e74

…nd add tests for link collection

Remove obsolete todos

ea37fe4

Bootstrap Optimization Detective when running Embed Optimizer tests

23548d2

Use function rather than class for tag visitor

f4b98fe

swissspidy reviewed Jul 10, 2024

View reviewed changes

plugins/embed-optimizer/hooks.php Outdated Show resolved Hide resolved

swissspidy reviewed Jul 10, 2024

View reviewed changes

plugins/embed-optimizer/hooks.php Outdated Show resolved Hide resolved

swissspidy reviewed Jul 10, 2024

View reviewed changes

plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php Show resolved Hide resolved

swissspidy reviewed Jul 10, 2024

View reviewed changes

plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php Outdated Show resolved Hide resolved

westonruter and others added 7 commits July 10, 2024 09:04

Use n.e.x.t version

2e75ebb

Co-authored-by: Pascal Birchler <pascalb@google.com>

Add missing version

07b6f66

Co-authored-by: Pascal Birchler <pascalb@google.com>

Use non-negative-int phpstan type

b9a764e

Co-authored-by: Pascal Birchler <pascalb@google.com>

Use placeholders for the sake of translators

7cc5e19

Co-authored-by: Pascal Birchler <pascalb@google.com>

Prevent tag visitors from erroneously visiting closing tags

85e6947

Add test case for when too many bookmarks are set

a53a873

Use placeholders in errors from bookmark setting and seeking

d8ac531

Co-authored-by: Pascal Birchler <pascalb@google.com>

westonruter requested a review from swissspidy July 10, 2024 18:31

swissspidy approved these changes Jul 10, 2024

View reviewed changes

Reuse next_open_tag()

972105a

westonruter commented Jul 10, 2024

View reviewed changes

adamsilverstein reviewed Jul 10, 2024

View reviewed changes

plugins/embed-optimizer/hooks.php Outdated Show resolved Hide resolved

adamsilverstein reviewed Jul 10, 2024

View reviewed changes

plugins/embed-optimizer/readme.txt Outdated Show resolved Hide resolved

Add preconnects for the most popular embeds

6c3a9b4

Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

adamsilverstein reviewed Jul 10, 2024

View reviewed changes

westonruter and others added 4 commits July 10, 2024 14:08

Add note explaining why require_once is in function

e605df5

Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

Improve copy

2614e6e

Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

Pass explicit param to indicate whether processing fragment or entire…

357364e

… document Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>

Add missing covers tags

eb1404a

adamsilverstein approved these changes Jul 10, 2024

View reviewed changes

westonruter mentioned this pull request Jul 10, 2024

Incorporate breakpoints into preconnect links added by Embed Optimizer #1341

Open

westonruter merged commit 726f10c into trunk Jul 10, 2024
17 of 19 checks passed

westonruter deleted the add/od-embed-optimizer branch July 10, 2024 21:26

westonruter added the [Plugin] Image Prioritizer Issues for the Image Prioritizer plugin (dependent on Optimization Detective) label Jul 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Leverage Optimization Detective to optimize embeds in Embed Optimizer #1302

Leverage Optimization Detective to optimize embeds in Embed Optimizer #1302

westonruter commented Jun 13, 2024 •

edited

Loading

westonruter Jul 10, 2024

adamsilverstein Jul 10, 2024

westonruter Jul 10, 2024

adamsilverstein Jul 10, 2024

westonruter Jul 10, 2024

adamsilverstein left a comment

		@@ -13,6 +13,10 @@ Optimizes the performance of embeds by lazy-loading iframes and scripts.

		This plugin's purpose is to optimize the performance of [embeds in WordPress](https://wordpress.org/documentation/article/embeds/), such as YouTube videos, TikToks, and so on. Initially this is achieved by lazy-loading them only when they come into view. This improves performance because embeds are generally very resource-intensive and so lazy-loading them ensures that they don't compete with resources when the page is loading. [Other optimizations](https://github.com/WordPress/performance/issues?q=is%3Aissue+is%3Aopen+label%3A%22%5BPlugin%5D+Embed+Optimizer%22) are planned for the future.

		This plugin also recommends that you install and activate the [Optimization Detective](https://wordpress.org/plugins/optimization-detective/) plugin. When it is active, it will start learning about which embeds appear in the initial viewport based on actual visitors to your site. With this information in hand, Embed Optimizer will then avoid lazy-loading embeds which appear in the initial viewport (above the fold). This is important because lazy-loading adds a delay which can hurt the user experience and even degrade the Largest Contentful Paint (LCP) score for the page. In addition to not lazy-loading such above-the-fold embeds, Embed Optimizer will add preconnect links for the hosts of network resources known to be required for embeds (e.g. YouTube, Twitter, and WordPress TV); this can further speed up the loading of critical embeds. Again, these performance enhancements are only enabled when Optimization Detective is active.

Leverage Optimization Detective to optimize embeds in Embed Optimizer #1302

Leverage Optimization Detective to optimize embeds in Embed Optimizer #1302

Conversation

westonruter commented Jun 13, 2024 • edited Loading

Summary

Relevant technical choices

westonruter Jul 10, 2024

Choose a reason for hiding this comment

adamsilverstein Jul 10, 2024

Choose a reason for hiding this comment

westonruter Jul 10, 2024

Choose a reason for hiding this comment

adamsilverstein Jul 10, 2024

Choose a reason for hiding this comment

westonruter Jul 10, 2024

Choose a reason for hiding this comment

adamsilverstein left a comment

Choose a reason for hiding this comment

westonruter commented Jun 13, 2024 •

edited

Loading