Include link tags for CSS resource download timings (#2518)

* Include link elements in resource download timings

* Add changeset

* Make resource type more extensible

* Return explicit unsupported value rather than null

.changeset/rude-pumpkins-complain.md

@@ -0,0 +1,5 @@
+---
+'@shopify/performance': patch
+---
+
+Performance now emits CSS resource download timing data when initiated by a link tag

packages/performance/src/performance.ts

@@ -10,10 +10,11 @@ import {
   supportsPerformanceObserver,
   referenceTime,
   hasGlobal,
+  getResourceTypeFromEntry,
 } from './utilities';
 import {Event, EventType, LifecycleEvent} from './types';
 
-const WATCH_RESOURCE_TYPES = ['script', 'css'];
+const WATCH_RESOURCE_TYPES = ['script', 'css', 'link'];
 
 interface EventMap {
   navigation: (navigation: Navigation) => void;
@@ -105,12 +106,14 @@ export class Performance {
           return;
         }
 
+        const type = getResourceTypeFromEntry(entry);
+        if (type === 'unsupported') {
+          return;
+        }
+
         this.event(
           {
-            type:
-              entry.initiatorType === 'script'
-                ? EventType.ScriptDownload
-                : EventType.StyleDownload,
+            type,
             start: entry.startTime,
             duration: entry.duration,
             metadata: {

packages/performance/src/tests/utilities.test.ts

@@ -0,0 +1,48 @@
+import {getResourceTypeFromEntry} from '../utilities';
+import {EventType} from '../types';
+
+describe('utilities', () => {
+  describe('getResourceTypeFromEntry()', () => {
+    it('returns "unsupported" for unsupported initiator types', () => {
+      expect(
+        getResourceTypeFromEntry({
+          initiatorType: 'audio',
+        } as PerformanceResourceTiming),
+      ).toBe('unsupported');
+    });
+
+    it('returns stylesheet event type when initiatorType is css', () => {
+      expect(
+        getResourceTypeFromEntry({
+          initiatorType: 'css',
+        } as PerformanceResourceTiming),
+      ).toBe(EventType.StyleDownload);
+    });
+
+    it('returns script event type when initiatorType is script', () => {
+      expect(
+        getResourceTypeFromEntry({
+          initiatorType: 'script',
+        } as PerformanceResourceTiming),
+      ).toBe(EventType.ScriptDownload);
+    });
+
+    it('returns stylesheet event type when initiatorType is link and file extension is .css', () => {
+      expect(
+        getResourceTypeFromEntry({
+          initiatorType: 'link',
+          name: 'file.css',
+        } as PerformanceResourceTiming),
+      ).toBe(EventType.StyleDownload);
+    });
+
+    it('returns script event type when initiatorType is link and file extension is .js', () => {
+      expect(
+        getResourceTypeFromEntry({
+          initiatorType: 'link',
+          name: 'file.js',
+        } as PerformanceResourceTiming),
+      ).toBe(EventType.ScriptDownload);
+    });
+  });
+});

packages/performance/src/utilities.ts

@@ -1,3 +1,5 @@
+import {EventType} from './types';
+
 export function referenceTime() {
   // If no performance, then we always used Date.now(), which is a full
   // (if inaccurate) timestamp
@@ -166,3 +168,37 @@ function squashRanges(ranges: Range[]) {
     };
   }, first);
 }
+
+export function getResourceTypeFromEntry({
+  initiatorType,
+  name,
+}: PerformanceResourceTiming) {
+  if (initiatorType === 'link') {
+    return getResourceTypeFromLinkInitiator(name);
+  } else {
+    return getResourceTypeFromInitiator(initiatorType);
+  }
+}
+
+function getResourceTypeFromInitiator(
+  initiatorType: string,
+): EventType.StyleDownload | EventType.ScriptDownload | 'unsupported' {
+  const eventTypes = {
+    css: EventType.StyleDownload,
+    script: EventType.ScriptDownload,
+  };
+
+  return eventTypes[initiatorType] || 'unsupported';
+}
+
+function getResourceTypeFromLinkInitiator(name: string) {
+  if (name.endsWith('.css')) {
+    return EventType.StyleDownload;
+  }
+
+  if (name.endsWith('.js')) {
+    return EventType.ScriptDownload;
+  }
+
+  return 'unsupported';
+}