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 #117

• Module Proposal: Alternative LCP Optimization (via Output Buffering) #805
  • Add Image Loading Optimization module #875
• Detecting: Create client-side detection logic for optimizing image loading #870
  • Add initial detection logic for Image Loading Optimization #876
  • Add JS build step to utilize local copy of web-vitals.js #893 (TODO: Make sure web-vitals.js is included in the distribution.)
  • Guard against detection logic from negatively impacting INP #894
  • Improve normalization of URL or query args to avoid infinite space.
• Storing: Create storage backend for image loading optimization from client-side detection #871
  • Add storage for URL metrics to optimize image loading #878
  • Implement garbage collection for URL metrics posts #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).
  • Revisit how URL and slug are handled (comment): Improve URL handling in Optimization Detective #1043.
• Optimizing: Apply image loading optimizations based on stored client-side detection #872
  • Optimize the loading of images using stored URL metrics #884
  • Rely on server-side breadcrumbs for detection and optimization #892
  • Add loading=lazy to any image which is not visible across all breakpoints (cf. comment), unless the image is located in the header in which case it should get fetchpriority=low (as it is likely in some drop-down menu).
  • Send a Link response header as alternative to link tag for preloading LCP image?
  • Remove back-compat for browsers that don't support imagesrcset since >95% do. See comment. Being done in PR for next point.
  • Preload image for LCP element with background-image #914
• Add PHPUnit tests for Image Loading Optimization #898
• Use class instances for common objects handled in image loading optimization logic #933
• Rename module from Image Loading Optimization to Optimization Detective: Rename "Image Loading Optimization" to "Optimization Detective" #1041.
• Add readme.txt
• 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 #1046.