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

[Fizz] declare bootstrap script preloads to be fetchPriority: 'low' #27189

Merged
merged 1 commit into from Aug 7, 2023

Conversation

gnoff
Copy link
Collaborator

@gnoff gnoff commented Aug 4, 2023

Currently stacked on #27201

Generally scripts should not be preloaded before images but if they arrive earlier than image preloads (or images) the network (or server) may be saturated responding to inflight script preloads and not sufficiently prioritize images arriving later. This change marks the preloaded bootstrap script with a low fetch priority to signal to supporting browsers that the request should be deprioritized. This should make the preload operate similar to async script fetch priority which is low by default according to https://web.dev/fetch-priority/

Additionally the bootstrap script preloads will emit before preinitialized scripts do. Normal script preloads will continue to be prioritized after stylesheets

This change can land separatrely but is part of a larger effort to implement elevating image loading and making script loading less blocking. Later changes will emit used suspensey images earlier in the queue and will stop favoring scripts over images that are explicitly preloaded

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Aug 4, 2023
@react-sizebot
Copy link

react-sizebot commented Aug 4, 2023

Comparing: ea17cc1...8928b5e

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 164.38 kB 164.38 kB = 51.77 kB 51.77 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 171.79 kB 171.79 kB = 53.98 kB 53.99 kB
facebook-www/ReactDOM-prod.classic.js = 567.40 kB 567.40 kB = 100.10 kB 100.10 kB
facebook-www/ReactDOM-prod.modern.js = 551.20 kB 551.20 kB = 97.26 kB 97.26 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 8928b5e

@gnoff gnoff force-pushed the bootstrap-preload-priority branch from 05d4dbe to 2eb2c75 Compare August 4, 2023 22:49
@gnoff gnoff requested a review from sebmarkbage August 4, 2023 22:52
@gnoff gnoff force-pushed the bootstrap-preload-priority branch 4 times, most recently from d7b2474 to e081cc9 Compare August 7, 2023 20:35
…rowser to prefer loading paint blocking resources like images even if they arrive after the script preload has been processed
@gnoff gnoff force-pushed the bootstrap-preload-priority branch from e081cc9 to 8928b5e Compare August 7, 2023 22:35
@gnoff gnoff merged commit 9edf470 into facebook:main Aug 7, 2023
34 checks passed
@gnoff gnoff deleted the bootstrap-preload-priority branch August 7, 2023 22:44
github-actions bot pushed a commit that referenced this pull request Aug 7, 2023
…#27189)

Generally scripts should not be preloaded before images but if they
arrive earlier than image preloads (or images) the network (or server)
may be saturated responding to inflight script preloads and not
sufficiently prioritize images arriving later. This change marks the
preloaded bootstrap script with a `low` fetch priority to signal to
supporting browsers that the request should be deprioritized. This
should make the preload operate similar to async script fetch priority
which is low by default according to https://web.dev/fetch-priority/

Additionally the bootstrap script preloads will emit before
preinitialized scripts do. Normal script preloads will continue to be
prioritized after stylesheets

This change can land separatrely but is part of a larger effort to
implement elevating image loading and making script loading less
blocking. Later changes will emit used suspensey images earlier in the
queue and will stop favoring scripts over images that are explicitly
preloaded

DiffTrain build for [9edf470](9edf470)
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
…facebook#27189)

Generally scripts should not be preloaded before images but if they
arrive earlier than image preloads (or images) the network (or server)
may be saturated responding to inflight script preloads and not
sufficiently prioritize images arriving later. This change marks the
preloaded bootstrap script with a `low` fetch priority to signal to
supporting browsers that the request should be deprioritized. This
should make the preload operate similar to async script fetch priority
which is low by default according to https://web.dev/fetch-priority/

Additionally the bootstrap script preloads will emit before
preinitialized scripts do. Normal script preloads will continue to be
prioritized after stylesheets

This change can land separatrely but is part of a larger effort to
implement elevating image loading and making script loading less
blocking. Later changes will emit used suspensey images earlier in the
queue and will stop favoring scripts over images that are explicitly
preloaded
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
…#27189)

Generally scripts should not be preloaded before images but if they
arrive earlier than image preloads (or images) the network (or server)
may be saturated responding to inflight script preloads and not
sufficiently prioritize images arriving later. This change marks the
preloaded bootstrap script with a `low` fetch priority to signal to
supporting browsers that the request should be deprioritized. This
should make the preload operate similar to async script fetch priority
which is low by default according to https://web.dev/fetch-priority/

Additionally the bootstrap script preloads will emit before
preinitialized scripts do. Normal script preloads will continue to be
prioritized after stylesheets

This change can land separatrely but is part of a larger effort to
implement elevating image loading and making script loading less
blocking. Later changes will emit used suspensey images earlier in the
queue and will stop favoring scripts over images that are explicitly
preloaded

DiffTrain build for commit 9edf470.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants