@shopify/performance - npm Package Compare versions

Comparing version 3.1.1 to 3.2.0

build/cjs/performance.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var webVitals = require('web-vitals');
 var inflight = require('./inflight.js');
@@ -143,2 +144,10 @@ var utilities = require('./utilities.js');
     }
+
+    webVitals.onLCP(metric => {
+      this.lifecycleEvent({
+        type: types.EventType.TimeToLargestContentfulPaint,
+        start: metric.value,
+        duration: 0
+      });
+    });
   }
@@ -145,0 +154,0 @@

build/cjs/types.js

@@ -11,2 +11,3 @@ 'use strict';
   EventType["TimeToFirstContentfulPaint"] = "ttfcp";
+  EventType["TimeToLargestContentfulPaint"] = "ttlcp";
   EventType["DomContentLoaded"] = "dcl";
@@ -13,0 +14,0 @@ EventType["FirstInputDelay"] = "fid";

build/ts/types.d.ts

@@ -5,2 +5,3 @@ export declare enum EventType {
     TimeToFirstContentfulPaint = "ttfcp",
+    TimeToLargestContentfulPaint = "ttlcp",
     DomContentLoaded = "dcl",
@@ -37,2 +38,6 @@ FirstInputDelay = "fid",
 }
+export interface TimeToLargestContentfulPaintEvent extends BasicEvent {
+    type: EventType.TimeToLargestContentfulPaint;
+    metadata?: undefined;
+}
 export interface DomContentLoadedEvent extends BasicEvent {
@@ -82,3 +87,3 @@ type: EventType.DomContentLoaded;
 }
-export declare type LifecycleEvent = TimeToFirstByteEvent | TimeToFirstPaintEvent | TimeToFirstContentfulPaintEvent | DomContentLoadedEvent | FirstInputDelayEvent | LoadEvent;
+export declare type LifecycleEvent = TimeToFirstByteEvent | TimeToFirstPaintEvent | TimeToFirstContentfulPaintEvent | TimeToLargestContentfulPaintEvent | DomContentLoadedEvent | FirstInputDelayEvent | LoadEvent;
 export declare type Event = LifecycleEvent | LongTaskEvent | ScriptDownloadEvent | StyleDownloadEvent | GraphQLEvent | UsableEvent | CustomEvent;
@@ -89,2 +94,3 @@ export interface EventMap {
     [EventType.TimeToFirstContentfulPaint]: TimeToFirstContentfulPaintEvent;
+    [EventType.TimeToLargestContentfulPaint]: TimeToLargestContentfulPaintEvent;
     [EventType.DomContentLoaded]: DomContentLoadedEvent;
@@ -91,0 +97,0 @@ [EventType.FirstInputDelay]: FirstInputDelayEvent;

package.json

 {
   "name": "@shopify/performance",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "license": "MIT",
@@ -43,3 +43,6 @@ "description": "Primitives for collecting browser performance metrics",
     }
+  },
+  "dependencies": {
+    "web-vitals": "^3.0.4"
   }
 }

README.md

@@ -12,3 +12,3 @@ # `@shopify/performance`
 ```bash
-$ yarn add @shopify/performance
+yarn add @shopify/performance
 ```
@@ -15,0 +15,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84086

increased by1.64%

Lines of code

1396

increased by1.75%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedweb-vitals@^3.0.4

• + Addedweb-vitals@3.5.2(transitive)