Move hero image preload out of experimental

packages/cache-list/package.json

@@ -26,5 +26,5 @@
   "dependencies": {
     "@ampproject/toolbox-core": "^2.5.0"
   },
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e"
+  "gitHead": "d5517559fb1c2e1be4d3c3e9df756cdce82a432a"
 }

packages/cli/package.json

@@ -39,5 +39,5 @@
     "minimist-options": "4.1.0",
     "node-fetch": "2.6.0"
   },
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e"
+  "gitHead": "da4cca026111b917cd3901b4666a5997ef45a606"
 }

packages/core/package.json

@@ -25,5 +25,5 @@
     "cross-fetch": "3.0.4",
     "lru-cache": "5.1.1"
   },
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e"
+  "gitHead": "7a674fec36dd663876907c0c9ebd332ad3fe7967"
 }

packages/cors/package.json

@@ -27,5 +27,5 @@
     "url": "https://github.com/ampproject/amp-toolbox/issues"
   },
   "homepage": "https://github.com/ampproject/amp-toolbox/tree/master/packages/cors",
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e"
+  "gitHead": "c26612cc3d7408fdc1451bcc8e0fecd67ac9661d"
 }

packages/lighthouse-plugin-amp/package.json

@@ -15,5 +15,5 @@
   "peerDependencies": {
     "lighthouse": ">=6.0.0"
   },
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e"
+  "gitHead": "7a674fec36dd663876907c0c9ebd332ad3fe7967"
 }

packages/linter/package.json

@@ -41,7 +41,7 @@
   "prettier": {
     "quoteProps": "consistent"
   },
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e",
+  "gitHead": "c26612cc3d7408fdc1451bcc8e0fecd67ac9661d",
   "devDependencies": {
     "prettier": "2.0.5",
     "tap-parser": "10.0.1",

packages/optimizer-express/package.json

@@ -30,5 +30,5 @@
     "mime-types": "2.1.27",
     "whatwg-url": "8.1.0"
   },
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e"
+  "gitHead": "da4cca026111b917cd3901b4666a5997ef45a606"
 }

packages/optimizer/README.md

@@ -185,7 +185,7 @@ Minifies the generated HTML output and inlined CSS.
 
 #### `preloadHeroImage`
 
-Auto detect hero images for amp-img, amp-iframe, amp-video, or amp-video-iframe and injects a `link rel=preload`.
+Auto detect hero images for amp-img, amp-iframe, amp-video, or amp-video-iframe and injects a `link rel=preload`. Preloads will only be generated if there is no existing image preload.
 
 - name: `preloadHeroImage`
 - valid options: `[true|false]`

packages/optimizer/lib/transformers/PreloadHeroImage.js

@@ -27,7 +27,8 @@ const TINY_IMG_THRESHOLD = 150;
 
 /**
  * PreloadHeroImage - This transformer identifies a hero image or
- * important images on the document and attaches <link rel="preload"> element.
+ * important images on the document and attaches <link rel="preload"> element. It
+ * will only add a hero image if there is not already an existing image preload.
  *
  * This transformer supports the following option:
  *
@@ -36,7 +37,7 @@ const TINY_IMG_THRESHOLD = 150;
 class PreloadHeroImage {
   constructor(config) {
     this.log = config.log;
-    this.enabled = config.preloadHeroImage !== false && config.experimentPreloadHeroImage;
+    this.enabled = config.preloadHeroImage !== false;
   }
   async transform(root, params) {
     if (!this.enabled || params.preloadHeroImage === false) {
@@ -47,6 +48,10 @@ class PreloadHeroImage {
     const body = firstChildByTag(html, 'body');
     if (!body || !head) return;
 
+    if (this.hasExistingImagePreload(head)) {
+      return;
+    }
+
     const heroImage = this.findHeroImage(body);
 
     if (!heroImage) {
@@ -78,6 +83,23 @@ class PreloadHeroImage {
     insertAfter(head, preload, referenceNode);
   }
 
+  hasExistingImagePreload(head) {
+    return head.children.some(this.isImagePreload);
+  }
+
+  isImagePreload(node) {
+    if (node.tagName !== 'link') {
+      return false;
+    }
+    if (!hasAttribute(node, 'rel')) {
+      return false;
+    }
+    if (node.attribs.rel !== 'preload') {
+      return false;
+    }
+    return node.attribs.as === 'image';
+  }
+
   findHeroImage(root) {
     if (!root.tagName) {
       return null;

packages/optimizer/package.json

@@ -49,5 +49,5 @@
     "url": "https://github.com/ampproject/amp-toolbox/issues"
   },
   "homepage": "https://github.com/ampproject/amp-toolbox/tree/master/packages/optimizer",
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e"
+  "gitHead": "c0ba2297de1e3cd583018880e2ea6c7fe5fd7905"
 }

packages/optimizer/spec/end-to-end/body-only/expected_output.default.html

@@ -6,6 +6,7 @@
   <link rel="preload" href="https://cdn.ampproject.org/v0.js" as="script">
   <script data-auto async src="https://cdn.ampproject.org/v0.js"></script>
   <script async src="https://cdn.ampproject.org/v0/amp-video-0.1.js" custom-element="amp-video"></script>
+  <link rel="preload" href="https://amp.dev/static/samples/img/tokyo.jpg" as="image" data-hero>
   <link data-auto rel="canonical" href=".">
 </head>
 <body>

packages/optimizer/spec/end-to-end/body-only/expected_output.lts.html

@@ -6,6 +6,7 @@
   <link rel="preload" href="https://cdn.ampproject.org/lts/v0.js" as="script">
   <script data-auto async src="https://cdn.ampproject.org/lts/v0.js"></script>
   <script async src="https://cdn.ampproject.org/lts/lts/v0/amp-video-0.1.js" custom-element="amp-video"></script>
+  <link rel="preload" href="https://amp.dev/static/samples/img/tokyo.jpg" as="image" data-hero>
   <link data-auto rel="canonical" href=".">
 </head>
 <body>

packages/optimizer/spec/end-to-end/hello-world/expected_output.default.html

@@ -8,6 +8,7 @@
   <script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
   <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
+  <link rel="preload" href="https://amp.dev/static/samples/img/amp.jpg" as="image" data-hero>
   <link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>
 </head>
 <body>

packages/optimizer/spec/end-to-end/hello-world/expected_output.lts.html

@@ -8,6 +8,7 @@
   <script async custom-element="amp-experiment" src="https://cdn.ampproject.org/lts/v0/amp-experiment-0.1.js"></script>
   <script async custom-element="amp-video" src="https://cdn.ampproject.org/lts/v0/amp-video-0.1.js"></script>
   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/lts/v0/amp-mustache-0.1.js"></script>
+  <link rel="preload" href="https://amp.dev/static/samples/img/amp.jpg" as="image" data-hero>
   <link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>
 </head>
 <body>

packages/optimizer/spec/end-to-end/hello-world/expected_output.paired.html

@@ -10,6 +10,7 @@
   <script async custom-element="amp-experiment" src="https://example.com/amp/rtv/123456789000000/v0/amp-experiment-0.1.js"></script>
   <script async custom-element="amp-video" src="https://example.com/amp/rtv/123456789000000/v0/amp-video-0.1.js"></script>
   <script async custom-template="amp-mustache" src="https://example.com/amp/rtv/123456789000000/v0/amp-mustache-0.1.js"></script>
+  <link rel="preload" href="https://amp.dev/static/samples/img/amp.jpg" as="image" data-hero>
   <link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>
   <link rel="amphtml" href="/amp-version.html">
 </head>

packages/optimizer/spec/end-to-end/markdown/expected_output.default.html

@@ -5,6 +5,7 @@
   <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link rel="preload" href="https://cdn.ampproject.org/v0.js" as="script">
   <script data-auto async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="preload" href="https://octodex.github.com/images/minion.png" as="image" data-hero>
   <link data-auto rel="canonical" href=".">
 </head>
 <body>

packages/optimizer/spec/end-to-end/markdown/expected_output.lts.html

@@ -5,6 +5,7 @@
   <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <link rel="preload" href="https://cdn.ampproject.org/lts/v0.js" as="script">
   <script data-auto async src="https://cdn.ampproject.org/lts/v0.js"></script>
+  <link rel="preload" href="https://octodex.github.com/images/minion.png" as="image" data-hero>
   <link data-auto rel="canonical" href=".">
 </head>
 <body>

packages/optimizer/spec/transformers/valid/PreloadHeroImage/aborts_with_existing_image_preload/expected_output.html

@@ -0,0 +1,9 @@
+<html>
+<head>
+  <link rel="preload" href="/another-foo.png" as="image">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-img width="500" height="400" src="/foo.png"></amp-img>
+</body>
+</html>

packages/optimizer/spec/transformers/valid/PreloadHeroImage/aborts_with_existing_image_preload/input.html

@@ -0,0 +1,9 @@
+<html>
+<head>
+  <link rel="preload" href="/another-foo.png" as="image">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-img width="500" height="400" src="/foo.png"></amp-img>
+</body>
+</html>

packages/optimizer/spec/transformers/valid/PreloadHeroImage/ignores_non_image_preloads/expected_output.html

@@ -0,0 +1,10 @@
+<html>
+<head>
+  <link rel="preload" href="https://cdn.ampproject.org/v0.js" as="script">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="preload" href="/foo.png" as="image" data-hero>
+</head>
+<body>
+  <amp-img width="500" height="400" src="/foo.png"></amp-img>
+</body>
+</html>

packages/optimizer/spec/transformers/valid/PreloadHeroImage/ignores_non_image_preloads/input.html

@@ -0,0 +1,9 @@
+<html>
+<head>
+  <link rel="preload" href="https://cdn.ampproject.org/v0.js" as="script">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-img width="500" height="400" src="/foo.png"></amp-img>
+</body>
+</html>

packages/runtime-fetch/package.json

@@ -31,5 +31,5 @@
     "url": "https://github.com/ampproject/amp-toolbox/issues"
   },
   "homepage": "https://github.com/ampproject/amp-toolbox/tree/master/packages/runtime-fetch",
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e"
+  "gitHead": "c26612cc3d7408fdc1451bcc8e0fecd67ac9661d"
 }

packages/runtime-version/package.json

@@ -24,5 +24,5 @@
     "url": "https://github.com/ampproject/amp-toolbox/issues"
   },
   "homepage": "https://github.com/ampproject/amp-toolbox/tree/master/packages/runtime-version",
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e"
+  "gitHead": "d5517559fb1c2e1be4d3c3e9df756cdce82a432a"
 }

packages/update-cache/package.json

@@ -29,5 +29,5 @@
     "@ampproject/toolbox-cache-url": "^2.3.0",
     "jsrsasign": "8.0.15"
   },
-  "gitHead": "aeceb5cb83cc111c08297415ab469696f2f7994e"
+  "gitHead": "c0ba2297de1e3cd583018880e2ea6c7fe5fd7905"
 }