Audits: Detect byte and time savings from bundled resources

[patrickhulce]

Across the byte efficiency audits time saved from data URI resources, stylesheets added from script is not accurately reflected. Ideally we'd be able to attribute these resources to the actual network record they come in on (the JavaScript or HTML file that included them), but at a minimum we can estimate the network throughput and time saved on average.

• Attribute inline CSS stylesheets to the appropriate HTML or JS file - Attribute inline CSS stylesheets to the appropriate HTML or JS file #1544
• Provide a byte estimate for inline stylesheets feat: byte efficiency estimates based on average throughput #1536
• Provide a time estimate for inline stylesheets feat: byte efficiency estimates based on average throughput #1536
• Attribute data URI images to the appropriate HTML/JS/CSS file no longer needed
• Provide a time estimate for data URI images feat: byte efficiency estimates based on average throughput #1536

[ebidel]

I've been thinking it would be really nice to work towards very visual infographic-type callouts in the report. High level aggregations, but also breakdowns as you drill into each of these audits. Something like:
https://pageweight.imgix.com/jobs/99166054-29d7-413a-a0c4-1d7c8e30a8e2.html?utm_source=share-link

I'm visual. Users are visual. The world loves visuals!

[brendankenny]

see also May 2016 UX mocks. There are various Irish/Lewis mocks spread out in issues as well (cc @paulirish)

(no pie charts, tho :P)

[patrickhulce]

#1500 is related to first bullet on attribution of inline stylesheets

update: #1544 is tracking proper inline style attribution.

[patrickhulce]

Marking this as closed since the last remaining enhancement is now orthogonal to the original intent of the issue and is tracked separately in #1544.