Clarify requirements for render-blocking #39809
Open
+44
−9
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes mdn#39663 Also make clear that we are not only blocking on fetching; also on parsing/application.
eeeps
requested review from
dipikabh and
sideshowbarker
and removed request for
a team
github-actions
bot
added
Content:HTML
noamr
reviewed
Jun 5, 2025
|
|
||
| To ensure that your initial HTML has been parsed and will always render consistently before the transition animation runs, you can use [`<link rel="expect">`](/en-US/docs/Web/HTML/Reference/Attributes/rel#expect). In this element, you include the following attributes: | ||
|
|
||
| - `rel="expect"` to indicate that you want to use this `<link>` element to render block some HTML on the page. | ||
| - `href="#element-id"` to indicate the ID of the element you want to render block. | ||
| - `blocking="render"` to render block the specified HTML. | ||
|
|
||
| > [!NOTE] | ||
| > In order to block rendering, `script`, `link`, and `style` elements with `blocking="render"` must be in the `head` of the document. |
There was a problem hiding this comment.
... and present before the <body> element is parsed.
Adding an element to the <head>after <body> is parsed cannot block rendering.
dipikabh
reviewed
Jun 16, 2025
|
Hi @eeeps, thanks for these updates! |
|
This pull request has merge conflicts that must be resolved before it can be merged. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Clarify requirements for render-blocking. Also make clear that we are not only blocking on fetching; also on parsing/application.
Motivation
I was caught out when trying to implement render-blocking, because I did not understand from either MDN or reading the spec that
scripts withblocking="render"needed to appear in the head. This started a series of conversations with @noamr and @zcorpan about what render-blocking needs (and what needs render-blocking) which I am trying to capture in this PR.Additional details
(see linked spec reference and Bluesky link in #39663).
I'm not sure these notes need to be in all of these places, but figured that removing them would be easier for reviewers than finding all of the places they could/should be.
Related issues and pull requests
Fixes #39663