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.

Sign up for GitHub

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

Jump to bottom

perf: prefer defer instead async #36

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

perf: prefer defer instead async #36

wants to merge 1 commit into from

Conversation

gitbreaker222
Copy link

as stated by Harry Roberts in https://twitter.com/csswizardry/status/1331721659498319873 the combination of "async defer" nowadays will never lead to the faster "defer".

Is this ok?

✨ Pull Request

PR Checklist

Please check if your PR fulfills the following requirements:

📓 Referenced Issue

ℹ️ About the PR

Does this PR introduce a breaking change?

  • Yes
  • No

🖼️ Testing Scenarios / Screenshots

testing about "async defer" described in detail here: https://almanac.httparchive.org/en/2020/javascript#how-do-we-load-our-javascript.

Considering that defer provides us with the best loading performance (by ensuring downloading the script happens in parallel to other work, and execution waits until after the page can be displayed), we would hope to see that percentage a bit higher. In fact, as it is that 6.0% is slightly inflated.

Back when supporting IE8 and IE9 was more common, it was relatively common to use both the async and defer attributes. With both attributes in place, any browser supporting both will use async. IE8 and IE9, which don’t support async will fall back to defer.

Nowadays, the pattern is unnecessary for the vast majority of sites and any script loaded with the pattern in place will interrupt the HTML parser when it needs to be executed, instead of deferring until the page has loaded. The pattern is still used surprisingly often, with 11.4% of mobile pages serving at least one script with that pattern in place. In other words, at least some of the 6% of scripts that use defer aren’t getting the full benefits of the defer attribute.

As this PR edits "just" a small boilerplate, I've not done extra testing. The linked article has been broadcasted by smashing magazine, so I guess this counts as some sort of peer review ^^

@gitbreaker222
prefer defer
3c4d51b 
as stated by Harry Roberts in https://twitter.com/csswizardry/status/1331721659498319873 the combination of "async defer" nowadays will never lead to the faster "defer".

Is this ok?
@MarcoMiltenburg
Copy link

And the <script> tag should be added to the <head> of the document. The defer attribute already defers execution of the script until the document has been fully loaded so there is no need to put it at the bottom of the <body>. It's better to put it in the <head> tag so that it will potentially be downloaded earlier.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@gitbreaker222 @MarcoMiltenburg