Embed Optimizer

Description

This plugin's purpose is to optimize the performance of embeds in WordPress, such as Tweets, YouTube videos, TikToks, and others.

The current optimizations include lazy loading embeds just before they come into view, adding preconnect links for embeds in the initial viewport, and reserving space for embeds that resize to reduce layout shifting.

Lazy loading embeds improves performance because embeds are generally very resource-intensive, so lazy loading them ensures that they don’t compete with resources when the page is loading. Lazy loading of IFRAME-based embeds is handled simply by adding the loading=lazy attribute. Lazy loading embeds that include SCRIPT tags is handled by using an Intersection Observer to watch for when the embed’s FIGURE container is going to enter the viewport, and then it dynamically inserts the SCRIPT tag.

This plugin also recommends that you install and activate the Optimization Detective plugin, which unlocks several optimizations beyond just lazy loading. Without Optimization Detective, lazy loading can actually degrade performance when an embed is positioned in the initial viewport. This is because lazy loading such viewport-initial elements can degrade LCP since rendering is delayed by the logic to determine whether the element is visible.

When Optimization Detective is active, it will start keeping track of which embeds appear in the initial viewport based on actual visits to your site. With this information in hand, Embed Optimizer will then avoid lazy loading embeds which appear in the initial viewport. Furthermore, for such above-the-fold embeds, Embed Optimizer will also add preconnect links for resources known to be used by those embeds.

The other major feature in Embed Optimizer enabled by Optimization Detective is the reduction of layout shifts caused by embeds that resize when they load. Embed Optimizer keeps track of the resized heights of these embeds, setting the appropriate height on the container FIGURE element as the viewport-specific min-height.

Since Optimization Detective relies on page visits to learn how the page is laid out, you’ll need to wait until you have visits from a mobile and desktop device to start seeing optimizations applied. Your site must have the REST API accessible to unauthenticated frontend visitors since this is how metrics are collected about how a page should be optimized.

Other Notable Features

Here are a few other notable features of this free Embed Optimizer plugin.

embeds

performance

lazy loading

FAQ

Contributors and developers

“Embed Optimizer” is open source software. The following people have contributed to this plugin.

WordPress Performance Team

WordPress.org