Re: [minutes] Web Performance WG Teleconference #122 2013-12-11

On Wed, Dec 11, 2013 at 5:54 PM, Jatinder Mann <jmann@microsoft.com> wrote:

> Ilya also raised a concern that postpone should be able to be set on
> container elements that aren’t visible, like the div element. This way
> users can set postpone on the container instead of setting it on each
> individual element. Seeing that using CSS won’t work as formatting occurs
> much later in the pipeline, this seems like a reasonable request.


To provide a bit more context, the case I had in mind is something like
this:

<div id="header"> ... </div>
<div id="hero-content" *postpone*>
   <img src="large-image.jpg">
   <script src="awesome-widget.js">
</div>
...
<my-awesome-future-component *postpone*>
  <li> Foo
  <li> Bar
</my-awesome-future-component>
</div id="footer"> ... </div>

When designing an RWD site it's fairly common to hide (display: none) an
entire section (e.g. the big "hero" section in example above), which may
contain images, scripts, and other external resources. Today, you would
have to put a "postpone" attribute on every element within that container,
and even with that you wouldn't be able to postpone a script or any other
element that's not part of the render tree.

Instead, I'm wondering if we can allow postpone to be defined not just on
an individual element but on a containing element, which would then
propagate this state to all of its children - i.e. in example above,
neither large-image.jpg or awesome-widget.js would get downloaded while
#hero-content is not part of the rendering tree. I think this would make
RWD development a lot simpler... and lighter.

As a case in point, I've seen many sites which hide maps script or social
widgets sections until they are clicked and expanded (and often they're
not) - today, those scripts are still downloaded, whereas allowing postpone
on an outer container would load them on demand or not at all.

ig

P.S. we should also think about how this could/would interact with custom
elements.