#879: Soft Navigations
Discussions
Comment by @yoavweiss Jul 27, 2023 (See Github)
A (rough and initial) spec for this is at https://wicg.github.io/soft-navigations It's not yet ready for a full review, but could help understand how this integrates with the rest of the platform.
Discussed
Sep 4, 2023 (See Github)
Peter: looks like performance
Lea: one basic thing I'm unclear on is soft navigation something that happens anyway and this is allowing developers to observe it and react to it? Or is this something that developers opt in explicitly?
Peter: something developers do, like by using the history api to go to a url without fetch
Lea: I thought it was about soft nav that already happens, but unclear if clicking on a hash is soft navigation, or only things initiated from history or navigation api?
Peter: good question. also, triggered by user gesture and modifies dom. Does that exclude fragment navigations? Not sure every soft nav will change the dom... but probably true.
Lea: what is the purpose of the criteria that it needs to change the dom? If it is to detect navigations in an spa that change the page vs navigations that scroll you to a different section, what about cases where developers use hashes to display a different part of the page and hide other parts, or implement tabs. All sorts of these things sound lke they should be soft navs but it wouldn't modify the dom if it's all done through css. And what about cases where you have a component which changes its content and changes happen in shadow dom.. does that count as a dom change? seems hairy. How long after do you listen for a dom change? what if the navigation happens now and the dom change happens seconds later because there was an animation first?
Peter: seems like a weird requirement. The purpose for changing the url is to reflect state, that you want the user to be able to share. Maybe they should describe it that way somehow. But they're talking about a heuristic that the browser can use to detect that this happened. Then I'm wondering why it's the fact that you called the api to change the url? Unless they do want to distinguish just changing the fragment. But why exclude that? Could be state.
Dan: motivation section is well written, I understand where they're coming from. From a performance standpoint.
Peter: in general .. seems like a hole that these soft navs aren't triggering performance apis
Dan: is soft navigation a term of art? I couldn't understand if they're defining this term, or are they saying this is what soft navigations are and this is what the soft navigation api is... are they making an assumption that we already know?
Peter: my take is that they're defining the concept of soft navigation, but I don't know if this is a common term
Dan: related to Lea's point - it seems very narrow, this definition. There could be other ... it sounds to me like a UI/UX thing. Rather than a api.. sounds like a pattern .. they're defining an api and a pattern? Is there a term of art already used for same-document navigation?
Peter: same-document navigation
Peter: not just that there's a dom manipuplation, but a 'meaningful' one. "reasonably considered navigations" - sounds scary. How will they make that work? They have an open question about gmail's compose button, and argue that would be considered a soft nav, or could argue it's an interaction. Trying to determine some definition of interaction vs navigation.. not sure if that's a distinction with merit, that a heuristic can reasonably determine, except for on a handful of known sites like gmail. Does that make sense?
Lea: yes
<blockquote> Hi @yoavweiss -- thanks for bringing this to our attenntion. Our biggest question has to do with the question of DOM modificaitons. You state a soft navigation "modifies the DOM" but it's not clear why this is a requirement? It seems like you're trying to make a distinction between "navigations" and "interactions", it's unclear how this subtle (and underspecified?) distinction can be reliably determinied by your proposed heuristics. We can imagine that the heuristics can be defined to catch current examples but would be wrong about future applications. We wonder if simply using the navigation API should be the trigger, and then possibly provide the developer a hook to filter out navigations they don't feel are worth tracking would be more reliable? </blockquote> Comment by @plinss Sep 4, 2023 (See Github)
Hi @yoavweiss -- thanks for bringing this to our attention. Our biggest question has to do with the question of DOM modifications. You state a soft navigation "modifies the DOM" but it's not clear why this is a requirement? It seems like you're trying to make a distinction between "navigations" and "interactions", it's unclear how this subtle (and underspecified?) distinction can be reliably determined by your proposed heuristics. We can imagine that the heuristics can be defined to catch current examples but would be wrong about future applications. We wonder if simply using the navigation API should be the trigger, and then possibly provide the developer a hook to filter out navigations they don't feel are worth tracking would be more reliable?
Comment by @yoavweiss Sep 6, 2023 (See Github)
Thanks for taking a look.
I added a goals section to the explainer that clarifies some of the constrains around the design.
You state a soft navigation "modifies the DOM" but it's not clear why this is a requirement?
That's a great question. I've ran a bunch of experiments, and this seemed to align well with SPAs today. But it is possible that the heuristic will evolve as part of the Origin Trial, or given this reported issue.
We wonder if simply using the navigation API should be the trigger
The Navigation API doesn't provide any more guarantees than the History API did regarding what is and isn't an actual navigation.
possibly provide the developer a hook to filter out navigations they don't feel are worth tracking would be more reliable
The newly added [goals] section should clarify why that strategy will not work well for the use case.
Discussed
Sep 25, 2023 (See Github)
Dan: Yoav got back to us....
Peter: he updated the explainer to answer some of our questions...
Lea: are the heuristics normative?
Peter: looks like they are still figuring them out....
Lea: we should review independent of the heuristics... ?
Peter: curious about multi-stakeholder.
<blockquote>If the heuristics are still being worked on, is the purpose of this review to review the rest of the API, assuming the heuristics are good? Are the heuristics meant to be normative? Will there be ways for the developers to tweak this in either direction (both opt out of a detected soft navigation as well as be able to declare something as a soft navigation that was not caught by the heuristics). We also wondered about multi-stakeholder interest. https://chromestatus.com/feature/5144837209194496 lists "No signal" for both Firefox and Safari. Have standards positions been requested? If so, including the links to these would be useful (we plan to make this part of our explainer template very soon).
</blockquote> Comment by @LeaVerou Sep 25, 2023 (See Github)
Hi @yoavweiss,
We looked at this again today during a breakout and had some questions. If the heuristics are still being worked on, is the purpose of this review to review the rest of the API, assuming the heuristics are good? Are the heuristics meant to be normative? Will there be ways for the developers to tweak this in either direction (both opt out of a detected soft navigation as well as be able to declare something as a soft navigation that was not caught by the heuristics). We also wondered about multi-stakeholder interest. https://chromestatus.com/feature/5144837209194496 lists "No signal" for both Firefox and Safari. Have standards positions been requested? If so, including the links to these would be useful (we plan to make this part of our explainer template very soon).
Thank you!
Discussed
Oct 9, 2023 (See Github)
Peter: no response to Lea's last comment, 2 weeks ago
Lea: we can wait
Discussed
Oct 23, 2023 (See Github)
Lea: added pending external feedback, that's the status
Peter: anyone else to ping? I can ping Yoav
Comment by @plinss Oct 23, 2023 (See Github)
@yoavweiss any feedback?
Comment by @yoavweiss Nov 9, 2023 (See Github)
Apologies for my delay here, I was implementing some changes related to this feedback to test their feasibility.
If the heuristics are still being worked on, is the purpose of this review to review the rest of the API, assuming the heuristics are good?
The heuristics are in fairly good shape, so I wouldn't expect significant changes on it in terms of implementation. I'm hoping to get the spec to catch up with the implementation in the next few days.
Are the heuristics meant to be normative?
Yeah, that's the intent.
Will there be ways for the developers to tweak this in either direction (both opt out of a detected soft navigation as well as be able to declare something as a soft navigation that was not caught by the heuristics).
Not at the moment. This might be future evolution of the feature, but there aren't current plans for this.
We also wondered about multi-stakeholder interest. https://chromestatus.com/feature/5144837209194496 lists "No signal" for both Firefox and Safari. Have standards positions been requested? If so, including the links to these would be useful (we plan to make this part of our explainer template very soon).
Mozilla position WebKit position
Our biggest question has to do with the question of DOM modifications. You state a soft navigation "modifies the DOM" but it's not clear why this is a requirement?
Thanks for that feedback. The current implementation changes that requirement from "DOM modification" to a contentful paint that's a direct result of user interaction. I'll modify the spec to that effect.
Discussed
Nov 20, 2023 (See Github)
bumped
Discussed
Nov 27, 2023 (See Github)
we read yoav's response
Lea: our issue was the heuristics didn't seem very good and the response was that they're normative and cannot be tweaked... There are webkit and mozilla positions - just filed.
Lea: meta In the explainer template - we should ask for links and whether the response was positive / negative / mixed / no response yet.
on "contentful paint"
Peter: something that causes rendering ....
Lea: spec points to the def of a contentful element... but they're -- not sure how ...
https://www.w3.org/TR/paint-timing/#first-contentful-paint
Peter: something that can render gets rendered due to user interaction... e.g. change a css state and it causes a render...
Lea: I have afeeling this is the right direction... spec describes "first contentful paint" but doesn't define "contentful paint"
Peter: I think it does .. it's if it's paintable and contenful.
Lea: it talks about a document... the document may contain many elements that are paintable and contentful - so what makes a paint contenful.
Yves: when there is a paint occuring then the element is subject to a contentful paint...
Peter: I think this is excluding things like background...
Lea: what if an element is contentful and CSS changes its background...
Peter: don't know how they define a contentful background image...
Lea: It would be good to have answers.
Peter: It's a render that flips some pixels.
Peter: question - a contentful paint that's a direct result of user interaction. How can they tell? What if the aninmation made the change... Comes back to original question about heuristics.
Lea: As a general UI principle you should allow opt out when introducing heuristics. We have precedent of heuristics that could not be overridden and it was pretty bad: e.g. CSS specificity, people ended up entirely not using selectors for querying to avoid specificity.
Lea: adding history elements based on a soft navigation would be a bad user experience... So if it's just for measuring performance then...
Peter: not being exposed anywhere other than performance observers... agree you don't want to based user interaction or behaviour on this.
<blockquote> </blockquote>agree to post
Comment by @LeaVerou Nov 27, 2023 (See Github)
Hi @yoavweiss,
Thank you for clarifying. We took another look today. Switching from DOM manipulation to paint-based heuristics generally seems like the right direction, but we had trouble understanding the specifics from the Paint Timing spec. It seems to provide a definition for what a contentful, paintable element is, what the first contentful paint is, and which CSS images are contentful, but we're not quite sure how a contentful paint is defined and how this heuristic avoids false positives (e.g. hover effects that change a CSS background being counted as soft navigations).
Also, as a general principle, when introducing heuristics, it's generally good to also introduce a way to override the heuristic. If that's too hard, then the data collected by the heuristic should be treated as potentially noisy, i.e. this concept of Soft navigations should not be relied upon for anything that affects the user experience. For analytics, it may be ok; probably better to err on the side of false positives than false negatives, and include enough data that the false positives could be filtered out on the analytics side.
Comment by @yoavweiss Nov 28, 2023 (See Github)
It seems to provide a definition for what a contentful, paintable element is, what the first contentful paint is, and which CSS images are contentful, but we're not quite sure how a contentful paint is defined and how this heuristic avoids false positives (e.g. hover effects that change a CSS background being counted as soft navigations).
In terms of spec, any paint that's considered for LCP is one that soft navigations consider as a contentful paint. This area (PaintTiming+LCP) is currently in the process of being rewritten to make it clearer.
^^ @clelland
In terms of hover effects, they may be considered as a contentful paint, but won't be counted as a soft navigation since:
- "hover" is not considered a user interaction (only "click" and keyboard events would). Reexamining the relevant algorithm, it seems like it's buggy. I'll fix it and add clarifications to the explainer.
- Only paints on elements that were appended into the DOM as a result of the interaction event will be counted as relevant contentful paints for soft navigation purposes.
Also, as a general principle, when introducing heuristics, it's generally good to also introduce a way to override the heuristic.
This seems like a useful principle! There's already https://github.com/WICG/soft-navigations/issues/13 requesting this. I agree that it can be useful, but given the analytics-only nature of the feature, I also agree that it's non-blocking.
Comment by @LeaVerou Nov 28, 2023 (See Github)
Awesome, thanks! When do you think you may be able to make the explainer changes? I currently added it to be looked at again 2 weeks from now (next week is Design Principles week) but if you can get them in before our plenary this week (2am EST on Thursday) we may be able to close then.
Comment by @yoavweiss Nov 28, 2023 (See Github)
I just updated the explainer to emphasize which events count for interactions. Let me know if that works! :)
Comment by @LeaVerou Nov 28, 2023 (See Github)
Thanks! Could pressing a key also be the tab key? If so, how do you distinguish focus styling from soft navigations?
Edit: I guess this prevents that?
- In case of a “click” or a keyboard event, the handler triggered tasks that included
history.pushState()
orhistory.replaceState()
calls, or a change to the document’s location.
But then where does the contentful paint come in?
Comment by @yoavweiss Nov 29, 2023 (See Github)
One missing condition in my previous clarification (now fixed! thanks!!) is that the keypress is unfocused (i.e. its target is the body element). So a tab key that changes focus would not be considered for a soft navigation, but e.g. a tab key that is used to move between different pages would be.
- In case of a “click” or a keyboard event, the handler triggered tasks that included
history.pushState()
orhistory.replaceState()
calls, or a change to the document’s location.But then where does the contentful paint come in?
For a soft navigation to be detected, an eligible event ("click" or unfocused keyboard event) would need to spawn tasks that both change the URL and append DOM nodes that end up with contentful paints.
Comment by @plinss Nov 30, 2023 (See Github)
It still seems problematic that it requires a DOM node to be appended. I've seen (and implemented) soft navigations were the only DOM change was an attribute value (to select an active tab, for example, causing various display
properties to take effect), it's not clear that would be considered 'appending a node'. I can see CustomState or even changing the value of a custom CSS property doing the same with no modifications to the DOM.
Comment by @yoavweiss Dec 1, 2023 (See Github)
@plinss - Indeed CSS-only soft navigations are not handled by the current heuristic. So far after a ~year of experimentation, I've seen a single case in the wild where this is an issue. It seems like something we could solve in a future iteration of the heuristic, but one that would require a bit more research.
Comment by @plinss Dec 1, 2023 (See Github)
What about attribute value changes, are those considered 'appending a DOM node'? (If so, you might want to spell that out a bit better.)
Comment by @yoavweiss Dec 4, 2023 (See Github)
Attribute change is not currently considered. I agree that for some attributes (e.g. an image's src
attribute) it would make sense to include them eventually. I think that also can be part of a future iteration.
Discussed
Dec 11, 2023 (See Github)
Peter: holes in their heuristics. Lea's primary point which I agree with is just relying on heuristics seems fragile. Not being able to override is problematic
Dan: looks like Yoav was agreeing with you .. future iteration..
Peter: makes the point they've experimented for a year and haven't seen a lot of instances of these other ways of navigating being doing. Question what he's looking at. Not seeing CSS only navigations is not surprising because that's a new feature, but it's going to become more popular over time. The bigger issue is not having any author control over the heuristics, or augment or override the heuristics. Not harmful. But just a performance thing... bigger issue if it ever gets folded into something else, a higher level detection of navigation, other concepts of navigation. Would still like Lea's feedback.
Dan: does it make sense to set this to proposed closed and get Lea's feedback async?
Peter: currently satisfied with concerns, not sure if Lea is willing to do that.
Dan: bump it
Discussed
Dec 18, 2023 (See Github)
Yves: not in the abyss... Latest comments 2 weeks ago...
Looks like we can close it. Concept should not be used for anything user-facing, and we don't want this to be used more broadly.
Marked "propose closing"
Comment by @plinss Dec 18, 2023 (See Github)
We understand that the current heuristics are based on most common current practices and it looks like you're prepared to evolve them as newer techniques become more popular. We're still concerned about lack of author control for extending/enhancing the heuristics, but given that this is only for performance measurements, we're going to close this as satisfied.
Our main remaining concern is that others may want to repurpose this signal in the future, and without author controls, this signal won't be reliable enough. Please consider adding a note to the spec to explain this limitation.
Thanks for flying TAG.
OpenedJul 27, 2023
こんにちは TAG-さん!
I'm requesting a TAG review of Soft Navigations.
“Soft navigations” are JS-driven same-document navigations that are using the history API or the new Navigation API, triggered by a user gesture and modifies the DOM, modifying the previous content, as well as the URL displayed to the user.
https://github.com/w3c/performance-timeline/issues/168 outlines the desire to be able to better report performance metrics on soft navigations. Heuristics for detecting soft navigations can measure their SPA’s performance metrics, and optimize them to benefit their users.
Further details:
You should also know that the spec and feature rely on infrastructure for Task Attribution. It's currently defined in the same spec as this feature, but could be considered separately in the future (if more features use it). It also has some overlap with a TC39 proposal called AsyncContext.
Beyond that, the feature's usability relies on Performance Entry's navigationId, which is currently a WIP.
We'd prefer the TAG provide feedback as (please delete all but the desired option):
💬 leave review feedback as a comment in this issue and @-notify yoavweiss