The Paint Timing API is now supported by Safari

[tomayac]

That is, the stable Safari that ships with iOS 14.5 or macOS 11.4.

[tunetheweb]

BTW it seems a little flakey.

I've a demo page here: https://www.tunetheweb.com/experiments/web-vitals/

And here's the results from Safari 14.1 desktop after several reloads:

As you can see continually reloading the page sometimes leads to FCP being logged, but often doesn't.

Any ideas why?

Seems to be logged a bit more often in Safari Technology Preview (14.2) but still does miss it quite often.

Reloading the page in Chrome, it looks to be consistently logged.

Not sure if this should be raised as a separate issue, or whether it's a Safari issue, or an issue with the Web-Vitals library but thought I'd ask the question here first in case it influences the decision to merge this change or not.

[tomayac]

The above comment FYI @noamr, the implementer.

[noamr]

Not sure what call gives you this console message.... Calling this: performance.getEntriesByType('paint') worked for me after every reload, couldn't reproduce a scenario when it didn't

[tunetheweb]

It's this library that produces those logs. Agree it does appear to be there consistently (I added a script to the demo page to log the results of performance.getEntriesByType('paint') on load and it's consistently there).

@philipwalton / @tomayac want me to raise a separate issue for this to move the discussion out of this PR?

[tomayac]

It's this library that produces those logs. Agree it does appear to be there consistently (I added a script to the demo page to log the results of performance.getEntriesByType('paint') on load and it's consistently there).

@philipwalton / @tomayac want me to raise a separate issue for this to move the discussion out of this PR?

I'm yielding to Phil. Just bearer of the news here, not a subject matter expert…

[philipwalton]

@noamr Can you clarify whether the Safari implementation supports use with PerformanceObserver and the buffered flag? Just looking at @bazzadp's demo, I'm assuming that's why it's not being logged.

[philipwalton]

I don't have Safari 14.5 yet, but based on running the following in STP, it looks like the buffered flag is not supported:

new PerformanceObserver(console.log).observe({type: 'paint', buffered: true});

[noamr]

@noamr Can you clarify whether the Safari implementation supports use with PerformanceObserver and the buffered flag? Just looking at @bazzadp's demo, I'm assuming that's why it's not being logged.

AFAIK The buffered flag is not supported at all in WebKit (for any performance entry). PerformanceObserver should work (without buffered). See https://github.com/web-platform-tests/wpt/tree/master/paint-timing/fcp-only for usage of FCP in a compatible way.

[philipwalton]

@noamr the buffered flag is supported for resource entry types (at least in STP). I can verify by running the following code in the console:

new PerformanceObserver((l)=>console.log(l.getEntries())).observe({type:'resource', buffered: true});

Looks like it buffered support may have been implemented after paint timing was implemented though. @npm1 did you end up filing a bug for this that we can link to? If not, I can.

[noamr]

@noamr the buffered flag is supported for resource entry types (at least in STP). I can verify by running the following code in the console:

new PerformanceObserver((l)=>console.log(l.getEntries())).observe({type:'resource', buffered: true});

Looks like it buffered support may have been implemented after paint timing was implemented though. @npm1 did you end up filing a bug for this that we can link to? If not, I can.

Ah yes, Igalia did this after paint timing went in. Good to know!

[npm1]

I haven't filed a bug on WebKit, but does seem like it was an omission. I can create a buffered flag test on fcp-only folder if that helps...

[noamr]

I haven't filed a bug on WebKit, but does seem like it was an omission. I can create a buffered flag test on fcp-only folder if that helps...

That and a bug in webkit would probably help...

[npm1]

Filed https://bugs.webkit.org/show_bug.cgi?id=225305

[philipwalton]

#145 should address the lack of buffered support until https://bugs.webkit.org/show_bug.cgi?id=225305 is addressed. Once a version with that PR is released, I'll merge this PR.

[noamr]

Patch for the buffered thingy: https://bugs.webkit.org/show_bug.cgi?id=225305
I totally missed this, it's quite an easy fix.