Update readme with links to where the performance features are implemented

westonruter · westonruter · commit b4e693c4a194 · 2024-12-16T16:52:39.000-08:00
diff --git a/plugins/embed-optimizer/readme.txt b/plugins/embed-optimizer/readme.txt
@@ -15,9 +15,9 @@ This plugin's purpose is to optimize the performance of [embeds in WordPress](ht
 
 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
+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.
 
diff --git a/plugins/image-prioritizer/readme.txt b/plugins/image-prioritizer/readme.txt
@@ -7,7 +7,7 @@ License:      GPLv2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         performance, optimization, image, lcp, lazy-load
 
-Prioritizes the loading of images and videos based on how visible they are to actual visitors; adds fetchpriority and applies lazy-loading.
+Prioritizes the loading of images and videos based on how visible they are to actual visitors; adds fetchpriority and applies lazy loading.
 
 == Description ==
 
@@ -20,13 +20,14 @@ The current optimizations include:
    2. The first `SOURCE` element with a `type` attribute in a `PICTURE` element. (Art-directed `PICTURE` elements using media queries are not supported.)
    3. An element with a CSS `background-image` inline `style` attribute.
    4. An element with a CSS `background-image` applied with a stylesheet (when the image is from an allowed origin).
+   5. A `VIDEO` element's `poster` image.
 2. Ensure `fetchpriority=high` is only added to an `IMG` when it is the Largest Contentful Paint (LCP) element across all responsive breakpoints.
 3. Add `fetchpriority=low` to `IMG` tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides.
-4. Lazy-Loading:
-   1. Apply lazy-loading to `IMG` tags based on whether they appear in any breakpoint’s initial viewport. (Additionally, [`sizes=auto`](https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/) is then also correctly applied.)
-   2. Implement lazy-loading of CSS background images added via inline `style` attributes.
+4. Lazy loading:
+   1. Apply lazy loading to `IMG` tags based on whether they appear in any breakpoint’s initial viewport.
+   2. Implement lazy loading of CSS background images added via inline `style` attributes.
    3. Lazy-load `VIDEO` tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a `VIDEO` is the LCP element, it gets `preload=auto`; if it is in an initial viewport, the `preload=metadata` default is left; if it is not in an initial viewport, it gets `preload=none`. Lazy-loaded videos also get initial `preload`, `autoplay`, and `poster` attributes restored when the `VIDEO` is going to enter the viewport.
