Skip to content

Conversation

@warrengm
Copy link
Contributor

@warrengm warrengm commented Aug 4, 2020

Summary
Adds per-script breakdowns to the Third Party Impact audit.

Sample screenshots showing the general case:

Screen Shot 2020-08-04 at 3 40 18 PM

Other screenshots showing some edgier cases:

First, a third party with one resource:

Screen Shot 2020-08-04 at 3 46 54 PM

Second, a third party with two resources:

Screen Shot 2020-08-04 at 3 40 48 PM

Lastly, a third party with one main resource:

Screen Shot 2020-08-04 at 3 40 32 PM

Open question: should we ever not show breakdowns? E.g. if the impact is less than 5kb and 0ms main thread time then it may not be worth doing so. It would be nice if tables were collapse too.

Related Issues/PRs
Issue #11165

@warrengm warrengm requested a review from a team as a code owner August 4, 2020 20:02
@warrengm warrengm requested review from connorjclark and removed request for a team August 4, 2020 20:02
@warrengm warrengm changed the title Add resource breakdown for third party impact audit report(Third party impact): Add per-resource breakdowns Aug 4, 2020
@warrengm warrengm changed the title report(Third party impact): Add per-resource breakdowns report: Add per-resource breakdowns to the Third Party impact audit Aug 4, 2020
@vercel vercel bot temporarily deployed to Preview August 4, 2020 20:06 Inactive
@vercel vercel bot temporarily deployed to Preview August 4, 2020 20:06 Inactive
@warrengm
Copy link
Contributor Author

warrengm commented Aug 4, 2020

@patrickhulce FYI since I don't think I have permissions to add you to the PR

Copy link
Collaborator

@patrickhulce patrickhulce left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks @warrengm for keeping me posted I think this looks great! :)

posted my thoughts on when to hide the subitems too 👍


const runningSummary = {transferSize: 0, blockingTime: 0};
const minTransfer = Math.max(2000, stats.transferSize / 20);
const maxSubItems = Math.min(5, items.length);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At first I was against the min transfer idea but the thought of filling the table with 5 tracking pixels for every ad network convinced me :) I agree we may not always want to show the subitem breakdown. I'd say we skip when no resources meeting the min thresholds (i.e. don't force always showing 1 resource + "Other").

extract all these constants to a file up top with explanations? I'd say we could up the threshold to 4 KiB 4096 too

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will make the change. The pixels are definitely what prompted the change. Are you saying to omit the Other row entirely or keep it for large enough resources? I have mixed feelings either way--I don't think there is a perfect way to display all the information with static tables.

As an aside, it might be good to highlight the number of third party pixels somewhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also considered omitting the breakdown if there is exactly one large resource, but it might be worth keeping since the third party to script mapping might not be obvious to users.

Copy link
Collaborator

@patrickhulce patrickhulce Aug 5, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I like keeping it for the one large resource case, especially if there's blocking time to identify which specific script is the problem.

Agreed there's no obvious answer here, but I'd err on the side of not showing pixels since the main point of this is supposed to be impact to TBT and if they're just small network requests we don't really want to dedicate screen space to them.

Copy link
Collaborator

@connorjclark connorjclark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

quick comments

Copy link
Collaborator

@patrickhulce patrickhulce left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM thanks @warrengm! 🎉

@connorjclark connorjclark changed the title report: add per-resource breakdowns to the Third Party impact audit report(third-party-summary): add per-resource breakdowns Aug 20, 2020
@connorjclark connorjclark changed the title report(third-party-summary): add per-resource breakdowns report(third-party-summary): group resources by product Aug 20, 2020
@connorjclark connorjclark changed the title report(third-party-summary): group resources by product report(third-party-summary): group resources by entity Aug 20, 2020
@connorjclark connorjclark changed the title report(third-party-summary): group resources by entity report(third-party-summary): show resources for entity Aug 20, 2020
@devtools-bot devtools-bot merged commit edecc71 into GoogleChrome:master Aug 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants