Skip to content

Commit

Permalink
insert the dvh polyfill before any of the amp-story css to avoid CLS
Browse files Browse the repository at this point in the history
  • Loading branch information
@erwinmombay
erwinmombay committed Jan 11, 2022
1 parent f5728c5 commit 0751e10
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 12 deletions.
14 changes: 8 additions & 6 deletions packages/optimizer/lib/transformers/ReorderHeadTransformer.js
View file
Expand Up @@ -64,11 +64,13 @@ class HeadNodes {
appendChild(head, this._metaViewport);
appendAll(head, this._resourceHintLinks);
appendAll(head, this._metaOther);
// We want the dvh polyfill to be before the amp-story styles to prevent
// triggering an increase to CLS score.
appendChild(head, this._scriptAmpStoryDvhPollyfill);
appendChild(head, this._linkStyleAmpRuntime);
appendChild(head, this._styleAmpRuntime);
appendChild(head, this._linkStyleAmpStory);
appendAll(head, this._scriptAmpEngine);
appendChild(head, this._scriptAmpStoryDvhPollyfill);
appendAll(head, this._scriptRenderDelayingExtensions);
appendAll(head, this._scriptNonRenderDelayingExtensions);
appendChild(head, this._styleAmpCustom);
Expand Down Expand Up @@ -207,11 +209,11 @@ class HeadNodes {
* ReorderHead reorders the children of <head>. Specifically, it
* orders the <head> like so:
* (0) <meta charset> tag
* (1) <style amp-runtime> (inserted by ampruntimecss.go)
* (2) <link amp-extension=amp-story> (amp-story stylesheet)
* (3) remaining <meta> tags (those other than <meta charset>)
* (4) AMP runtime .js <script> tag
* (5) <script amp-story-dvh-polyfill> inline script tag
* (1) <script amp-story-dvh-polyfill> inline script tag
* (2) <style amp-runtime> (inserted by ampruntimecss.go)
* (3) <link amp-extension=amp-story> (amp-story stylesheet)
* (4) remaining <meta> tags (those other than <meta charset>)
* (5) AMP runtime .js <script> tag
* (6) <script> tags that are render delaying
* (7) <script> tags for remaining extensions
* (8) <link> tag for favicons
Expand Down
4 changes: 2 additions & 2 deletions ...es/optimizer/spec/end-to-end/story-optimized/expected_output.amp-story-optimized-lts.html
View file
Expand Up @@ -3,8 +3,8 @@
<head>
<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"><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>
<link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/lts/v0/amp-story-1.0.css"><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 amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script><script async custom-element="amp-story" src="https://cdn.ampproject.org/lts/v0/amp-story-1.0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-story-1.0.js" crossorigin="anonymous" custom-element="amp-story"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/lts/v0.mjs" rel="modulepreload"><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script><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>
<link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/lts/v0/amp-story-1.0.css"><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-story" src="https://cdn.ampproject.org/lts/v0/amp-story-1.0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-story-1.0.js" crossorigin="anonymous" custom-element="amp-story"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<title>My Story</title>
<link rel="canonical" href="helloworld.html"><style amp-custom>body {
font-family: 'Roboto', sans-serif;
Expand Down
4 changes: 2 additions & 2 deletions packages/optimizer/spec/end-to-end/story-optimized/expected_output.amp-story-optimized.html
View file
Expand Up @@ -3,8 +3,8 @@
<head>
<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"><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>
<link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><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 amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script><script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-story-1.0.js" crossorigin="anonymous" custom-element="amp-story"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/v0.mjs" rel="modulepreload"><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script><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>
<link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><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-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-story-1.0.js" crossorigin="anonymous" custom-element="amp-story"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<title>My Story</title>
<link rel="canonical" href="helloworld.html"><style amp-custom>body {
font-family: 'Roboto', sans-serif;
Expand Down
4 changes: 2 additions & 2 deletions ...spec/transformers/valid/ReorderHeadTransformer/reorders_head_amphtml/expected_output.html
View file
Expand Up @@ -2,9 +2,9 @@
<html ⚡>
<head>
<meta charset="utf-8">
<meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport">
<meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport"><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()})</script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0.css"><style amp-runtime></style>
<link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><script async src="https://cdn.ampproject.org/v0.js"></script><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()})</script><script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script><script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><script async src="https://cdn.ampproject.org/v0.js"></script><script async custom-element="amp-experiment" src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script><script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link href="https://example.com/favicon.ico" rel="icon">
<link href="https://fonts.googleapis.com/css?foobar" rel="stylesheet" type="text/css">
<title>Title</title><style amp-custom></style>
Expand Down

0 comments on commit 0751e10

Please sign in to comment.