Performance: consider implementing resource preloading

[jeherve]

Impacted plugin

Jetpack, Backup, Boost, Search

What

WP Core just added options to handle resource preloading. This may be a good opportunity to review our usage of preloading and resource hints in Jetpack plugins.

How

This was just added to WP Core, and will ship with the upcoming version of WordPress, v. 6.1, in November 2022:

https://core.trac.wordpress.org/changeset/53846

It would be nice if we added support for it in our plugins.

Related issues:

• Boost: Preload fonts #20566
• Use preconnect resource hint instead of dns-prefetch #10780

Previous art on this: #16305

[westonruter]

As I just wrote in #20566 (comment):

The Optimization Detective plugin is designed as a plugin dependency which other plugins can extend. For example, Image Prioritizer and Embed Optimizer both leverage Optimization Detective to prioritize loading LCP images, correctly apply lazy-loading, reserve space for layout-shifting embeds, and so on. All of this code is part of the the WordPress/performance repo which is intended to be an incubator for feature plugins that eventually get merged into core. Optimization Detective, Image Prioritizer, and Embed Optimizer are also all designed so that they can be embedded inside other plugins as a library, so Jetpack Boost could distribute the Optimization Detective code without having to install a separate plugin dependency. Nevertheless, with Jetpack's recent push toward decoupling plugins, perhaps Boost would opt to install these plugins separately.

Optimization Detective enables the use of client-side metrics to discover what the LCP element is and which elements are in the initial viewport across mobile, tablet, and desktop--enabling automatic discovery of precisely the resources which should be get preload and preconnect links.

I'm happy to collaborate!