Disable preloading runtime script/style by default

ampproject · Jun 26, 2021 · d3fceef · d3fceef
1 parent 1d2a067
commit d3fceef
Show file tree

Hide file tree

Showing 25 changed files with 73 additions and 47 deletions.
diff --git a/packages/optimizer/README.md b/packages/optimizer/README.md
@@ -149,6 +149,7 @@ Available options are:
 - [optimizeAmpBind](#optimizeampbind)
 - [optimizeHeroImages](#optimizeheroimages)
 - [preloadHeroImage](#preloadheroimage)
+- [preloadEnabled](#preloadenabled)
 - [separateKeyframes](#separateKeyframes)
 - [verbose](#verbose)
 
@@ -333,7 +334,11 @@ Hero images are optimized by server-side rendering the `img` element inside the
 
 #### `preloadHeroImage`
 
-Deprecated, use [optimizeHeroImages](#optimizeheroimages) instead. 
+Deprecated, use [optimizeHeroImages](#optimizeheroimages) instead.
+
+#### `preloadEnabled`
+
+Whether the AMP runtime script (v0.js or v0.mjs) and style (v0.css, if applicable) should be preloaded.
 
 #### `separateKeyframes`
 

diff --git a/packages/optimizer/lib/DomTransformer.js b/packages/optimizer/lib/DomTransformer.js
@@ -129,6 +129,7 @@ const CONFIG_DEFAULT = {
   minify: true,
   optimizeAmpBind: true,
   optimizeHeroImages: true,
+  preloadEnabled: false,
   separateKeyframes: true,
 };
 
@@ -140,6 +141,7 @@ const CONFIG_BUILD = Object.assign({}, CONFIG_DEFAULT, {
   minify: true,
   optimizeAmpBind: true,
   optimizeHeroImages: true,
+  preloadEnabled: false,
   separateKeyframes: true,
 });
 
@@ -151,6 +153,7 @@ const CONFIG_RUNTIME = Object.assign({}, CONFIG_DEFAULT, {
   minify: false,
   optimizeAmpBind: true,
   optimizeHeroImages: true,
+  preloadEnabled: false,
   separateKeyframes: false,
 });
 

diff --git a/packages/optimizer/lib/transformers/RewriteAmpUrls.js b/packages/optimizer/lib/transformers/RewriteAmpUrls.js
@@ -60,6 +60,7 @@ const {calculateHost} = require('../RuntimeHostHelper');
 class RewriteAmpUrls {
   constructor(config) {
     this.esmModulesEnabled = config.esmModulesEnabled !== false;
+    this.preloadEnabled = config.preloadEnabled !== false;
     this.log = config.log;
   }
   transform(root, params) {
@@ -78,18 +79,23 @@ class RewriteAmpUrls {
     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 {
-          preloads.push(this._createPreload(node.attribs.src, 'script'));
-        }
+          if ( esm ) {
+            const preload = this._addEsm(node);
+            if (this.preloadEnabled && preload) {
+              preloads.push(preload);
+            }
+          } else if (this.preloadEnabled) {
+            preloads.push(this._createPreload(node.attribs.src, 'script'));
+          }
       } else if (
         node.tagName === 'link' &&
         node.attribs.rel === 'stylesheet' &&
         this._usesAmpCacheUrl(node.attribs.href)
       ) {
         node.attribs.href = this._replaceUrl(node.attribs.href, host);
-        preloads.push(this._createPreload(node.attribs.href, 'style'));
+        if (this.preloadEnabled) {
+          preloads.push(this._createPreload(node.attribs.href, 'style'));
+        }
       } else if (
         node.tagName === 'link' &&
         node.attribs.rel === 'preload' &&
@@ -140,7 +146,7 @@ class RewriteAmpUrls {
   _addEsm(scriptNode) {
     let result = null;
     const esmScriptUrl = scriptNode.attribs.src.replace(/\.js$/, '.mjs');
-    if (this._shouldPreload(scriptNode.attribs.src)) {
+    if (this.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.full.html b/packages/optimizer/spec/end-to-end/hello-world/expected_output.full.html
@@ -2,9 +2,8 @@
 <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>
-  <link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>
+  <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>
   <h1>Hello, AMP world!</h1>

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,9 +2,8 @@
 <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>
-  <link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>
+  <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>
   <h1>Hello, AMP world!</h1>

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>