Clarify requirements for render-blocking #39809
Conversation
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
|
|
||
| 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.
|
Hi @eeeps, thanks for these updates! |
|
This pull request has merge conflicts that must be resolved before it can be merged. |
github-actions
bot
added
size/s
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
@Josh-Cena @dipikabh Thank you so much for picking this up where I left off, and apologies for the long silence. I kept thinking I would have time to get back to this "next week". Reading through the committed changes I think they're technically correct (although @noamr is a better judge of that) but could use a little more explanation so folks understand how the various pieces here fit together. Perhaps I'll have time to put another PR together soon. Thanks again! |
|
Sounds good, please feel free to send a PR to add improvements/more details 🙏 |
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