Optimization Detective: Server-applied optimizations informed by client-side detection

[westonruter]

Feature Description

See exploration document: Image Loading Optimization via Client-side Detection

Work on this is contained in the feature/image-loading-optimization branch. See issues/PRs with the [Plugin] Optimization Detective label.

For more context, see https://github.com/WordPress/performance/issues/117

What follows are the main issues to achieve the MVP. *For ongoing business-as-usual issues to pull from, see the [labelled issues](https://github.com/WordPress/performance/labels/%5BPlugin%5D%20Optimization%20Detective).**

MVP Issues

• [x] #805
  • [x] #875
• [x] Detecting: #870
  • [x] #876
  • [x] https://github.com/WordPress/performance/issues/893 (TODO: Make sure web-vitals.js is included in the distribution.)
  • [x] https://github.com/WordPress/performance/issues/894
  • [ ] Improve normalization of URL or query args to avoid infinite space. See https://github.com/WordPress/performance/issues/1467.
• [x] Storing: #871
  • [x] #878
  • [x] https://github.com/WordPress/performance/issues/895
  • [ ] Deal with cache invalidation for archive pages and search results: disable for search results and include post IDs from The Loop on archives (comment). See https://github.com/WordPress/performance/issues/1466.
  • [x] Revisit how URL and slug are handled (comment): https://github.com/WordPress/performance/pull/1043.
• [x] Optimizing: #872
  • [x] https://github.com/WordPress/performance/pull/884
  • [x] https://github.com/WordPress/performance/pull/892
  • [x] Add loading=lazy to any image which is not visible across all breakpoints (cf. comment). See https://github.com/WordPress/performance/issues/1077
  • [ ] Add fetchpriority=low to images hidden but still "in" the initial viewport in which case it should get fetchpriority=low (as it could be in a header mega menu or perhaps some later carousel slide): https://github.com/WordPress/performance/issues/1309
  • [x] Send a Link response header as alternative to link tag for preloading LCP image: https://github.com/WordPress/performance/issues/1321
  • [x] Remove back-compat for browsers that don't support imagesrcset since >95% do. See comment. Being done in PR for next point.
  • [x] https://github.com/WordPress/performance/pull/914
• [x] https://github.com/WordPress/performance/pull/898
• [x] #933
• [x] Rename module from Image Loading Optimization to Optimization Detective: https://github.com/WordPress/performance/pull/1041.
• [x] Add readme.txt
• [x] Add generator meta tag.

[felixarntz]

@westonruter Can you update the PRs to go against a feature/* branch, to decouple this from the regular release process? That way we can individually review and decide when this is good to be included in a PL release.

[westonruter]

Can you update the PRs to go against a feature/* branch, to decouple this from the regular release process? That way we can individually review and decide when this is good to be included in a PL release.

@felixarntz I've done so with the initial PR (#875). The second PR is branched off the initial PR's branch, so once it is merged it should automatically target the feature branch. (And the third PR is branched off of the second PR's branch.)

[westonruter]

For an easy way to reproduce a scenario where this is needed, try the Enable Responsive Image plugin to set alternate images to display for a given image on different viewport widths.

[westonruter]

I'm seeking to improve on the name "Image Loading Optimization" for the standalone plugin currently under development. As I've shared before, the initial scope for this plugin is to precisely set the fetchpriority=high attribute on the actual LCP image as measured by client visits, including across the various breakpoints. This will also apply to accurately setting/omitting lazy-loading. But I don't want to limit the plugin to just images, as using the client to gather metrics to apply server-side optimizations could also extend to reserving space to reduce CLS, or prioritizing the loading of a font for some LCP header text, or adding content-visibility to element containers to reduce time spent on initial layout. So to keep the door open to extend to other opportunities, I'd like a name less specific to images. I've pulled together some ideas which I came up with on my own as well as those suggested by ~Bard~ Gemini. Could you lend your thoughts in this survey to what resonates with you? https://forms.gle/XGTsUg3ovxnLQ58x9

---

Update: The chosen name is Optimization Detective, although this plugin is slated to become a dependency plugin for an Image Loading Optimization (or similar name) which will be responsible for extending the dependent plugin with the image optimization features. For more, see the long conversation at https://github.com/WordPress/performance/issues/1046.

[westonruter]

I just created two new issues for these unchecked items:

• https://github.com/WordPress/performance/issues/1467
• https://github.com/WordPress/performance/issues/1466

With that, I'm closing this as completed!