feat: Add element timing support #124

rupesh1 · 2020-05-31T01:54:33Z

I would like to add support for the Element Timing API, the use case is similar to the 'Component First Paint' feature currently available but its controlled through markup.

Some more details:

I made a few of changes (patching, docs, single build script (for simple running locally)) outside the direct scope of the feature feel free to edit/revert them.

Zizzamia · 2020-05-31T06:59:36Z

Wow, shocked!!! A lot of good stuff here, thank you so much for this contribution.
The pieces around improving the build, the types, and security we can merge it right away. If you want we can merge it in a separate PR.

The feature you are proposing is perfect for Perfume.js, let me just suggest a few documentation changes I would like to make.

Zizzamia · 2020-05-31T07:03:40Z

README.md

@@ -131,6 +132,9 @@ const perfume = new Perfume({
      case 'tbtFinal':
        myAnalyticsTool.track('totalBlockingTimeFinal', { duration: data });
        break;
+      case 'page-title':


Because this is part of an Element Timing metric, let's try to make it more simple for any newcomer to understand what this metric is for. We could say elPageTitle then in the tracking elementTimingPageTitle. In the end, people will choose the name they prefer in their app, but here in the quickstart, we need to find names that are self-explanatory.

Agreed - made it more obvious and used it consistently in: https://github.com/Zizzamia/perfume.js/pull/124/commits/dd7d7acfbe2cfd8da4dc4c391fe38b22d36b895e

Zizzamia · 2020-05-31T07:05:50Z

README.md

@@ -277,6 +281,22 @@ perfume.endPaint('togglePopover');

 ![Performance](https://github.com/Zizzamia/perfume.js/blob/master/docs/src/assets/performance-cfp.png)

+Or you can try the [emerging](https://chromestatus.com/features#elementtiming) [Element Timing API](https://wicg.github.io/element-timing/) specification by simply adding the `elementtiming` attribute to HTML elements you would like to measure:


We should probably have his own section like

### Element Timing brief description how to use it demo result

Done in https://github.com/Zizzamia/perfume.js/pull/124/commits/dd7d7acfbe2cfd8da4dc4c391fe38b22d36b895e

Zizzamia · 2020-05-31T07:11:30Z

src/paint.ts

+  performanceEntries: IPerformanceEntry[],
+) => {
+  performanceEntries.forEach(performanceEntry => {
+    if (performanceEntry.identifier) {


To keep Perfume.js super tiny I have Terser at max modification, so to make sure this code working as minified as well, we need to add the word identifier into this list https://github.com/Zizzamia/perfume.js/blob/master/rollup.config.ts#L80.

Otherwise, we will get identifier minified to a different single letter. 😅

It's weird I can see the .identifer in the minified output before the change

Based on what you said and the terser doc's I'd expect that to be mangled, no worries I've added it anyway: https://github.com/Zizzamia/perfume.js/pull/124/commits/f10f58642ba63af04e7a34990c3bd4533f68f98b

Good research! For the next release, it just safer have it. But in a future separate PR we should probably trim out all the ones that are not really necessary anymore. Thank you.

Zizzamia · 2020-05-31T07:11:41Z

src/types.ts

@@ -47,6 +47,7 @@ export type IPerformanceObserverType =
  | 'measure'
  | 'navigation'
  | 'paint'
+  | 'element'


Zizzamia · 2020-05-31T07:14:17Z

src/observe.ts

@@ -22,6 +22,7 @@ export const initPerformanceObserver = () => {
    po('resource', initResourceTiming);
  }
  perfObservers[3] = po('layout-shift', initLayoutShift);
+  po('element', initElementTiming);


Have you tested this in Firefox, Safari, and Edge? I guess this code works only on Chrome right?
The reason I ask about other browsers, just in case they crash when used this API. I had bad experiences a few years back with new Performance Observer types.

Good point:

Firefox does warn

legacy Edge doesn't seem to care

Chrome and new Edge work as expected:

I'll test Safari tomorrow

When testing Safari I was getting consistent TypeError even on the live site but it seems that was by design in the V1 spec: w3c/performance-timeline#87

iOS 13.3

iOS 12.4

Safari 13

Safari 12

Live Safari 12

Interesting, I wonder if we should safeguard this for Safari.

The best I could find was https://github.com/GoogleChrome/web-vitals/blob/master/src/lib/observe.ts#L34 which seems quite reasonable

Because this is an experimental API, we should probably introduce a configuration on/off options as we do for Resource Timing.

const perfume = new Perfume({ elementTiming: true, analyticsTracker: ({ metricName, data }) => { myAnalyticsTool.track(metricName, data); }) });

Btw side note, we might want to remove the diff view in https://github.com/Zizzamia/perfume.js#element-timing, and just keep what the final version should look like.

Done in #127

Zizzamia · 2020-05-31T07:15:59Z

docs/src/app/app.component.ts

@@ -148,6 +152,14 @@ export class AppComponent implements AfterViewInit {
      this.isLowEndExperience = result;
      this.ref.detectChanges();
    });
+    heroLogoTiming.subscribe(result => {


Dope, thank you for changing this code as well!

Zizzamia · 2020-06-01T16:25:12Z

Amazing work! I'm going to approve this PR for now, and release the new version in the next two days.

Thank you @rupesh1 for the help, and looking forward to seeing more collaboration in the future.

latel · 2021-08-16T16:45:24Z

not working on ios 14?

rupesh1 added 5 commits May 30, 2020 22:57

build: add npm ci script

c472d61

fix: add missing return type to logMetric function

38d8c7a

chore: security package update

ffb70ae

feat: add Element Timing API support

0922712

fix: elementtiming attribute location

ceb592a

Zizzamia self-requested a review May 31, 2020 06:46

Zizzamia added docs feat refactor labels May 31, 2020

Zizzamia reviewed May 31, 2020

View reviewed changes

src/types.ts

@@ -47,6 +47,7 @@ export type IPerformanceObserverType =

| 'measure'

| 'navigation'

| 'paint'

| 'element'

Copy link

Owner

Zizzamia May 31, 2020

Choose a reason for hiding this comment

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

Niiiice!

Zizzamia reviewed May 31, 2020

View reviewed changes

rupesh1 and others added 5 commits May 31, 2020 12:04

fix: add 'identifier' to minify reserved props

f10f586

docs: add element timing section

dd7d7ac

fix: bad merge

ebfc11a

fix: remove unused vars

d83273e

docs: update package keywords

36a8df7

Zizzamia added this to the v5.1.0 milestone May 31, 2020

Zizzamia merged commit 5e0cd24 into Zizzamia:master Jun 1, 2020

rupesh1 deleted the add-element-timing-support branch June 1, 2020 16:30

rupesh1 mentioned this pull request Jun 1, 2020

feat: Add option to enable element timing #127

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add element timing support #124

feat: Add element timing support #124

rupesh1 commented May 31, 2020

Zizzamia commented May 31, 2020

Zizzamia May 31, 2020

rupesh1 May 31, 2020

Zizzamia May 31, 2020

rupesh1 May 31, 2020

Zizzamia May 31, 2020

rupesh1 May 31, 2020 •

edited

Loading

Zizzamia May 31, 2020

Zizzamia May 31, 2020

Zizzamia May 31, 2020 •

edited

Loading

rupesh1 May 31, 2020

rupesh1 Jun 1, 2020

Zizzamia Jun 1, 2020

rupesh1 Jun 1, 2020

Zizzamia Jun 1, 2020

rupesh1 Jun 1, 2020

Zizzamia May 31, 2020

Zizzamia commented Jun 1, 2020

latel commented Aug 16, 2021

		@@ -277,6 +281,22 @@ perfume.endPaint('togglePopover');

		![Performance](https://github.com/Zizzamia/perfume.js/blob/master/docs/src/assets/performance-cfp.png)

		Or you can try the [emerging](https://chromestatus.com/features#elementtiming) [Element Timing API](https://wicg.github.io/element-timing/) specification by simply adding the `elementtiming` attribute to HTML elements you would like to measure:

feat: Add element timing support #124

feat: Add element timing support #124

Conversation

rupesh1 commented May 31, 2020

Zizzamia commented May 31, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rupesh1 May 31, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Zizzamia May 31, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Zizzamia commented Jun 1, 2020

latel commented Aug 16, 2021

rupesh1 May 31, 2020 •

edited

Loading

Zizzamia May 31, 2020 •

edited

Loading