Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Disable preloading runtime script/style by default #1248

Merged
merged 6 commits into from
Jun 30, 2021
Merged

Disable preloading runtime script/style by default #1248

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d3fceef
Disable preloading runtime script/style by default
westonruter Jun 26, 2021
e16ffdb
Invert logic for preloadEnabled config to ensure disabled by default
westonruter Jun 26, 2021
17cd9bd
Automatically omit preloads only when boilerplate is removed
westonruter Jun 29, 2021
62b5830
Manually remove modulepreload from expected_output.fast.html
westonruter Jun 29, 2021
d040957
Update expected output in end-to-end tests
westonruter Jun 29, 2021
1972ac9
Update style[amp-custom] in end-to-end expected output
westonruter Jun 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/optimizer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ Available options are:
- [optimizeAmpBind](#optimizeampbind)
- [optimizeHeroImages](#optimizeheroimages)
- [preloadHeroImage](#preloadheroimage)
- [preloadEnabled](#preloadenabled)
- [separateKeyframes](#separateKeyframes)
- [verbose](#verbose)

Expand Down Expand Up @@ -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`
westonruter marked this conversation as resolved.
Show resolved Hide resolved

Whether the AMP runtime script (v0.js or v0.mjs) and style (v0.css, if applicable) should be preloaded.

#### `separateKeyframes`

Expand Down
3 changes: 3 additions & 0 deletions packages/optimizer/lib/DomTransformer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ const CONFIG_DEFAULT = {
minify: true,
optimizeAmpBind: true,
optimizeHeroImages: true,
preloadEnabled: false,
separateKeyframes: true,
};

Expand All @@ -140,6 +141,7 @@ const CONFIG_BUILD = Object.assign({}, CONFIG_DEFAULT, {
minify: true,
optimizeAmpBind: true,
optimizeHeroImages: true,
preloadEnabled: false,
separateKeyframes: true,
});

Expand All @@ -151,6 +153,7 @@ const CONFIG_RUNTIME = Object.assign({}, CONFIG_DEFAULT, {
minify: false,
optimizeAmpBind: true,
optimizeHeroImages: true,
preloadEnabled: false,
separateKeyframes: false,
});

Expand Down
20 changes: 13 additions & 7 deletions packages/optimizer/lib/transformers/RewriteAmpUrls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ const {calculateHost} = require('../RuntimeHostHelper');
class RewriteAmpUrls {
constructor(config) {
this.esmModulesEnabled = config.esmModulesEnabled !== false;
this.preloadEnabled = config.preloadEnabled === true;
Copy link
Member Author

@westonruter westonruter Jun 26, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this only be honored if the boilerplate was removed (i-amphtml-no-boilerplate)?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, only if boilertplate has been removed. I'm wondering whether we should make it configurable at all. I'd tend to remove the option.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in 17cd9bd

this.log = config.log;
}
transform(root, params) {
Expand All @@ -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' &&
Expand Down Expand Up @@ -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',
Expand Down
3 changes: 1 addition & 2 deletions packages/optimizer/spec/end-to-end/body-only/expected_output.full.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions packages/optimizer/spec/end-to-end/body-only/expected_output.lts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 2 additions & 3 deletions packages/optimizer/spec/end-to-end/hello-world/expected_output.full.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 2 additions & 3 deletions packages/optimizer/spec/end-to-end/hello-world/expected_output.lts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion packages/optimizer/spec/end-to-end/hello-world/expected_output.paired.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions packages/optimizer/spec/end-to-end/markdown/expected_output.full.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions packages/optimizer/spec/end-to-end/markdown/expected_output.lts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading