Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix preload link headers not working with JavaScript modules #185

Merged
merged 4 commits into from
Apr 26, 2023

Conversation

MadLittleMods
Copy link
Contributor

@MadLittleMods MadLittleMods commented Apr 26, 2023

Follow-up to #171 and #175 where they broke because we went from scripts to modules.

Part of #132

Before this PR, we were seeing these warning in the Chrome devtools console:

A preload for 'foo' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

This is caused by a credentials mode mismatch between the <script type="module"> tag and the Link header. A <script type="module"> with no crossorigin attribute indicates a credentials mode of omit and a naive Link: </foo-url>; rel=preload; as=script; has a default credentials mode of same-origin, hence the mismatch and warning we're seeing.

We could set the credentials mode to match using Link: </foo-url>; rel=preload; as=script; omit but there is an even better option! We can use the dedicated Link: </foo-url>; rel=modulepreload link type which not only downloads and puts the the file in the cache like a normal preload but the browser also knows it's a JavaScript module now and can parse/compile it so it's ready to go.


Future consideration: Adding nopush to preload link headers. Many servers initiate an HTTP/2 Server Push when they encounter a preload link in HTTP header form otherwise. Do we want/care about that (or maybe we don't)? (mentioned in https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf#6f54)

Dev notes

Preload Link headers:

Cloudflare:

@MadLittleMods MadLittleMods added T-Defect Something isn't working. Bugs, crashes, or other reported issues. A-performance What is slow, what made it faster and more efficient? labels Apr 26, 2023
@MadLittleMods MadLittleMods changed the title Fix asset preload headers Fix asset preload link headers Apr 26, 2023
@MadLittleMods MadLittleMods changed the title Fix asset preload link headers Fix preload link headers Apr 26, 2023
@MadLittleMods MadLittleMods marked this pull request as ready for review April 26, 2023 08:17
@MadLittleMods MadLittleMods merged commit a3952f1 into main Apr 26, 2023
@MadLittleMods MadLittleMods deleted the madlittlemods/fix-preload-headers branch April 26, 2023 09:08
@MadLittleMods MadLittleMods changed the title Fix preload link headers Fix preload link headers not working with JavaScript modules Apr 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-performance What is slow, what made it faster and more efficient? T-Defect Something isn't working. Bugs, crashes, or other reported issues.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant