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.

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

Filter duplicate extensions by src URL #1192

Merged
merged 11 commits into from
Apr 8, 2021
22 changes: 14 additions & 8 deletions packages/optimizer/lib/transformers/ReorderHeadTransformer.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ class HeadNodes {
this._metaCharset = null;
this._scriptAmpEngine = null;
this._metaOther = [];
this._resourceHintLinks = [];
this._scriptRenderDelayingExtensions = [];
this._scriptNonRenderDelayingExtensions = [];
this._resourceHintLinks = [];
this._linkIcons = [];
this._styleAmpCustom = null;
this._linkStylesheetsBeforeAmpCustom = [];
Expand All @@ -50,24 +50,24 @@ class HeadNodes {
}

_removeDuplicateCustomExtensions(extensions) {
const nodesByName = new Map();
const nodesBySrc = new Map();
for (const node of extensions) {
const name = this._getName(node);
nodesByName.set(name, node);
const src = node.attribs['src'];
Copy link
Collaborator

Choose a reason for hiding this comment

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

Shouldn't this remove the host to make sure a same extension is not downloaded twice from two different hosts?

nodesBySrc.set(src, node);
}
return Array.from(nodesByName.values());
return Array.from(nodesBySrc.values());
}
Copy link
Member

Choose a reason for hiding this comment

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

I took an alternative approach to this in PHP, to do the deduplication in the registerScript function itself: https://github.com/ampproject/amp-toolbox-php/pull/130/files#diff-b0da2cc892f74bf1ebc7a84e63d7065894b24541a48f3a26089f23860ee1209fR156-R190

This also accounts for module and nomodule variations.


appendToHead(head) {
appendChild(head, this._metaCharset);
appendAll(head, this._metaOther);
appendAll(head, this._resourceHintLinks);
Copy link
Collaborator

Choose a reason for hiding this comment

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

The metaOther can potentially includes lots of non-critical stuff like OpenGraph tags. I think in terms of performance, the resource hints should come right after the charset and before these other meta tags.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

good point! done

appendChild(head, this._linkStyleAmpRuntime);
appendChild(head, this._styleAmpRuntime);
appendAll(head, this._metaOther);
appendChild(head, this._scriptAmpEngine);
appendAll(head, this._scriptRenderDelayingExtensions);
appendAll(head, this._scriptNonRenderDelayingExtensions);
appendAll(head, this._linkIcons);
appendAll(head, this._resourceHintLinks);
appendAll(head, this._linkStylesheetsBeforeAmpCustom);
appendChild(head, this._styleAmpCustom);
appendAll(head, this._others);
Expand Down Expand Up @@ -160,7 +160,13 @@ class HeadNodes {
return;
}

if (rel === 'preload' || rel === 'prefetch' || rel === 'dns-prefetch' || rel === 'preconnect') {
if (
rel === 'preload' ||
rel === 'prefetch' ||
rel === 'dns-prefetch' ||
rel === 'preconnect' ||
rel == 'modulepreload'
) {
this._resourceHintLinks.push(node);
return;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta data-auto charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/v0.js"></script>
<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/amp-video-0.1.js" custom-element="amp-video"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta data-auto charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/lts/v0.js"></script>
<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/amp-video-0.1.js" custom-element="amp-video"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta data-auto charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/v0.js"></script>
<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/amp-video-0.1.js" custom-element="amp-video"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/v0.js"></script>
<script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script>
<script async nomodule src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js" custom-element="amp-experiment"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/lts/v0.js"></script>
<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/amp-experiment-0.1.js" custom-element="amp-experiment"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/v0.js"></script>
<script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script>
<script async nomodule src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js" custom-element="amp-experiment"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta charset="utf-8"><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>
<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">
<link as="script" crossorigin="anonymous" href="https://example.com/amp/rtv/123456789000000/v0.mjs" rel="modulepreload"><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>
<meta name="runtime-host" content="https://example.com">
<meta name="amp-geo-api" content="/geo">
<script async nomodule src="https://example.com/amp/rtv/123456789000000/v0.js"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta data-auto charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/v0.js"></script>
<script data-auto async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script>
<link data-auto rel="canonical" href=".">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta data-auto charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/lts/v0.js"></script>
<script data-auto async src="https://cdn.ampproject.org/lts/v0.mjs" type="module" crossorigin="anonymous"></script>
<link data-auto rel="canonical" href=".">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html amp i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta data-auto charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/v0.js"></script>
<script data-auto async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script>
<link data-auto rel="canonical" href=".">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html amp lang="en" i-amphtml-layout transformed="self;v=1">
<head>
<meta charset="utf-8"><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>
<meta charset="utf-8">
<meta 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">
<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 nomodule src="https://cdn.ampproject.org/v0.js"></script>
<script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script>
<script async nomodule src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html amp lang="en" i-amphtml-layout transformed="self;v=1">
<head>
<meta charset="utf-8"><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>
<meta charset="utf-8">
<meta 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">
<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 nomodule src="https://cdn.ampproject.org/lts/v0.js"></script>
<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/amp-story-1.0.js" custom-element="amp-story"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html amp lang="en" i-amphtml-layout transformed="self;v=1">
<head>
<meta charset="utf-8"><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>
<meta charset="utf-8">
<meta 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">
<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 nomodule src="https://cdn.ampproject.org/v0.js"></script>
<script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script>
<script async nomodule src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html lang="en" i-amphtml-layout transformed="self;v=1">
<head>
<meta charset="utf-8"><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>
<meta charset="utf-8">
<meta 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">
<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 nomodule src="https://cdn.ampproject.org/v0.js"></script>
<script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script>
<script async nomodule src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/v0.js"></script>
<script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script>
<script async nomodule src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" custom-template="amp-mustache"></script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!doctype html>
<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1">
<head>
<meta charset="utf-8"><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>
<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">
<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 nomodule src="https://cdn.ampproject.org/lts/v0.js"></script>
<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/amp-mustache-0.2.js" custom-template="amp-mustache"></script>
Expand Down
Loading