Skip to content

Commit 1ce81d6

Browse files
westonruterwestonruter
authored
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
1 parent 1d2a067 commit 1ce81d6

17 files changed

+68
-31
lines changed

‎packages/optimizer/lib/DomTransformer.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ const TRANSFORMATIONS_PAIRED_AMP = [
8989
// Removes the boilerplate
9090
// needs to run after ServerSideRendering
9191
'AmpBoilerplateTransformer',
92+
// Needs to come after AmpBoilerplateTransformer.
9293
'RewriteAmpUrls',
9394
// Adds amp-onerror to disable boilerplate early
9495
// needs to run after BoilerplateTransformer and rewrite AMP URLs

‎packages/optimizer/lib/transformers/AmpBoilerplateErrorHandler.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,13 @@
1515
*/
1616
'use strict';
1717

18-
const {appendChild, createElement, firstChildByTag, insertText} = require('../NodeUtils');
18+
const {
19+
appendChild,
20+
createElement,
21+
hasAttribute,
22+
firstChildByTag,
23+
insertText,
24+
} = require('../NodeUtils');
1925

2026
/**
2127
* Error handler script to be added to the document's <head> for AMP pages not using ES modules.
@@ -48,7 +54,7 @@ class AmpBoilerplateErrorHandler {
4854
return;
4955
}
5056

51-
if (html.attribs['i-amphtml-no-boilerplate'] !== undefined) {
57+
if (hasAttribute(html, 'i-amphtml-no-boilerplate')) {
5258
// Boilerplate was removed, so no need for the amp-onerror handler
5359
return;
5460
}

‎packages/optimizer/lib/transformers/RewriteAmpUrls.js

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,14 @@
1515
*/
1616
'use strict';
1717

18-
const {createElement, firstChildByTag, insertAfter, insertBefore, remove} = require('../NodeUtils');
18+
const {
19+
createElement,
20+
hasAttribute,
21+
firstChildByTag,
22+
insertAfter,
23+
insertBefore,
24+
remove,
25+
} = require('../NodeUtils');
1926
const {AMP_CACHE_HOST} = require('../AmpConstants.js');
2027
const {findMetaViewport} = require('../HtmlDomHelper');
2128
const {calculateHost} = require('../RuntimeHostHelper');
@@ -73,14 +80,18 @@ class RewriteAmpUrls {
7380
let referenceNode = findMetaViewport(head);
7481
const esm = this.esmModulesEnabled || params.esmModulesEnabled;
7582
params.esmModulesEnabled = esm;
83+
const preloadEnabled = !hasAttribute(html, 'i-amphtml-no-boilerplate');
7684
const preloads = [];
7785

7886
while (node) {
7987
if (node.tagName === 'script' && this._usesAmpCacheUrl(node.attribs.src)) {
8088
node.attribs.src = this._replaceUrl(node.attribs.src, host);
8189
if (esm) {
82-
preloads.push(this._addEsm(node));
83-
} else {
90+
const preload = this._addEsm(node, preloadEnabled);
91+
if (preloadEnabled && preload) {
92+
preloads.push(preload);
93+
}
94+
} else if (preloadEnabled) {
8495
preloads.push(this._createPreload(node.attribs.src, 'script'));
8596
}
8697
} else if (
@@ -89,7 +100,9 @@ class RewriteAmpUrls {
89100
this._usesAmpCacheUrl(node.attribs.href)
90101
) {
91102
node.attribs.href = this._replaceUrl(node.attribs.href, host);
92-
preloads.push(this._createPreload(node.attribs.href, 'style'));
103+
if (preloadEnabled) {
104+
preloads.push(this._createPreload(node.attribs.href, 'style'));
105+
}
93106
} else if (
94107
node.tagName === 'link' &&
95108
node.attribs.rel === 'preload' &&
@@ -137,10 +150,10 @@ class RewriteAmpUrls {
137150
return host + url.substring(AMP_CACHE_HOST.length);
138151
}
139152

140-
_addEsm(scriptNode) {
153+
_addEsm(scriptNode, preloadEnabled) {
141154
let result = null;
142155
const esmScriptUrl = scriptNode.attribs.src.replace(/\.js$/, '.mjs');
143-
if (this._shouldPreload(scriptNode.attribs.src)) {
156+
if (preloadEnabled && this._shouldPreload(scriptNode.attribs.src)) {
144157
const preload = createElement('link', {
145158
as: 'script',
146159
crossorigin: 'anonymous',

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
33
<head>
44
<meta data-auto charset="utf-8">
5-
<meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
6-
<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>
5+
<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>
76
<link data-auto rel="canonical" href=".">
87
</head>
98
<body>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
33
<head>
44
<meta data-auto charset="utf-8">
5-
<meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
6-
<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>
5+
<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>
76
<link data-auto rel="canonical" href=".">
87
</head>
98
<body>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width,minimum-scale=1">
6-
<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>
5+
<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>
76
<link rel="canonical" href="self.html"><style amp-custom>h1 { margin: 16px; }</style>
87
</head>
98
<body>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width,minimum-scale=1">
6-
<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>
5+
<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>
76
<link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>
87
</head>
98
<body>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width,minimum-scale=1">
6-
<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>
5+
<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>
76
<link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>
87
</head>
98
<body>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,minimum-scale=1">
6-
<link as="script" crossorigin="anonymous" href="https://example.com/amp/rtv/123456789000000/v0.mjs" rel="modulepreload">
76
<meta name="runtime-host" content="https://example.com">
87
<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>
98
<link rel="canonical" href="self.html"><style amp-custom>h1{margin:16px}</style>

‎packages/optimizer/spec/end-to-end/markdown/expected_output.full.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
33
<head>
44
<meta data-auto charset="utf-8">
5-
<meta data-auto name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
6-
<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>
5+
<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>
76
<link data-auto rel="canonical" href=".">
87
</head>
98
<body>

0 commit comments

Comments
 (0)