Skip to content

Use defer for non-critical scripts#11096

Merged
aduth merged 1 commit intomainfrom
aduth-script-defer
Aug 16, 2024
Merged

Use defer for non-critical scripts#11096
aduth merged 1 commit intomainfrom
aduth-script-defer

Conversation

@aduth
Copy link
Copy Markdown
Contributor

@aduth aduth commented Aug 16, 2024

🛠 Summary of changes

Updates non-critical scripts to use defer instead of async.

While both async and defer load scripts without blocking the parser, async will block the parser to execute the script as soon as it's loaded, which may block parsing if it happens before parsing is complete. defer will instead wait for parsing to complete before executing the script, which is acceptable behavior for the scripts affected by the changes in this pull request.

The HTML specification includes helpful diagrams illustrating the difference:

image

Related resource: https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript#async-defer

While this resource includes analytics scripts as an example of async usage, it does so under the premise that these are "important for the script to run earlier in the loading process". It's not clear to me that it's important for these to run early.

📜 Testing Plan

Verify there is no regression in the loading of scripts marked as defer, particularly track-errors.js on http://localhost:3000 should load successfully in default development environments.

changelog: User-Facing Improvements, Performance, Use defer for non-critical scripts
@aduth aduth merged commit 3674e15 into main Aug 16, 2024
@aduth aduth deleted the aduth-script-defer branch August 16, 2024 17:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants