Embed Optimizer

Mô tả

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:

  1. Lazy loading embeds just before they come into view.
  2. Adding preconnect links for embeds in the initial viewport.
  3. 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. This is why WordPress Core tries its best to avoid lazy loading IMG tags which appear in the initial viewport, although the server-side heuristics aren’t 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 Image Prioritizer plugin which extends Optimization Detective to ensure lazy loading is correctly applied based on whether an IMG is in the initial viewport.)

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. For example, if a YouTube embed appears in the initial viewport, Embed Optimizer with Optimization Detective will omit loading=lazy while also adding a preconnect link for https://i.ytimg.com which is the domain from which YouTube video poster images are served. Such preconnect links cause the initial-viewport embeds to load even faster.

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. 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 min-height so that when the embed loads it does not cause a layout shift.

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. Also, note that Optimization Detective does not apply optimizations by default for logged-in admin users.

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.

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. There are currently no settings and no user interface for this plugin since it is designed to work without any configuration.

Cài đặt

Cài đặt từ bên trong WordPress

  1. Hãy truy cập Plugin > Thêm mới.
  2. Tìm kiếm Embed Optimizer.
  3. Cài đặt và kích hoạt plugin Embed Optimizer.

Cài đặt thủ công

  1. Tải lên toàn bộ thư mục embed-optimizer vào thư mục /wp-content/plugins/.
  2. Truy cập Plugins.
  3. Kích hoạt plugin Embed Optimizer.

Hỏi đáp

Tôi có thể gửi phản hồi về plugin của mình ở đâu?

Phản hồi được khuyến khích và đánh giá cao, đặc biệt là vì plugin này có thể chứa các tính năng cốt lõi của WordPress trong tương lai. Nếu bạn có đề xuất hoặc yêu cầu về các tính năng mới, bạn có thể gửi chúng dưới dạng sự cố trong kho lưu trữ GitHub của Nhóm Hiệu suất WordPress. Nếu bạn cần trợ giúp về khắc phục sự cố hoặc có câu hỏi về plugin, vui lòng tạo một chủ đề mới trên diễn đàn hỗ trợ của chúng tôi.

Tôi có thể báo cáo lỗi bảo mật ở đâu?

Nhóm Hiệu suất và cộng đồng WordPress rất coi trọng các lỗi bảo mật. Chúng tôi đánh giá cao nỗ lực của bạn trong việc tiết lộ một cách có trách nhiệm những phát hiện của mình và sẽ nỗ lực hết sức để ghi nhận những đóng góp của bạn.

Để báo cáo sự cố bảo mật, vui lòng truy cập chương trình WordPress HackerOne.

Làm cách nào để tôi có thể đóng góp cho plugin?

Các khoản đóng góp luôn được chào đón! Tìm hiểu thêm về cách tham gia vào Sổ tay nhóm hiệu suất cốt lõi.

Các mã nguồn plugin được đặt trong kho lưu trữ WordPress/performance trên GitHub.

Đánh giá

Không có đánh giá nào cho plugin này.

Người đóng góp & Lập trình viên

“Embed Optimizer” là mã nguồn mở. Những người sau đã đóng góp vào plugin này.

Những người đóng góp

“Embed Optimizer” đã được dịch qua 5 ngôn ngữ. Cảm ơn những người tham gia dịch vì đóng góp của họ.

Dịch “Embed Optimizer” sang ngôn ngữ của bạn.

Muốn tham gia phát triển?

Duyệt code, check out SVN repository, hoặc theo dõi nhật ký phát triển qua RSS.

Nhật ký thay đổi

1.0.0-beta1

Cải tiến

  • Bump version to 1.0.0-beta1 to indicate graduation from being experimental. See 1846.
  • Use CSS range syntax in media queries. (1833)

0.4.1

Sửa lỗi

  • Remove requirement for both mobile and desktop URL metrics to be collected for preconnect links to be added. (1764)

0.4.0

Cải tiến

  • Incorporate media queries into preconnect links to account for whether embeds are in viewport. (1654)
  • Serve unminified scripts when SCRIPT_DEBUG is enabled. (1643)

0.3.0

Cải tiến

  • Leverage URL Metrics to reserve space for embeds to reduce CLS. (1373)
  • Avoid lazy-loading images and embeds unless there are URL Metrics for both mobile and desktop. (1604)

0.2.0

Cải tiến

  • Tạo điều kiện nhúng Embed Optimizer. (1337)
  • Tận dụng Optimization Detective để tối ưu hóa các phần nhúng trong Embed Optimizer. (1302)

0.1.2

Cải tiến

  • Cải thiện chất lượng mã tổng thể với các kiểm tra phân tích tĩnh nghiêm ngặt hơn. (775)
  • Nâng yêu cầu PHP tối thiểu lên 7.2. (1130)

Sửa lỗi

  • Ẩn iframe nhúng bài đăng bằng visibility:hidden thay vì cắt. (1192)

0.1.1

  • Sử dụng slug plugin cho thẻ trình tạo. (1103)
  • Nâng phiên bản WP tối thiểu bắt buộc lên 6.4. (1076)

0.1.0

  • Phát hành lần đầu.