{"id":3366,"date":"2025-02-14T11:56:15","date_gmt":"2025-02-14T11:56:15","guid":{"rendered":"https:\/\/s-o-s.net\/embed-optimizer\/"},"modified":"2025-02-14T11:56:15","modified_gmt":"2025-02-14T11:56:15","slug":"embed-optimizer","status":"publish","type":"post","link":"https:\/\/s-o-s.net\/en_gb\/embed-optimizer\/","title":{"rendered":"Embed Optimizer"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<article id=\"post-191061\" class=\"alignwide post-191061 plugin type-plugin status-publish hentry plugin_tags-embeds plugin_tags-performance plugin_category-security-and-spam-protection plugin_contributors-wordpressdotorg plugin_business_model-community plugin_committers-performanceteam plugin_committers-westonruter\">\n<div class=\"plugin-banner\" id=\"plugin-banner-embed-optimizer\"><\/div>\n<header class=\"plugin-header\">\n<div class=\"entry-heading-container\">\n<div>\n<div class=\"entry-thumbnail\">\n\t\t\t\t\t<img decoding=\"async\" class=\"plugin-icon\" src=\"https:\/\/ps.w.org\/embed-optimizer\/assets\/icon.svg?rev=3098223\" alt=\"\">\t\t\t\t<\/div>\n<div>\n<h1 class=\"plugin-title\">Embed Optimizer<\/h1>\n<p>\t\t\t\t\t<span class=\"byline\">By <span class=\"author vcard\"><a target=\"_blank\" class=\"url fn n\" href=\"https:\/\/profiles.wordpress.org\/performanceteam\/\" rel=\"noopener\">performanceteam<\/a><\/span><\/span>\n\t\t\t\t<\/div>\n<\/p><\/div>\n<div class=\"plugin-actions\">\n<div class=\"wp-block-button is-small plugin-download download-button\"><a target=\"_blank\" class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/downloads.wordpress.org\/plugin\/embed-optimizer.1.0.0-beta1.zip\" rel=\"noopener\">Download<\/a><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/header>\n<p><!-- .entry-header --><\/p>\n<p>\t<span id=\"description\"><\/span><br \/>\n\t<span id=\"reviews\"><\/span><br \/>\n\t<span id=\"installation\"><\/span><br \/>\n\t<span id=\"developers\"><\/span><br \/>\n\t<span id=\"advanced\" class=\"\"><\/span><br \/>\n\t<span id=\"section-links\"><\/p>\n<ul class=\"tabs clear\">\n<li id=\"tablink-description\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/embed-optimizer\/#description\" rel=\"noopener\">Details<\/a><\/li>\n<li id=\"tablink-reviews\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/embed-optimizer\/#reviews\" rel=\"noopener\">Reviews<\/a><\/li>\n<li id=\"tablink-installation\">\n\t\t\t\t<a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/embed-optimizer\/#installation\" rel=\"noopener\">Installation<\/a>\n\t\t\t<\/li>\n<li id=\"tablink-developers\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/embed-optimizer\/#developers\" rel=\"noopener\">Development<\/a><\/li>\n<\/ul>\n<div id=\"link-support\">\n\t\t\t<a target=\"_blank\" href=\"https:\/\/wordpress.org\/support\/plugin\/embed-optimizer\/\" rel=\"noopener\">Support<\/a>\n\t\t<\/div>\n<p>\t<\/span><br \/>\n\t<script type=\"text\/javascript\">if ( '#changelog' == window.location.hash ) { window.setTimeout( function() { window.location.hash=\"#developers\"; }, 10 ); }<\/script><\/p>\n<div class=\"entry-content\">\n<div id=\"tab-description\" class=\"plugin-description section\">\n<h2 id=\"description-header\">Description<\/h2>\n<p>This plugin\u2019s purpose is to optimize the performance of <a target=\"_blank\" href=\"https:\/\/wordpress.org\/documentation\/article\/embeds\/\" rel=\"ugc noopener\">embeds in WordPress<\/a>, such as Tweets, YouTube videos, TikToks, and others.<\/p>\n<p>The current optimizations include:<\/p>\n<ol>\n<li>Lazy loading embeds just before they come into view.<\/li>\n<li>Adding preconnect links for embeds in the initial viewport.<\/li>\n<li>Reserving space for embeds that resize to reduce layout shifting.<\/li>\n<\/ol>\n<p><strong>Lazy loading embeds<\/strong> improves performance because embeds are generally very resource-intensive, so lazy loading them ensures that they don\u2019t compete with resources when the page is loading. Lazy loading of <code>IFRAME<\/code>-based embeds is handled simply by adding the <code>loading=lazy<\/code> attribute. Lazy loading embeds that include <code>SCRIPT<\/code> tags is handled by using an Intersection Observer to watch for when the embed\u2019s <code>FIGURE<\/code> container is going to enter the viewport, and then it dynamically inserts the <code>SCRIPT<\/code> tag.<\/p>\n<p><strong>This plugin also recommends that you install and activate the <a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/optimization-detective\/\" rel=\"ugc noopener\">Optimization Detective<\/a> plugin<\/strong>, which unlocks several optimizations beyond just lazy loading. Without Optimization Detective, lazy loading can actually degrade performance <em>when an embed is positioned in the initial viewport<\/em>. 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. This is why WordPress Core tries its best to <a target=\"_blank\" href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/15\/refining-wordpress-cores-lazy-loading-implementation\/\" rel=\"nofollow ugc noopener\">avoid<\/a> <a target=\"_blank\" href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/15\/refining-wordpress-cores-lazy-loading-implementation\/\" rel=\"nofollow ugc noopener\">lazy loading<\/a> <code>IMG<\/code> tags which appear in the initial viewport, although the server-side heuristics aren\u2019t perfect. This is where Optimization Detective comes in since it detects whether an embed appears in any breakpoint-specific viewports, like mobile, tablet, and desktop. (See also the <a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/image-prioritizer\/\" rel=\"ugc noopener\">Image Prioritizer<\/a> plugin which extends Optimization Detective to ensure lazy loading is correctly applied based on whether an IMG is in the initial viewport.)<\/p>\n<p>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 <strong>add preconnect links<\/strong> for resources known to be used by those embeds. For example, if a YouTube embed appears in the initial viewport, Embed Optimizer with Optimization Detective will omit <code>loading=lazy<\/code> while also adding a preconnect link for <code>https:\/\/i.ytimg.com<\/code> which is the domain from which YouTube video poster images are served. Such preconnect links cause the initial-viewport embeds to load even faster.<\/p>\n<p>The other major feature in Embed Optimizer enabled by Optimization Detective is the <strong>reduction of layout shifts<\/strong> caused by embeds that resize when they load. This is seen commonly in WordPress post embeds or Tweet embeds. Embed Optimizer keeps track of the resized heights of these embeds. With these resized heights stored, Embed Optimizer sets the appropriate height on the container FIGURE element as the viewport-specific <code>min-height<\/code> so that when the embed loads it does not cause a layout shift.<\/p>\n<p>Since Optimization Detective relies on page visits to learn how the page is laid out, you\u2019ll need to wait until you have visits from a mobile and desktop device to start seeing optimizations applied. Also, note that Optimization Detective does not apply optimizations by default for logged-in admin users.<\/p>\n<p>Please note that the optimizations are intended to apply to Embed blocks. So if you do not see optimizations applied, make sure that your embeds are not inside a Classic Block.<\/p>\n<p>Your site must have the <strong>REST API accessible<\/strong> to unauthenticated frontend visitors since this is how metrics are collected about how a page should be optimized. There are currently <strong>no settings<\/strong> and no user interface for this plugin since it is designed to work without any configuration.<\/p>\n<\/div>\n<div id=\"tab-installation\" class=\"plugin-installation section\">\n<h2 id=\"installation-header\">Installation<\/h2>\n<h4>Installation from within WordPress<\/h4>\n<ol>\n<li>Visit <strong>Plugins &gt; Add New<\/strong>.<\/li>\n<li>Search for <strong>Embed Optimizer<\/strong>.<\/li>\n<li>Install and activate the <strong>Embed Optimizer<\/strong> plugin.<\/li>\n<\/ol>\n<h4>Manual installation<\/h4>\n<ol>\n<li>Upload the entire <code>embed-optimizer<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory.<\/li>\n<li>Visit <strong>Plugins<\/strong>.<\/li>\n<li>Activate the <strong>Embed Optimizer<\/strong> plugin.<\/li>\n<\/ol>\n<\/div>\n<div id=\"faq\" class=\"plugin-faq section\">\n<h2 id=\"faq-header\">FAQ<\/h2>\n<dl>\n<dt id=\"where%20can%20i%20submit%20my%20plugin%20feedback%3F\">\n<h3>Where can I submit my plugin feedback?<\/h3>\n<\/dt>\n<dd>\n<p>Feedback is encouraged and much appreciated, especially since this plugin may contain future WordPress core features. If you have suggestions or requests for new features, you can <a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/issues\/new\/choose\" rel=\"nofollow ugc noopener\">submit them as an issue in the WordPress Performance Team\u2019s GitHub repository<\/a>. If you need help with troubleshooting or have a question about the plugin, please <a target=\"_blank\" href=\"https:\/\/wordpress.org\/support\/plugin\/embed-optimizer\/#new-topic-0\" rel=\"ugc noopener\">create a new topic on our support forum<\/a>.<\/p>\n<\/dd>\n<dt id=\"where%20can%20i%20report%20security%20bugs%3F\">\n<h3>Where can I report security bugs?<\/h3>\n<\/dt>\n<dd>\n<p>The Performance team and WordPress community take security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.<\/p>\n<p>To report a security issue, please visit the <a target=\"_blank\" href=\"https:\/\/hackerone.com\/wordpress\" rel=\"nofollow ugc noopener\">WordPress HackerOne<\/a> program.<\/p>\n<\/dd>\n<dt id=\"how%20can%20i%20contribute%20to%20the%20plugin%3F\">\n<h3>How can I contribute to the plugin?<\/h3>\n<\/dt>\n<dd>\n<p>Contributions are always welcome! Learn more about how to get involved in the <a target=\"_blank\" href=\"https:\/\/make.wordpress.org\/performance\/handbook\/get-involved\/\" rel=\"nofollow ugc noopener\">Core Performance Team Handbook<\/a>.<\/p>\n<p>The <a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/tree\/trunk\/plugins\/embed-optimizer\" rel=\"nofollow ugc noopener\">plugin source code<\/a> is located in the <a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\" rel=\"nofollow ugc noopener\">WordPress\/performance<\/a> repo on GitHub.<\/p>\n<\/dd>\n<\/dl>\n<\/div>\n<div id=\"tab-reviews\" class=\"plugin-reviews section\">\n<h2 id=\"reviews-header\">Reviews<\/h2>\n<div class=\"notice notice-warning notice-alt\">\n<p>There are no reviews for this plugin.<\/p>\n<\/div>\n<\/div>\n<div id=\"tab-developers\" class=\"plugin-developers section\">\n<h2 id=\"developers-header\">Contributors &amp; Developers<\/h2>\n<div class=\"plugin-contributors\">\n<p>\u201cEmbed Optimizer\u201d is open source software. The following people have contributed to this plugin.<\/p>\n<p><span class=\"screen-reader-text\">Contributors<\/span><\/p>\n<ul id=\"contributors-list\" class=\"contributors-list\">\n<li>\n\t\t\t\t<img decoding=\"async\" alt=\"\" src=\"https:\/\/secure.gravatar.com\/avatar\/178f40079143ff7464125e4fbc88e62024a16442920a6a3d6dfa3d7e626be20d?s=32&amp;d=mm&amp;r=g\" srcset=\"https:\/\/secure.gravatar.com\/avatar\/178f40079143ff7464125e4fbc88e62024a16442920a6a3d6dfa3d7e626be20d?s=64&amp;d=mm&amp;r=g 2x\" class=\"avatar avatar-32 photo\" height=\"32\" width=\"32\">\t\t\t\t<a target=\"_blank\" href=\"https:\/\/profiles.wordpress.org\/wordpressdotorg\/\" rel=\"noopener\"><br \/>\n\t\t\t\t\tWordPress.org\t\t\t\t<\/a>\n\t\t\t<\/li>\n<\/ul><\/div>\n<div class=\"plugin-development\">\n<p>\u201cEmbed Optimizer\u201d has been translated into 5 locales. Thank you to <a target=\"_blank\" href=\"https:\/\/translate.wordpress.org\/projects\/wp-plugins\/embed-optimizer\/contributors\" rel=\"noopener\">the translators<\/a> for their contributions.<\/p>\n<p><a target=\"_blank\" href=\"https:\/\/translate.wordpress.org\/projects\/wp-plugins\/embed-optimizer\" rel=\"noopener\">Translate \u201cEmbed Optimizer\u201d into your language.<\/a><\/p>\n<h3>Interested in development?<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/plugins.trac.wordpress.org\/browser\/embed-optimizer\/\" rel=\"noopener\" class=\"broken_link\">Browse the code<\/a>, check out the <a target=\"_blank\" href=\"https:\/\/plugins.svn.wordpress.org\/embed-optimizer\/\" rel=\"noopener\">SVN repository<\/a>, or subscribe to the <a target=\"_blank\" href=\"https:\/\/plugins.trac.wordpress.org\/log\/embed-optimizer\/\" rel=\"noopener\" class=\"broken_link\">development log<\/a> by <a target=\"_blank\" href=\"https:\/\/plugins.trac.wordpress.org\/log\/embed-optimizer\/?limit=100&amp;mode=stop_on_copy&amp;format=rss\" rel=\"noopener\" class=\"broken_link\">RSS<\/a>.<\/p>\n<\/div>\n<\/div>\n<div id=\"tab-changelog\" class=\"plugin-changelog section\">\n<h2 id=\"changelog-header\">Changelog<\/h2>\n<h4>1.0.0-beta1<\/h4>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Bump version to 1.0.0-beta1 to indicate graduation from being experimental. See <a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1846\" rel=\"nofollow ugc noopener\">1846<\/a>.<\/li>\n<li>Use CSS range syntax in media queries. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1833\" rel=\"nofollow ugc noopener\">1833<\/a>)<\/li>\n<\/ul>\n<h4>0.4.1<\/h4>\n<p><strong>Bug Fixes<\/strong><\/p>\n<ul>\n<li>Remove requirement for both mobile and desktop URL metrics to be collected for <code>preconnect<\/code> links to be added. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1764\" rel=\"nofollow ugc noopener\">1764<\/a>)<\/li>\n<\/ul>\n<h4>0.4.0<\/h4>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Incorporate media queries into preconnect links to account for whether embeds are in viewport. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1654\" rel=\"nofollow ugc noopener\">1654<\/a>)<\/li>\n<li>Serve unminified scripts when <code>SCRIPT_DEBUG<\/code> is enabled. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1643\" rel=\"nofollow ugc noopener\">1643<\/a>)<\/li>\n<\/ul>\n<h4>0.3.0<\/h4>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Leverage URL Metrics to reserve space for embeds to reduce CLS. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1373\" rel=\"nofollow ugc noopener\">1373<\/a>)<\/li>\n<li>Avoid lazy-loading images and embeds unless there are URL Metrics for both mobile and desktop. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1604\" rel=\"nofollow ugc noopener\">1604<\/a>)<\/li>\n<\/ul>\n<h4>0.2.0<\/h4>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Facilitate embedding of Embed Optimizer. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1337\" rel=\"nofollow ugc noopener\">1337<\/a>)<\/li>\n<li>Leverage Optimization Detective to optimize embeds in Embed Optimizer. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1302\" rel=\"nofollow ugc noopener\">1302<\/a>)<\/li>\n<\/ul>\n<h4>0.1.2<\/h4>\n<p><strong>Enhancements<\/strong><\/p>\n<ul>\n<li>Improve overall code quality with stricter static analysis checks. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/issues\/775\" rel=\"nofollow ugc noopener\">775<\/a>)<\/li>\n<li>Bump minimum PHP requirement to 7.2. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1130\" rel=\"nofollow ugc noopener\">1130<\/a>)<\/li>\n<\/ul>\n<p><strong>Bug Fixes<\/strong><\/p>\n<ul>\n<li>Hide post embed iframes with visibility:hidden instead of clipping. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1192\" rel=\"nofollow ugc noopener\">1192<\/a>)<\/li>\n<\/ul>\n<h4>0.1.1<\/h4>\n<ul>\n<li>Use plugin slug for generator tag. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1103\" rel=\"nofollow ugc noopener\">1103<\/a>)<\/li>\n<li>Bump minimum required WP version to 6.4. (<a target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/performance\/pull\/1076\" rel=\"nofollow ugc noopener\">1076<\/a>)<\/li>\n<\/ul>\n<h4>0.1.0<\/h4>\n<ul>\n<li>Initial release.<\/li>\n<\/ul>\n<\/div><\/div>\n<p><!-- .entry-content --><\/p>\n<p>\t<!-- .entry-meta --><br \/>\n<\/article>\n<p><br \/>\n<br \/><a href=\"https:\/\/wordpress.org\/plugins\/embed-optimizer\/\" target=\"_blank\" rel=\"noopener\">Source link <\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Embed Optimizer By performanceteam Download Details Reviews Installation Development Support Description This plugin\u2019s 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. Reserving space [&hellip;]<\/p>","protected":false},"author":6,"featured_media":3367,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"give_campaign_id":0,"footnotes":""},"categories":[1933,39,40],"tags":[2264,2054],"class_list":["post-3366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-community-plugin","category-lite-version","category-wp-plugin-solution","tag-embed","tag-optimizer"],"acf":[],"fifu_image_url":"https:\/\/ps.w.org\/embed-optimizer\/assets\/banner-772x250.png?rev=3098223","_links":{"self":[{"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/posts\/3366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/comments?post=3366"}],"version-history":[{"count":0,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/posts\/3366\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/media\/3367"}],"wp:attachment":[{"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/media?parent=3366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/categories?post=3366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/s-o-s.net\/en_gb\/wp-json\/wp\/v2\/tags?post=3366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}