Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lighthouse does not detect my use of modulepreload (recommends using preload)

See original GitHub issue

Provide the steps to reproduce

I ran Lighthouse on my site and got the following opportunity suggestion:

Note: I’m using <link rel="modulepreload"> instead of <link rel="preload">.

What is the current behavior?

I’m getting a warning for something that I shouldn’t be getting a warning for. (Also, I’m not sure if the savings calculated is accurate since I am using modulepreload).

What is the expected behavior?

For scripts loaded via <script type="module"> the recommendation should be to use modulepreload (or perhaps recommend using one or the other).

Environment Information

Affected Channels: CLI, DevTools
Lighthouse version: 5.0
Node.js version: v10.15.3
Operating System: macOS 10.14.4

Related issues

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

janoshcommented, Jan 2, 2021

Interesting discussion here! Any new developments over the last year-and-a-half?

I just ran into the same issue where LH (likely falsely) claims I could save 3,000+ ms on a script that’s module-preloaded by adding rel="preload". The url is https://sbsev.netlify.app/blog.

Is this false claim related to the redirect warning in the LH results attached below? LH does not make the same claim when rerunning it on the redirect URL https://sbsev.netlify.app/blog/.

network

1reaction

philipwaltoncommented, May 13, 2019

Hmmm, actually I think that article is correct and I was wrong. modulepreload (per the spec) does not require UAs to preload dependencies, and in my testing since filing this issue, it seems that Chrome does not preload dependencies. (I’m asking around to find out why.)

Given that, it’s probably still good to recommend using modulepreload on all static (top-level) module dependencies, but I’m not sure if there’s a good way to determine that a module is not a top-level, static dependency.

I don’t know of a good way via web APIs, but maybe the devtools protocol exposes this information somehow?

Related, I wonder if it makes sense for Lighthouse to warn if module scripts are preloaded with regular <link rel=preload>, as it sounds like doing that does not put them in the module graph.

Again, I can ask around to see what the best practices are here.