Skip to content

Add performance metrics for client-side media processing #76789

@adamsilverstein

Description

@adamsilverstein

Summary

There are currently no performance benchmarks for client-side media image processing in Gutenberg's performance test suite. As discussed in #76752 (comment), having tracked metrics would help catch regressions and validate optimizations — particularly for expensive formats like AVIF.

Proposal

Add a new performance test that measures the time to decode and encode (generate) all sub-size images for each supported format:

  • JPEG
  • WebP
  • AVIF

The test should exclude upload time and only measure the client-side image processing pipeline: decode → resize to all registered sub-sizes → encode.

Implementation details

  • Add a new performance test spec (e.g., test/performance/specs/media-processing.spec.js) following the pattern established in existing specs like post-editor.spec.js.
  • Load a test image for each format and run the sub-size generation pipeline using @wordpress/vips / @wordpress/upload-media.
  • Record processing duration per format as new metrics.
  • Add the new metrics to the performance reporter (test/performance/config/performance-reporter.ts) and the codevitals logging script (bin/log-performance-results.js) so results are tracked on https://codevitals.run/public/WordPress/gutenberg/metrics.

Key files

  • test/performance/config/performance-reporter.ts — metric type definitions and reporter
  • test/performance/specs/post-editor.spec.js — example performance test pattern
  • bin/log-performance-results.js — codevitals.run integration
  • packages/vips/src/index.ts — image processing (resizeImage, batchResizeImage)
  • packages/upload-media/src/store/private-actions.ts — sub-size generation orchestration

Metadata

Metadata

Type

No fields configured for Task.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions