Preload suggestions are too aggressive

I recently came across several partners who had applied preload too aggressively in ways that were making every performance metric worse, and when asked why, they shared Lighthouse reports that told them to do so. I think there are a couple culprits in Lighthouse where the preload advice is too aggressive and we should scale back our preload recommendations.

Examples:

• Recommending to preload an optional font so that it’s used is bad advice for mobile connections that won’t end up using it anyway. Given how contentious this audit was in the first place, it seems clear to me that this is more of a case-by-case basis recommendation and shouldn’t be a blanket recommendation on mobile. Proposed action: Mark this audit not applicable on mobile (I might even want an audit that says “DONT’T preload an optional font on mobile”)
• Preload of swap fonts. A particular site was preloading five different webfonts because Lighthouse told them to which resulted is a massive ugly tradeoff in 2s LCP delay (due to contention with the render blocking stylesheet) in exchange for like .01 CLS improvement. Proposed action: don’t suggest preloading fonts with a non-block font display when throttling method is simulate (in applied throttling Chrome will have already rendered), tbd language changes that the preload audit isn’t meant to be followed blindly, it’s a “pick the important 1 or 2” situation
• Maybe more…

[connorjclark]

Yes, preload is often a footgun. Should we do something like https://github.com/GoogleChrome/lighthouse/pull/9903 ?

[paulirish]

5. Possibly consider adding an audit that says do NOT use headers

I asked pmeenan about this and he said…

The html tag lets you control when it is discovered and fetched. If you put it in the headers it will still jump ahead of css, js, etc just by virtue of being discovered first

and also

Not sure I’d preload the LCP image though unless it is a background image. Priority Hints are a better fit for regular <img> tags

---

issue status:

uses-rel-preload and preload-fonts are still disabled. we think they’re too aggressive to just reenable. and we need to do some work to determine a new policy. and as pat indicates, we may want to adjust our preload-lcp-image audit to suggest priority hints above a preload

---

edit: WPT tweaked some unused-preload reporting stuff here: Add support for reporting unused preloads by pmeenan · #490 · wptagent

edit May 23 2022: We previously decided the next action here is for someone to author a design doc to capture the problem space and potential solution space. (There are several preload issues open right now). Phil also has some ideas that would be good to align on.