-5. Ensure that `sizes=auto` is added to all lazy-loaded `IMG` elements.
+5. Ensure that [`sizes=auto`](https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/) is added to all lazy-loaded `IMG` elements.
 6. Reduce the size of the `poster` image of a `VIDEO` from full size to the size appropriate for the maximum width of the video (on desktop).
 
 **This plugin requires the [Optimization Detective](https://wordpress.org/plugins/optimization-detective/) plugin as a dependency.** Please refer to that plugin for additional background on how this plugin works as well as additional developer options.
diff --git a/plugins/optimization-detective/readme.txt b/plugins/optimization-detective/readme.txt
@@ -17,7 +17,7 @@ This plugin is a dependency which does not provide end-user functionality on its
 
 = Background =
 
-WordPress uses [server-side heuristics](https://make.wordpress.org/core/2023/07/13/image-performance-enhancements-in-wordpress-6-3/) to make educated guesses about which images are likely to be in the initial viewport. Likewise, it uses server-side heuristics to identify a hero image which is likely to be the Largest Contentful Paint (LCP) element. To optimize page loading, it avoids lazy-loading any of these images while also adding `fetchpriority=high` to the hero image. When these heuristics are applied successfully, the LCP metric for page loading can be improved 5-10%. Unfortunately, however, there are limitations to the heuristics that make the correct identification of which image is the LCP element only about 50% effective. See [Analyzing the Core Web Vitals performance impact of WordPress 6.3 in the field](https://make.wordpress.org/core/2023/09/19/analyzing-the-core-web-vitals-performance-impact-of-wordpress-6-3-in-the-field/). For example, it is [common](https://github.com/GoogleChromeLabs/wpp-research/pull/73) for the LCP element to vary between different viewport widths, such as desktop versus mobile. Since WordPress's heuristics are completely server-side it has no knowledge of how the page is actually laid out, and it cannot prioritize loading of images according to the client's viewport width.
+WordPress uses [server-side heuristics](https://make.wordpress.org/core/2023/07/13/image-performance-enhancements-in-wordpress-6-3/) to make educated guesses about which images are likely to be in the initial viewport. Likewise, it uses server-side heuristics to identify a hero image which is likely to be the Largest Contentful Paint (LCP) element. To optimize page loading, it avoids lazy loading any of these images while also adding `fetchpriority=high` to the hero image. When these heuristics are applied successfully, the LCP metric for page loading can be improved 5-10%. Unfortunately, however, there are limitations to the heuristics that make the correct identification of which image is the LCP element only about 50% effective. See [Analyzing the Core Web Vitals performance impact of WordPress 6.3 in the field](https://make.wordpress.org/core/2023/09/19/analyzing-the-core-web-vitals-performance-impact-of-wordpress-6-3-in-the-field/). For example, it is [common](https://github.com/GoogleChromeLabs/wpp-research/pull/73) for the LCP element to vary between different viewport widths, such as desktop versus mobile. Since WordPress's heuristics are completely server-side it has no knowledge of how the page is actually laid out, and it cannot prioritize loading of images according to the client's viewport width.
 
 In order to increase the accuracy of identifying the LCP element, including across various client viewport widths, this plugin gathers metrics from real users (RUM) to detect the actual LCP element and then use this information to optimize the page for future visitors so that the loading of the LCP element is properly prioritized. This is the purpose of Optimization Detective. The approach is heavily inspired by Philip Walton’s [Dynamic LCP Priority: Learning from Past Visits](https://philipwalton.com/articles/dynamic-lcp-priority/). See also the initial exploration document that laid out this project: [Image Loading Optimization via Client-side Detection](https://docs.google.com/document/u/1/d/16qAJ7I_ljhEdx2Cn2VlK7IkiixobY9zNn8FXxN9T9Ls/view).
 
@@ -40,6 +40,33 @@ There are currently **no settings** and no user interface for this plugin since
 
 When the `WP_DEBUG` constant is enabled, additional logging for Optimization Detective is added to the browser console.
 
+= Use Cases and Examples =
+
+As mentioned above, this plugin is a dependency that doesn't provide features on its own. Dependent plugins leverage the collected URL Metrics to apply optimizations. What follows us a running list of the optimizations which are enabled by Optimization Detective, along with a links to the related code used for the implementation:
+
+**[Image Prioritizer](https://wordpress.org/plugins/image-prioritizer/) ([GitHub](https://github.com/WordPress/performance/tree/trunk/plugins/image-prioritizer)):**
+
+1. Add breakpoint-specific `fetchpriority=high` preload links (`LINK[rel=preload]`) for image URLs of LCP elements:
+   1. An `IMG` element, including the `srcset`/`sizes` attributes supplied as `imagesrcset`/`imagesizes` on the `LINK`. ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php#L167-L177), [2](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php#L304-L349))
+   2. The first `SOURCE` element with a `type` attribute in a `PICTURE` element. (Art-directed `PICTURE` elements using media queries are not supported.) ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php#L192-L275), [2](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php#L304-L349))
+   3. An element with a CSS `background-image` inline `style` attribute. ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php#L62-L92), [2](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php#L182-L203))
+   4. An element with a CSS `background-image` applied with a stylesheet (when the image is from an allowed origin). ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php#L82-L83), [2](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php#L135-L203), [3](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/helper.php#L83-L264), [4](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/detect.js))
+   5. A `VIDEO` element's `poster` image. ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php#L127-L161))
+2. Ensure `fetchpriority=high` is only added to an `IMG` when it is the Largest Contentful Paint (LCP) element across all responsive breakpoints. ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php#L65-L91), [2](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php#L137-L146))
+3. Add `fetchpriority=low` to `IMG` tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides. ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php#L105-L123), [2](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php#L137-L146))
+4. Lazy loading:
+   1. Apply lazy loading to `IMG` tags based on whether they appear in any breakpoint’s initial viewport. ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php#L124-L133))
+   2. Implement lazy loading of CSS background images added via inline `style` attributes. ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-background-image-styled-tag-visitor.php#L205-L238), [2](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/helper.php#L369-L382), [3](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/lazy-load-bg-image.js))
+   3. Lazy-load `VIDEO` tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a `VIDEO` is the LCP element, it gets `preload=auto`; if it is in an initial viewport, the `preload=metadata` default is left; if it is not in an initial viewport, it gets `preload=none`. Lazy-loaded videos also get initial `preload`, `autoplay`, and `poster` attributes restored when the `VIDEO` is going to enter the viewport. ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php#L163-L246), [2](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/helper.php#L352-L367), [3](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/lazy-load-video.js))
+5. Ensure that [`sizes=auto`](https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/) is added to all lazy-loaded `IMG` elements. ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-img-tag-visitor.php#L148-L163))
+6. Reduce the size of the `poster` image of a `VIDEO` from full size to the size appropriate for the maximum width of the video (on desktop). ([1](https://github.com/WordPress/performance/blob/e1d0ac9dd935634b782d711c7e1ae85d296f44cf/plugins/image-prioritizer/class-image-prioritizer-video-tag-visitor.php#L84-L125))
+
+**[Embed Optimizer](https://wordpress.org/plugins/embed-optimizer/) ([GitHub](https://github.com/WordPress/performance/tree/trunk/plugins/embed-optimizer)):**
+
+1. Lazy loading embeds just before they come into view. ([1](https://github.com/WordPress/performance/blob/ce76a6a77c15248126b5dab895bc11d0adda0baa/plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php#L191-L194), [2](https://github.com/WordPress/performance/blob/ce76a6a77c15248126b5dab895bc11d0adda0baa/plugins/embed-optimizer/hooks.php#L168-L336))
+2. Adding preconnect links for embeds in the initial viewport. ([1](https://github.com/WordPress/performance/blob/ce76a6a77c15248126b5dab895bc11d0adda0baa/plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php#L114-L190))
+3. Reserving space for embeds that resize to reduce layout shifting. ([1](https://github.com/WordPress/performance/blob/ce76a6a77c15248126b5dab895bc11d0adda0baa/plugins/embed-optimizer/hooks.php#L81-L144), [2](https://github.com/WordPress/performance/blob/ce76a6a77c15248126b5dab895bc11d0adda0baa/plugins/embed-optimizer/detect.js), [3](https://github.com/WordPress/performance/blob/ce76a6a77c15248126b5dab895bc11d0adda0baa/plugins/embed-optimizer/class-embed-optimizer-tag-visitor.php#L218-L285))
+
 = Hooks =
 
 **Action:** `od_init` (argument: plugin version)
