Split preconnect and dns-prefetch into two separate links (#1065)

* Split preconnect and dns-prefetch into two separate links * Ensure dns-prefetch is inserted after preconnect * Adapt expected output for spec tests
ampproject · Dec 15, 2020 · 5049b3d · 5049b3d
1 parent b3193d7
commit 5049b3d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/packages/optimizer/lib/transformers/GoogleFontsPreconnect.js b/packages/optimizer/lib/transformers/GoogleFontsPreconnect.js
@@ -52,14 +52,22 @@ class GoogleFontsPreconnect {
       if (this.isGoogleFontsLinkNode_(node)) {
         // Preconnect to fonts.gstatic.com, where the final fonts are downloaded.
         const linkPreconnect = createElement('link', {
-          rel: 'dns-prefetch preconnect',
+          rel: 'preconnect',
           href: 'https://fonts.gstatic.com',
           crossorigin: '',
         });
+        const linkDnsPrefetch = createElement('link', {
+          rel: 'dns-prefetch',
+          href: 'https://fonts.gstatic.com',
+        });
         const referenceNode = findMetaViewport(head);
         insertAfter(head, linkPreconnect, referenceNode);
         this.log_.debug(
-          'adding <link rel="dns=prefetch preconnect" href="' + linkPreconnect.attribs.href + '">'
+          'adding <link rel="preconnect" href="' + linkPreconnect.attribs.href + '" crossorigin>'
+        );
+        insertAfter(head, linkDnsPrefetch, linkPreconnect);
+        this.log_.debug(
+          'adding <link rel="dns-prefetch" href="' + linkDnsPrefetch.attribs.href + '">'
         );
 
         // We only need 1 preconnect, so we can skip the remaining elements and return.

diff --git a/...ec/transformers/valid/GoogleFontsPreconnect/adds_only_one_preconnect/expected_output.html b/...ec/transformers/valid/GoogleFontsPreconnect/adds_only_one_preconnect/expected_output.html
@@ -2,7 +2,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <link rel="dns-prefetch preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;

diff --git a/...rmers/valid/GoogleFontsPreconnect/adds_preconnect_after_meta_charset/expected_output.html b/...rmers/valid/GoogleFontsPreconnect/adds_preconnect_after_meta_charset/expected_output.html
@@ -2,7 +2,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <link rel="dns-prefetch preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;

diff --git a/...d/GoogleFontsPreconnect/adds_preconnect_when_google_fonts_css_exists/expected_output.html b/...d/GoogleFontsPreconnect/adds_preconnect_when_google_fonts_css_exists/expected_output.html
@@ -1,7 +1,8 @@
 <html ⚡>
 <head>
   <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <link rel="dns-prefetch preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;