Comparing performance profiles or ways to measure perf diff of specific changes(CSS)?

[polarathene]

I've used WebPageTest on two versions of a website, the difference being the use of the blur filter in CSS on a web page full of images to apply it to.

It's not clear how to identify where these specific changes are occurring in all the profile data(presumably paint events and perhaps GPU). Maybe with several runs for each I'd have some way to compare the averaged profile data to try identify those areas?(I don't think there's a way to query the actual CSS/filter being applied?)

I'm trying to get a PR approved for a project where they raise concerns about blur filters history from over half a decade a go where many articles cited big hits to CPU and battery life on mobile devices.I don't think that is the case anymore, but I'm not able to identify where the relevant profile data is to point them to.

Are there any tools in Chrome for this? I know there used to be some dev tool support that old articles wrote about, but it's since been removed.

[paulirish]

@polarathene the cost will be in the Green areas of the profile.. "Paint" "Rasterize Paint" and "Composite Layers"

You can use the split view of https://chromedevtools.github.io/timeline-viewer/ to more or less compare things. You probably just want to zoom in on the place where the blur is applied.

You don't care about the rest of the profile, so this is just the most straightforward.