🚀 [Story performance] Disable animations on first page if story is tr…

…ansformed (#37135) * Add isTransformed * Added isTransformed to report * Added stories transformed * Removed story- * Added inline css CSI * Added comment * Updated comment
ampproject · Dec 7, 2021 · 788b14d · 788b14d
1 parent 37c8e7c
commit 788b14d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js
@@ -92,6 +92,7 @@ import {isPreviewMode} from './embed-mode';
 import {isRTL, removeElement} from '#core/dom';
 import {parseQueryString} from '#core/types/string/url';
 import {
+  isTransformed,
   removeAttributeInMutate,
   setAttributeInMutate,
   shouldShowStoryUrlInfo,
@@ -417,12 +418,25 @@ export class AmpStory extends AMP.BaseElement {
     if (
       isExperimentOn(this.win, 'story-disable-animations-first-page') ||
       isPreviewMode(this.win) ||
-      prefersReducedMotion(this.win)
+      prefersReducedMotion(this.win) ||
+      isTransformed(this.getAmpDoc())
     ) {
       Services.performanceFor(this.win).addEnabledExperiment(
         'story-disable-animations-first-page'
       );
     }
+    // [i-amphtml-version] marks that the style was inlined in the doc server-side.
+    if (
+      this.getAmpDoc()
+        .getRootNode()
+        .documentElement.querySelector(
+          'style[amp-extension="amp-story"][i-amphtml-version]'
+        )
+    ) {
+      Services.performanceFor(this.win).addEnabledExperiment(
+        'story-inline-css'
+      );
+    }
     if (isExperimentOn(this.win, 'story-load-inactive-outside-viewport')) {
       Services.performanceFor(this.win).addEnabledExperiment(
         'story-load-inactive-outside-viewport'

diff --git a/extensions/amp-story/1.0/animation.js b/extensions/amp-story/1.0/animation.js
@@ -27,7 +27,7 @@ import {
   scopedQuerySelector,
   scopedQuerySelectorAll,
 } from '#core/dom/query';
-import {timeStrToMillis, unscaledClientRect} from './utils';
+import {isTransformed, timeStrToMillis, unscaledClientRect} from './utils';
 import {isExperimentOn} from '#experiments';
 import {isPreviewMode} from './embed-mode';
 
@@ -548,7 +548,8 @@ export class AnimationManager {
 
     const firstPageAnimationDisabled =
       isExperimentOn(ampdoc.win, 'story-disable-animations-first-page') ||
-      isPreviewMode(ampdoc.win);
+      isPreviewMode(ampdoc.win) ||
+      isTransformed(ampdoc);
 
     /** @private @const {bool} */
     this.skipAnimations_ =

diff --git a/extensions/amp-story/1.0/utils.js b/extensions/amp-story/1.0/utils.js
@@ -333,3 +333,12 @@ export const maybeMakeProxyUrl = (url, ampDoc) => {
   );
   return loc.origin + '/i/s/' + resolvedRelativeUrl.replace(/https?:\/\//, '');
 };
+
+/**
+ * Whether the document is transformed
+ * @param {!AmpDoc} ampdoc
+ * @return {boolean}
+ */
+export function isTransformed(ampdoc) {
+  return ampdoc.getRootNode().documentElement.hasAttribute('transformed');
+}