perf: item page head link preconnects (#2465)

* perf: item page head link preconnects

to origins of:
* IIIF Presentation manifest
* first displayable web resource

* chore: rm redundant array init

* test: spec preconnect links

* feat: preconnect to origin of media for current page

packages/portal/src/pages/item/_.vue

@@ -182,6 +182,7 @@
         entities: [],
         error: null,
         fromTranslationError: null,
+        headLinkPreconnect: [],
         identifier: `/${this.$route.params.pathMatch}`,
         iiifPresentationManifest: null,
         isShownAt: null,
@@ -204,6 +205,14 @@
       }
     },
 
+    head() {
+      return {
+        link: this.headLinkPreconnect.map((href) => ({ rel: 'preconnect', href })),
+        title: this.headTitle,
+        meta: this.headMeta
+      };
+    },
+
     computed: {
       webResources() {
         return this.media.map((webResource) => new WebResource(webResource, this.identifier));
@@ -394,6 +403,18 @@
           this.media = item.providerAggregation.displayableWebResources;
         }
 
+        const preconnects = [
+          this.iiifPresentationManifest,
+          item.providerAggregation.displayableWebResources?.[(this.$route.query.page || 1) - 1]?.about
+        ].filter(Boolean);
+        for (const preconnect of preconnects) {
+          try {
+            this.headLinkPreconnect.push((new URL(preconnect)).origin);
+          } catch {
+            // URL parsing error
+          }
+        }
+
         this.entities = this.extractEntities(edm);
 
         this.metadata = this.extractMetadata(edm);

packages/portal/tests/unit/pages/item/_.spec.js

@@ -28,7 +28,8 @@ const apiResponse = () => ({
         edmRights: { def: ['http://rightsstatements.org/vocab/InC/1.0/'] },
         webResources: [
           {
-            about: 'http://example.org/image.jpeg'
+            about: 'http://example.org/image.jpeg',
+            ebucoreHasMimeType: 'image/jpeg'
           }
         ]
       }
@@ -450,6 +451,32 @@ describe('pages/item/_.vue', () => {
           });
         });
       });
+
+      describe('preconnect links', () => {
+        it('includes first displayable web resource origin', async() => {
+          const wrapper = factory();
+
+          await wrapper.vm.fetch();
+
+          expect(wrapper.vm.headLinkPreconnect.includes('http://example.org')).toBe(true);
+        });
+
+        it('includes IIIF Presentation manifest origin', async() => {
+          const wrapper = factory();
+          const response = apiResponse();
+          const manifest = 'https://iiif.example.org/presentation/123/abc/manifest';
+          response.object.aggregations[0].webResources[0].dctermsIsReferencedBy = manifest;
+          response.object.aggregations[0].webResources.push({
+            about: manifest,
+            rdfType: 'http://iiif.io/api/presentation/3#Manifest'
+          });
+          wrapper.vm.$apis.record.get.resolves(response);
+
+          await wrapper.vm.fetch();
+
+          expect(wrapper.vm.headLinkPreconnect.includes('https://iiif.example.org')).toBe(true);
+        });
+      });
     });
 
     describe('on errors', () => {
@@ -490,6 +517,15 @@ describe('pages/item/_.vue', () => {
     });
   });
 
+  describe('head', () => {
+    it('includes preconnect links', () => {
+      const origin = 'https://example.org';
+      const wrapper = factory({ data: { headLinkPreconnect: [origin] } });
+
+      expect(wrapper.vm.head().link).toContainEqual({ rel: 'preconnect', href: origin });
+    });
+  });
+
   describe('mounted', () => {
     describe('when fetch is still pending', () => {
       const $fetchState = { pending: true };