Collect and measure impact of image sizes improvements

[joemcgill]

Purpose

As part of #760, we should define some initial baseline metrics against which we can evaluate the impact of the project and decide how to report them over time.

To start, we have created an initial query of HTTPArchive data that shows the distribution of the sizes error and the the effect on wasted pixels per image caused by selecting the wrong source.

Additional tasks

• Create a Colab to collect metrics for image sizes improvements.
• Modify the original HTTPArchive query, to limit it to only images that are the LCP image.
• Correlate percentage of sites with LCP passing rates with sites with an LCP image with an incorrect sizes attribute resulting in wasted pixels.

[joemcgill]

@felixarntz and @adamsilverstein, now that we've landed auto-sizes for 6.7 (trunk) and have already shipped some initial improvements for enhanced sizes calculation in the Enhanced Responsive Images plugin, let's pick this back up and work on a Collab for monitoring the impact of this work.

Earlier, I started breaking down some "additional tasks", but would love to start by working with you two to better define the objectives for this work. Ideally, I'd like to track both the adoption and effect of auto-sizes, as well as being able to track the adoption and effect of the sizes calculation improvements—both in terms of wasted bytes saved and any potential effect these features have on CWV passing rates.

I don't anticipate auto-sizes to have a big effect on CWV, since it only applies to lazy-loaded images, but would be interesting to confirm that hypothesis. For better sizes calculation, it would be good to see the impact broken into sites using block templates, blocks for content only, and possibly pages not using blocks at all.

Curious what you would add or change from this list, or any other ideas that come to mind.

[adamsilverstein]

One other idea for a metric to look at would be the Lighthouse "Properly Sized Image" audit which we should have available in httparchive (and I don't think is what the current query looks at). Ideally we should see this audit frequency reduced for sites that have better sizes.

[adamsilverstein]

Create a Colab to collect metrics for image sizes improvements.

I have an existing colab started we can expand on. I moved to a gist to make it more accessible: https://gist.github.com/adamsilverstein/6d5111ca510d493559f2289a8fcab428