core(uses-rel-preconnect): warn on 3+ preconnects

lighthouse-core/audits/uses-rel-preconnect.js

@@ -35,6 +35,11 @@ const UIStrings = {
    * */
   crossoriginWarning: 'A preconnect <link> was found for "{securityOrigin}" but was not used ' +
     'by the browser. Check that you are using the `crossorigin` attribute properly.',
+  /**
+   * @description A warning message that is shown when found more than 8 preconnected links
+   * */
+  tooManyPreconnectLinksWarning: 'More than 8 preconnect links were found. ' +
+   'Preconnect links should be used sparingly and only to the most important origins.',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -135,6 +140,12 @@ class UsesRelPreconnectAudit extends Audit {
     const preconnectLinks = artifacts.LinkElements.filter(el => el.rel === 'preconnect');
     const preconnectOrigins = new Set(preconnectLinks.map(link => URL.getOrigin(link.href || '')));
 
+    if (preconnectLinks.length >= 6) {
+      return {
+        score: 1, warnings: preconnectLinks.length > 8
+          ? [str_(UIStrings.tooManyPreconnectLinksWarning)] : []};
+    }
+
     /** @type {Array<{url: string, wastedMs: number}>}*/
     let results = [];
     origins.forEach(records => {

lighthouse-core/lib/i18n/locales/en-US.json

@@ -1169,6 +1169,9 @@
   "lighthouse-core/audits/uses-rel-preconnect.js | title": {
     "message": "Preconnect to required origins"
   },
+  "lighthouse-core/audits/uses-rel-preconnect.js | tooManyPreconnectLinksWarning": {
+    "message": "More than 8 preconnect links were found. Preconnect links should be used sparingly and only to the most important origins."
+  },
   "lighthouse-core/audits/uses-rel-preload.js | crossoriginWarning": {
     "message": "A preload <link> was found for \"{preloadURL}\" but was not used by the browser. Check that you are using the `crossorigin` attribute properly."
   },

lighthouse-core/lib/i18n/locales/en-XL.json

@@ -1169,6 +1169,9 @@
   "lighthouse-core/audits/uses-rel-preconnect.js | title": {
     "message": "P̂ŕêćôńn̂éĉt́ t̂ó r̂éq̂úîŕêd́ ôŕîǵîńŝ"
   },
+  "lighthouse-core/audits/uses-rel-preconnect.js | tooManyPreconnectLinksWarning": {
+    "message": "M̂ór̂é t̂h́âń 8 p̂ŕêćôńn̂éĉt́ l̂ín̂ḱŝ ẃêŕê f́ôún̂d́. P̂ŕêćôńn̂éĉt́ l̂ín̂ḱŝ śĥóûĺd̂ b́ê úŝéd̂ śp̂ár̂ín̂ǵl̂ý âńd̂ ón̂ĺŷ t́ô t́ĥé m̂óŝt́ îḿp̂ór̂t́âńt̂ ór̂íĝín̂ś."
+  },
   "lighthouse-core/audits/uses-rel-preload.js | crossoriginWarning": {
     "message": "Â ṕr̂él̂óâd́ <l̂ín̂ḱ> ŵáŝ f́ôún̂d́ f̂ór̂ \"{preloadURL}\" b́ût́ ŵáŝ ńôt́ ûśêd́ b̂ý t̂h́ê b́r̂óŵśêŕ. Ĉh́êćk̂ t́ĥát̂ ýôú âŕê úŝín̂ǵ t̂h́ê `crossorigin` át̂t́r̂íb̂út̂é p̂ŕôṕêŕl̂ý."
   },

lighthouse-core/test/audits/uses-rel-preconnect-test.js

@@ -250,4 +250,76 @@ describe('Performance: uses-rel-preconnect audit', () => {
       {url: 'http://cdn.example.com', wastedMs: 150},
     ]);
   });
+
+  it(`should return code 1 if preconnect links equal length 6`, async () => {
+    const networkRecords = [
+      mainResource,
+      {
+        url: 'http://cdn.example.com/first',
+        initiator: {},
+        startTime: 2,
+        timing: {
+          dnsStart: 100,
+          connectStart: 250,
+          connectEnd: 300,
+          receiveHeadersEnd: 2.3,
+        },
+      },
+    ];
+    const artifacts = {
+      LinkElements: [
+        {rel: 'preconnect', href: 'https://cdn1.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn2.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn3.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn4.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn5.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn6.example.com/'},
+      ],
+      devtoolsLogs: {[UsesRelPreconnect.DEFAULT_PASS]: networkRecordsToDevtoolsLog(networkRecords)},
+      URL: {finalUrl: mainResource.url},
+    };
+
+    const context = {settings: {}, computedCache: new Map()};
+    const result = await UsesRelPreconnect.audit(artifacts, context);
+    assert.equal(result.score, 1);
+    assert.equal(result.warnings.length, 0);
+  });
+
+  it('should return code 1 with warning if links length is equal or more than 8', async () => {
+    const networkRecords = [
+      mainResource,
+      {
+        url: 'http://cdn.example.com/first',
+        initiator: {},
+        startTime: 2,
+        timing: {
+          dnsStart: 100,
+          connectStart: 250,
+          connectEnd: 300,
+          receiveHeadersEnd: 2.3,
+        },
+      },
+    ];
+    const artifacts = {
+      LinkElements: [
+        {rel: 'preconnect', href: 'https://cdn1.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn2.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn3.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn4.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn5.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn6.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn7.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn8.example.com/'},
+        {rel: 'preconnect', href: 'https://cdn9.example.com/'},
+      ],
+      devtoolsLogs: {[UsesRelPreconnect.DEFAULT_PASS]: networkRecordsToDevtoolsLog(networkRecords)},
+      URL: {finalUrl: mainResource.url},
+    };
+
+    const context = {settings: {}, computedCache: new Map()};
+    const result = await UsesRelPreconnect.audit(artifacts, context);
+    assert.equal(result.score, 1);
+    assert.deepStrictEqual(result.warnings,
+      ['lighthouse-core/audits/uses-rel-preconnect.js | tooManyPreconnectLinksWarning # 0']);
+  });
 });