@shopify/performance - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

package.json

 {
   "name": "@shopify/performance",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "license": "MIT",
   "description": "Primitives for collecting browser performance metrics.",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "sideEffects": false,
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
   "scripts": {
-    "build": "tsc --p tsconfig.build.json",
-    "prepublishOnly": "yarn run build"
+    "build": "tsc --p tsconfig.json"
   },
+  "sideEffects": false,
   "publishConfig": {
@@ -14,0 +13,0 @@ "access": "public",

README.md

@@ -50,3 +50,6 @@ # `@shopify/performance`
 ```ts
-const cleanupNavigationListener = performance.on('navigation', navigation => {});
+const cleanupNavigationListener = performance.on(
+  'navigation',
+  navigation => {},
+);
 
@@ -98,1 +101,67 @@ cleanupNavigationListener();
 `Navigation` also provides a number of utility methods for gathering more actionable information, such as `eventsByType` for filtering events to a particular type, or `totalDownloadSize` for the cumulative size of all requested resources. Please consult the TypeScript definitions for a full listing of these methods.
+
+### Events
+
+The `Performance` and `Navigation` classes both deal with `Event` objects with which contain information about the timing of specific milestones during the course of a user's browser session in milliseconds.
+
+#### Lifecycle Events
+
+##### Time to First Byte (`EventType.TimeToFirstByte`)
+
+The time until the server sends the first part of the response.
+Learn more about [time to First Byte](https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing).
+
+##### First Paint (`EventType.TimeToFirstPaint`)
+
+The time until the browser renders anything that differs from the previous page.
+Learn more about [first paint](https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#first_paint_and_first_contentful_paint).
+
+##### First Contentful Paint (`EventType.TimeToFirstContentfulPaint`)
+
+The time until the browser renders the first bit of content from the DOM.
+Learn more about this [first Contentful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint).
+
+##### DOM Content Loaded (`EventType.DomContentLoaded`)
+
+The time until the DOM has been entirely loaded and parsed.
+Learn more about [DOM Content Loaded](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded).
+
+##### First Input Delay (`EventType.FirstInputDelay`)
+
+The time from when a user first interacts with your site to the time when the browser is able to respond to that interaction.
+Learn more about [first Input Delay](https://developers.google.com/web/updates/2018/05/first-input-delay).
+
+##### Load Event (`EventType.Load`)
+
+The time until the DOM and all its styles and synchronous scripts have loaded.
+Learn more about [load Event](https://developer.mozilla.org/en-US/docs/Web/Events/load).
+
+#### Navigation Events
+
+##### Long Task (`EventType.LongTask`)
+
+Any task that take 50 milliseconds or more.
+Learn more about [long task](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming).
+
+##### Script Download Event (`EventType.ScriptDownload`)
+
+The time spent downloading a script resource.
+
+This event will also log the name and size of the resource as `metadata`.
+
+##### Style Download Event (`EventType.StyleDownload`)
+
+The time spent downloading a style resource.
+
+This event will also log the name and size of the resource as `metadata`.
+
+##### GraphQL Event (`EventType.GraphQL`)
+
+The time spent resolving GraphQL queries during the navigation.
+
+This metric needs to be manually set up in Apollo Client.
+The setup can be done as a [ApolloLink](https://www.apollographql.com/docs/link/).
+
+##### Usable Event (`EventType.Usable`)
+
+The time between navigation start and the first time a [`@shopify/react-performance`](../../react-performance)'s `<PerformanceMark stage="usable" />` component is rendered.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

350882

increased by694.28%

Number of package files

22

increased by46.67%

Lines of code

905

increased by0.22%

Number of lines in readme file

166

increased by71.13%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes