Disable preloading runtime script/style by default (#1248)

* Disable preloading runtime script/style by default * Invert logic for preloadEnabled config to ensure disabled by default * Automatically omit preloads only when boilerplate is removed * Manually remove modulepreload from expected_output.fast.html * Update expected output in end-to-end tests * Update style[amp-custom] in end-to-end expected output
ampproject · Jun 30, 2021 · 1ce81d6 · 1ce81d6
1 parent 1d2a067
commit 1ce81d6
Show file tree

Hide file tree

Showing 17 changed files with 68 additions and 31 deletions.
diff --git a/packages/optimizer/lib/DomTransformer.js b/packages/optimizer/lib/DomTransformer.js
@@ -89,6 +89,7 @@ const TRANSFORMATIONS_PAIRED_AMP = [
   // Removes the boilerplate
   // needs to run after ServerSideRendering
   'AmpBoilerplateTransformer',
+  // Needs to come after AmpBoilerplateTransformer.
   'RewriteAmpUrls',
   // Adds amp-onerror to disable boilerplate early
   // needs to run after BoilerplateTransformer and rewrite AMP URLs

diff --git a/packages/optimizer/lib/transformers/AmpBoilerplateErrorHandler.js b/packages/optimizer/lib/transformers/AmpBoilerplateErrorHandler.js
@@ -15,7 +15,13 @@
  */
 'use strict';
 
-const {appendChild, createElement, firstChildByTag, insertText} = require('../NodeUtils');
+const {
+  appendChild,
+  createElement,
+  hasAttribute,
+  firstChildByTag,
+  insertText,
+} = require('../NodeUtils');
 
 /**
  * Error handler script to be added to the document's <head> for AMP pages not using ES modules.
@@ -48,7 +54,7 @@ class AmpBoilerplateErrorHandler {
       return;
     }
 
-    if (html.attribs['i-amphtml-no-boilerplate'] !== undefined) {
+    if (hasAttribute(html, 'i-amphtml-no-boilerplate')) {
       // Boilerplate was removed, so no need for the amp-onerror handler
       return;
     }

diff --git a/packages/optimizer/lib/transformers/RewriteAmpUrls.js b/packages/optimizer/lib/transformers/RewriteAmpUrls.js
@@ -15,7 +15,14 @@
  */
 'use strict';
 
-const {createElement, firstChildByTag, insertAfter, insertBefore, remove} = require('../NodeUtils');
+const {
+  createElement,
+  hasAttribute,
+  firstChildByTag,
+  insertAfter,
+  insertBefore,
+  remove,
+} = require('../NodeUtils');
 const {AMP_CACHE_HOST} = require('../AmpConstants.js');
 const {findMetaViewport} = require('../HtmlDomHelper');
 const {calculateHost} = require('../RuntimeHostHelper');
@@ -73,14 +80,18 @@ class RewriteAmpUrls {
     let referenceNode = findMetaViewport(head);
     const esm = this.esmModulesEnabled || params.esmModulesEnabled;
     params.esmModulesEnabled = esm;
+    const preloadEnabled = !hasAttribute(html, 'i-amphtml-no-boilerplate');
     const preloads = [];
 
     while (node) {
       if (node.tagName === 'script' && this._usesAmpCacheUrl(node.attribs.src)) {
         node.attribs.src = this._replaceUrl(node.attribs.src, host);
         if (esm) {
-          preloads.push(this._addEsm(node));
-        } else {
+          const preload = this._addEsm(node, preloadEnabled);
+          if (preloadEnabled && preload) {
+            preloads.push(preload);
+          }
+        } else if (preloadEnabled) {
           preloads.push(this._createPreload(node.attribs.src, 'script'));
         }
       } else if (
@@ -89,7 +100,9 @@ class RewriteAmpUrls {
         this._usesAmpCacheUrl(node.attribs.href)
       ) {
         node.attribs.href = this._replaceUrl(node.attribs.href, host);
-        preloads.push(this._createPreload(node.attribs.href, 'style'));
+        if (preloadEnabled) {
+          preloads.push(this._createPreload(node.attribs.href, 'style'));
+        }
       } else if (
         node.tagName === 'link' &&
         node.attribs.rel === 'preload' &&
@@ -137,10 +150,10 @@ class RewriteAmpUrls {
     return host + url.substring(AMP_CACHE_HOST.length);
   }
 
-  _addEsm(scriptNode) {
+  _addEsm(scriptNode, preloadEnabled) {
     let result = null;
     const esmScriptUrl = scriptNode.attribs.src.replace(/\.js$/, '.mjs');
-    if (this._shouldPreload(scriptNode.attribs.src)) {
+    if (preloadEnabled && this._shouldPreload(scriptNode.attribs.src)) {
       const preload = createElement('link', {
         as: 'script',
         crossorigin: 'anonymous',

diff --git a/packages/optimizer/spec/end-to-end/body-only/expected_output.full.html b/packages/optimizer/spec/end-to-end/body-only/expected_output.full.html
@@ -2,8 +2,7 @@
 <html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
   <meta data-auto charset="utf-8">
-  <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/v0.mjs" rel="modulepreload"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script data-auto async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-video-0.1.mjs" custom-element="amp-video" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
+  <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script data-auto async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-video-0.1.mjs" custom-element="amp-video" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
   <link data-auto rel="canonical" href=".">
 </head>
 <body>

diff --git a/packages/optimizer/spec/end-to-end/body-only/expected_output.lts.html b/packages/optimizer/spec/end-to-end/body-only/expected_output.lts.html
@@ -2,8 +2,7 @@
 <html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
   <meta data-auto charset="utf-8">
-  <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/lts/v0.mjs" rel="modulepreload"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script data-auto async src="https://cdn.ampproject.org/lts/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/lts/v0/amp-video-0.1.mjs" custom-element="amp-video" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
+  <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script data-auto async src="https://cdn.ampproject.org/lts/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/lts/v0/amp-video-0.1.mjs" custom-element="amp-video" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
   <link data-auto rel="canonical" href=".">
 </head>
 <body>

diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.fast.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.fast.html
@@ -2,8 +2,7 @@
 <html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/v0.mjs" rel="modulepreload"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js" crossorigin="anonymous" custom-element="amp-experiment"></script><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
+  <meta name="viewport" content="width=device-width,minimum-scale=1"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js" crossorigin="anonymous" custom-element="amp-experiment"></script><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
   <link rel="canonical" href="self.html"><style amp-custom>h1 { margin: 16px; }</style>
 </head>
 <body>

diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.full.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.full.html
@@ -2,8 +2,7 @@
 <html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/v0.mjs" rel="modulepreload"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js" crossorigin="anonymous" custom-element="amp-experiment"></script><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
+  <meta name="viewport" content="width=device-width,minimum-scale=1"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js" crossorigin="anonymous" custom-element="amp-experiment"></script><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
   <link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>
 </head>
 <body>

diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.lts.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.lts.html
@@ -2,8 +2,7 @@
 <html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/lts/v0.mjs" rel="modulepreload"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script async src="https://cdn.ampproject.org/lts/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-experiment" src="https://cdn.ampproject.org/lts/v0/amp-experiment-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-experiment-0.1.js" crossorigin="anonymous" custom-element="amp-experiment"></script><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/lts/v0/amp-analytics-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async custom-element="amp-video" src="https://cdn.ampproject.org/lts/v0/amp-video-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
+  <meta name="viewport" content="width=device-width,minimum-scale=1"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script async src="https://cdn.ampproject.org/lts/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-experiment" src="https://cdn.ampproject.org/lts/v0/amp-experiment-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-experiment-0.1.js" crossorigin="anonymous" custom-element="amp-experiment"></script><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/lts/v0/amp-analytics-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async custom-element="amp-video" src="https://cdn.ampproject.org/lts/v0/amp-video-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
   <link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>
 </head>
 <body>

diff --git a/packages/optimizer/spec/end-to-end/hello-world/expected_output.paired.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.paired.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <link as="script" crossorigin="anonymous" href="https://example.com/amp/rtv/123456789000000/v0.mjs" rel="modulepreload">
   <meta name="runtime-host" content="https://example.com">
   <meta name="amp-geo-api" content="/geo"><style amp-runtime i-amphtml-version="123456789000000">/* example.com v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script async src="https://example.com/amp/rtv/123456789000000/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://example.com/amp/rtv/123456789000000/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-experiment" src="https://example.com/amp/rtv/123456789000000/v0/amp-experiment-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://example.com/amp/rtv/123456789000000/v0/amp-experiment-0.1.js" crossorigin="anonymous" custom-element="amp-experiment"></script><script async custom-element="amp-analytics" src="https://example.com/amp/rtv/123456789000000/v0/amp-analytics-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://example.com/amp/rtv/123456789000000/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async custom-element="amp-video" src="https://example.com/amp/rtv/123456789000000/v0/amp-video-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://example.com/amp/rtv/123456789000000/v0/amp-video-0.1.js" crossorigin="anonymous" custom-element="amp-video"></script>
   <link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>

diff --git a/packages/optimizer/spec/end-to-end/markdown/expected_output.full.html b/packages/optimizer/spec/end-to-end/markdown/expected_output.full.html
@@ -2,8 +2,7 @@
 <html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
   <meta data-auto charset="utf-8">
-  <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/v0.mjs" rel="modulepreload"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script data-auto async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script>
+  <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script data-auto async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script>
   <link data-auto rel="canonical" href=".">
 </head>
 <body>

diff --git a/packages/optimizer/spec/end-to-end/markdown/expected_output.lts.html b/packages/optimizer/spec/end-to-end/markdown/expected_output.lts.html
@@ -2,8 +2,7 @@
 <html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
 <head>
   <meta data-auto charset="utf-8">
-  <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-  <link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/lts/v0.mjs" rel="modulepreload"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script data-auto async src="https://cdn.ampproject.org/lts/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0.js" crossorigin="anonymous"></script>
+  <meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style><script data-auto async src="https://cdn.ampproject.org/lts/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0.js" crossorigin="anonymous"></script>
   <link data-auto rel="canonical" href=".">
 </head>
 <body>