Module Proposal: oEmbed Optimizer #888
Labels
[Plugin] Embed Optimizer
Issues for the Embed Optimizer plugin
[Type] (Legacy) Module Proposal
A new module proposal (legacy)
Overview
About the module
Purpose
Optimize loading of oEmbeds by ensuring they are lazy loaded and that scripts are only loaded as the embed enters the viewport.
Scope
Adjust core's loading of oEmbeds to make them lazier.
Rationale
oEmbeds are embedded visual blocks and on WordPress sites, they are typically inserted by pasting a URL, for example a tweet or youtube video into the block editor. This URL is transformed by the editor into an embed block.
oEmbeds represent an unpredictable contributor to performance. Since they by nature include third party resources, they tend to compete for resources with the main page thread. While an oEmbed could be simple, they can also be incredibly impactful - loading on additional resources dynamically in unpredictable ways.
oEmbed Stats
I gathered some stats about oEmbed usage in WordPress by querying httparchive:
How oEmbeds work
oEmbeds are typically implemented either as an iframe or using a script tag that expands a block of content.
Example: YouTube oEmbed which is implemented as an iframe:
Of note for iframe oEmbeds:
Example: Twitter (X) oEmbed which is implemented with a script loader:
Notes: A couple of things to note about the Twitter oEmbed (and similar oEmbeds that use a loader script):
A minimal version of the tweet itself still loads and works even before the JavaScript loads or if JavaScript is disabled
The https://platform.twitter.com/widgets.js script is generic and is loaded for every Twitter oEmbed. Its job is to expand fill its container div content with a full visual representation, including an image preview:
In the Twitter example, the widget.js script replaces the oEmbeds parent div (
wp-block-embed__wrapper
) content entirely with an iframe that provides the visual representation:WordPress post embeds
WordPress itself provides an oEmbed capability, and pasting a post URL into the editor results in a WordPress embed - a mini version of the linked post embedded into the post. These embeds are a bit of a special case and while implemented as an iframe, they are hidden until a signal is received from the inner frame, making them a poor match for lazy loading
Optimizing oEmbeds
In my PR I propose optimizing oEmbeds using two techniques:
For oEmbeds delivered as iframes:
For oEmbeds built using script tags:
To Do
WordPress oEmebds need special treatment as mentioned above
The scroll tolerance should be bandwidth based (higher speed connections get a smaller preload window)
The text was updated successfully, but these errors were encountered: