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

What follows are the main issues to achieve the MVP. For ongoing business-as-usual issues to pull from, see the labelled issues.

MVP Issues

• 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. See Query var normalization should be hardened to avoid infinite space #1467.
• 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). See Internal state of the page (e.g. queried posts or queried object) should factor into whether a stored URL metric is fresh #1466.
  • 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). See Lazy-load images which are not visible in any breakpoint #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): Occluded initial-viewport images should get fetchpriority=low #1309
  • Send a Link response header as alternative to link tag for preloading LCP image: Preload links can be sent via Link HTTP response headers over HTML link tags #1321
  • 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.

[westonruter]

I just created two new issues for these unchecked items:

• Query var normalization should be hardened to avoid infinite space #1467
• Internal state of the page (e.g. queried posts or queried object) should factor into whether a stored URL metric is fresh #1466

With that, I'm closing this as completed!