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.