Performant images

[siakaramalegos]

If not covered in the Media Chapter:

• [ ] Usage of srcset and sizes attributes and tag (median % of pages)
• [ ] Usage of various image formats (jpg, png, gif, webp, avif, jpeg-xl, etc.)
• [ ] Maybe also query for Cloudinary/Imgix/CDN URLs with auto-format flags?
• [ ] Usage of width and height attributes for layout stability (median % of pages and % of images on those pages?) also aspect-ratio
• [ ] What is the median percent of images on a page that have explicit styles to reserve space? (requires a custom metric to query the DOM at test time)
• [ ] How above characteristics are associated with CWV
• [ ] If the LCP is an image for a given page, when was it requested? We can measure this by its request number or request timestamp. For example was it the first request after the HTML was received by the client or were there 15 CSS and JS files in the critical path? Did it take 3 seconds before the image was requested? Across the entire dataset, what is the median critical path length for the LCP image? What is the median wait time before the LCP image was requested?
• [ ] What is the distribution of LH image optimization audit scores? What is the distribution of potential savings (bytes and seconds)? Also see #6

See #1 for lazy-loading metrics.

Update: Media Chapter will likely cover more of the adoption-type metrics, and we'll cover how they relate to performance metrics.

[ziemek-bucko]

This is great and particularly for image dimensions, easy to look up the median and mean CLS for sites with and without dimensions in place.

[rviscomi]

Lots of metric ideas in this post: https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/

[siakaramalegos]

@rviscomi which ones specifically? I've read the article and part of the book, but I might not be recognizing the things that are measurable.

[rviscomi]

Taking the intro tips for example:

• For a fast Largest Contentful Paint:
  • Request your key hero image early.
  • Use srcset + efficient modern image formats.
  • Avoid wasting pixels (compress, don’t serve overly high DPR images).
  • Lazy-load offscreen images (reduce network contention for key resources).
• For a low Cumulative Layout Shift:
  • Set dimensions (width, height) on your images.
  • Use CSS aspect-ratio or aspect ratio boxes to reserve space otherwise.
• For low impact to First Input Delay:
  • Avoid images causing network contention with other critical resources like CSS and JS. While not render-blocking, they can indirectly impact render performance.

We can map that to:

• If the LCP is an image for a given page, when was it requested? We can measure this by its request number or request timestamp. For example was it the first request after the HTML was received by the client or were there 15 CSS and JS files in the critical path? Did it take 3 seconds before the image was requested? Across the entire dataset, what is the median critical path length for the LCP image? What is the median wait time before the LCP image was requested?
• What percent of pages use srcset? What percent of pages use a modern format? What is the median percent of images on a page that use both/either technique?
• What is the distribution of LH image optimization audit scores? What is the distribution of potential savings (bytes and seconds)?
• What percent of pages use lazy loading on images? What is the median percent of images on a page that are lazy loaded?
• What is the median percent of images on a page that have explicit height/width attributes? (requires a custom metric)
• What is the median percent of images on a page that have explicit styles to reserve space? (requires a custom metric to query the DOM at test time)

[siakaramalegos]

@rviscomi sorry, to clarify, I meant which ones did you want to add that aren't already in the first issue comment in this issue or another one. It's getting to be a bit onerous to sift through all of the suggestions to pull out what is not already covered and only add that rather than having duplicates.

[rviscomi]

I think you have most things covered, I was sharing that post in case it inspired any other metric ideas from anyone else.

[samarpanda]

"Usage of width and height attributes for layout stability (median % of pages and % of images on those pages?)" What if the image proportion is handled by aspect-ratio. This also contributes to image stability.

Wondering if there is a way to measure this 🤔

[siakaramalegos]

@samarpanda added. will discuss with the image chapter author when we meet later this week too.

[samarpanda]

If the LCP is an image for a given page, when was it requested? We can measure this by its request number or request timestamp. For example was it the first request after the HTML was received by the client or were there 15 CSS and JS files in the critical path? Did it take 3 seconds before the image was requested? Across the entire dataset, what is the median critical path length for the LCP image? What is the median wait time before the LCP image was requested?

Curious to know if any preload hinting was defined to prioritize the loading of LCP content if that was an image. Preload hint was defined via http header / html markup.

[siakaramalegos]

@rviscomi when you said "What is the median percent of images on a page that have explicit height/width attributes?" did you mean something beyond width and height set on the <img> or aspect-ratio set in the CSS?

[rviscomi]

Attributes in this case referred specifically to the HTML attributes. The next metric "explicit styles to reserve space" is more concerned with CSS height/width/aspect-ratio. The metrics could be redefined however would be best for you.