add custom api for adding ttfmp from fragments

[vigneshshanmugam]

Why?

• The previous API for adding performance entries to the page is pretty neat and already helps fragments to add custom timing information at every point of the render phase. But it lacks the uniformity and it will be pretty hard to use it for monitoring or any other purpose since the naming is quite different on every page.

• Meaningful paint is different for each page and its hard to measure from tailor since tailor has no context of elements being rendered from fragments. Its best to keep the logic in fragments.

Solution

The current API is just a proxy to the old Pipe.addPerfEntry

Pipe.addTTFMPEntry(2000);

Pipe.getEntries()
// [{
    duration: 2000
    ​​entryType: "tailor"
    name: "ttfmp"
    startTime: <value based on current time>
}]

• This API will be used only when primary fragments decide that the page is meaningful and the import part of the page is painted. It can be a Hero element that decides the meaningful paint of the page

• Calling the API multiple times results in duplicate entries added to the Performance Entry. This is to keep in sync with PerformanceEntry Object

Future

• We could use Hero Element Timing API to mark the important elements that determine the meaningful paint of the page.

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (master@effbe16). Click here to learn what that means.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             master   #214   +/-   ##
=======================================
  Coverage          ?    99%           
=======================================
  Files             ?     15           
  Lines             ?    603           
  Branches          ?    112           
=======================================
  Hits              ?    597           
  Misses            ?      6           
  Partials          ?      0

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update effbe16...368dbdc. Read the comment docs.

[vigneshshanmugam]

just keeping it as ttfmp to avoid the name collision in future once first-meaningful-paint is added to Paint Timing

[ruiaraujo]

👍

[vigneshshanmugam]

👍

[grassator]

I think addPerfEntry.bind(null, 'ttfmp') is shorter than the current implementation

[vigneshshanmugam]

Bind is slow in older versions of v8 (older browsers might suffer from this). Thats why i went for explicit function. But, its just one time call so shouldn't matter much.