Skip to content

Media weight rework using performance api #13

Open
adamsilverstein wants to merge 18 commits intomainfrom
media-weight-performance-api-continued
Open

Media weight rework using performance api #13
adamsilverstein wants to merge 18 commits intomainfrom
media-weight-performance-api-continued

Conversation

@adamsilverstein
Copy link
Collaborator

@adamsilverstein adamsilverstein commented Dec 19, 2025

Description

Updated implementation of media-weight collection, based on the work @roborourke started, using performance.getEntriesByType- part of the Performance API which reports on the weight (size) of assets. Sizes are typically only reported for same domain assets, which meets our requirements neatly.

This PR supersedes #12

Overall approach

  • An iframe containing a preview of the post is injected offscreen. The preview is customized in part to capture metrics using performance.getEntriesByType and send them out to the iframe parent - the editor.
  • A toggle allows measuring asset Mobile or Desktop media sizes
  • A total amount is calculated, with breakdowns for images and video
  • Duplicates are discarded
  • Only same origin assets are counted
  • Video autoplay is disabled, only the poster image bandwidth is reported

Screencast

screencast.2025-12-19.11-10-29.mp4

Testing instructions

  • Create a post
  • Open the media weight sidebar
  • Upload several images and videos
  • Check mobile or desktop weights at various points
  • Verify the total changes with each saved change
  • Try changing image sizes and noting changes
  • Verify Desktop is heavier than mobile
  • Verify notices show as you approach the 2.5 threshold

ajvillegas and others added 9 commits May 23, 2025 19:02
…ring

Collect resources after page is fully loaded

match by name as well as initiatorType

use a more typical screen size

Ensure iframe is “displayed” so videos load

Ensure lazy loaded elements can load during preview data collection

Track preview loading, showing a spinner

Scroll page to load any lazy loaded images or videos

fall back to large vs full size

Improve layout and display of data

Remove original calculations section

limit to media contained in the class="article-main-section" div

Introduce the ability to choose a mobile or desktop weight, defaulting to mobile

Improve timing for iframe closure

Limit to media contained in page content, excluding avatar images

Ensure switching mobile/desktop reloads iframe

Remove block based calculation display

Improve UI, layout; replace spinner with shimmer load state

disable lazy loading in the preview

Cleanup: remove unused PHP code for server side calculations

Move shimmer style to PHP

Cleanup code, remove unused parts, restructure

Remove autoplay from video blocks in the media weight preview

include videos and images in data

filter to unique entries, keeping highest weight

Exclude remote resources in case they are included

show 4 decimal points for detail section
@adamsilverstein adamsilverstein force-pushed the media-weight-performance-api-continued branch from 3f40c09 to d0bb15b Compare December 19, 2025 19:16
build/

# vendor files
vendor/ No newline at end of file
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I noticed this was missing, should we ignore vendor?

@adamsilverstein adamsilverstein changed the title [WIP] Media weight rework using performance api Media weight rework using performance api Dec 19, 2025
@adamsilverstein adamsilverstein marked this pull request as ready for review December 19, 2025 20:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants