ampproject · mszylkowski · Jul 12, 2021 · Jun 11, 2021 · Jun 11, 2021 · Jun 15, 2021
diff --git a/examples/amp-story/lcp.html b/examples/amp-story/lcp.html
@@ -0,0 +1,88 @@
+<!-- LCP test. The three images at q=100 will be 1.5MB each. Set q=30 to simulate compressed images at 0.18MB each. -->
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="lcp.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>LCP test</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-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>
+  <style amp-custom>
+    * {
+      box-sizing: border-box;
+    }
+    amp-story * {
+      font-family: 'Helvetica Neue', sans-serif;
+      color: white;
+    }
+    amp-story p {
+      line-height: 1.5;
+    }
+    .bold {
+      font-weight: bold;
+    }
+    .bottom {
+      align-content: end;
+    }
+    .last {
+      padding-bottom: 8.83vh;
+    }
+    .byline {
+      letter-spacing: 1.28px;
+    }
+  </style>
+</head>
+  <body>
+    <amp-story standalone id="cats"
+        title="LCP test" publisher="The AMP team"
+        publisher-logo-src="./img/amplogo.png"
+        poster-portrait-src="./img/overview.jpg">
+
+      <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="fill">
+          <amp-img
+            id="img1"
+            width="400"
+            height="750"
+            src="https://images.unsplash.com/photo-1515705576963-95cad62945b6?w=1750&q=30&fm=webp"
+            layout="fill">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical" class="bottom">
+          <p class="bold">LCP for images</p>
+          <p class="byline">Active page weight: 1.5MB</p>
+          <p class="byline">Inactive pages weight: 3MB</p>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-2">
+        <amp-story-grid-layer template="fill">
+          <amp-img
+            id="img2"
+            width="400"
+            height="750"
+            src="https://images.unsplash.com/photo-1502318217862-aa4e294ba657?w=1080&q=30&fm=webp"
+            layout="fill">
+          </amp-img>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-3">
+        <amp-story-grid-layer template="fill">
+          <amp-img
+            id="img3"
+            width="400"
+            height="750"
+            src="https://images.unsplash.com/photo-1513809491260-0e192158ae44?w=1080&q=30&fm=webp"
+            layout="fill">
+          </amp-img>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
@@ -1297,6 +1297,9 @@ export class AmpStoryPage extends AMP.BaseElement {
     if (this.isAd()) {
       distance = Math.min(distance, 2);
     }
+    if (distance == this.getDistance()) {
+      return;
+    }
 
     this.element.setAttribute('distance', distance);
     this.element.setAttribute('aria-hidden', distance != 0);

diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js
@@ -91,7 +91,7 @@ import {endsWith} from '#core/types/string';
 import {escapeCssSelectorIdent} from '#core/dom/css-selectors';
 import {findIndex, lastItem, toArray} from '#core/types/array';
 import {getConsentPolicyState} from '../../../src/consent';
-import {getDetail} from '../../../src/event-helper';
+import {getDetail, listenOncePromise} from '../../../src/event-helper';
 import {getLocalizationService} from './amp-story-localization-service';
 import {getMediaQueryService} from './amp-story-media-query-service';
 import {getMode, isModeDevelopment} from '../../../src/mode';
@@ -1533,7 +1533,7 @@ export class AmpStory extends AMP.BaseElement {
       // the navigation happened, like preloading the following pages, or
       // sending analytics events.
       () => {
-        this.preloadPagesByDistance_();
+        this.preloadPagesByDistance_(/* prioritizeActivePage */ !oldPage);
         this.triggerActiveEventForPage_();
 
         this.systemLayer_.resetDeveloperLogs();
@@ -2226,8 +2226,11 @@ export class AmpStory extends AMP.BaseElement {
     return map;
   }
 
-  /** @private */
-  preloadPagesByDistance_() {
+  /**
+   * @param {=boolean} prioritizeActivePage
+   * @private
+   */
+  preloadPagesByDistance_(prioritizeActivePage = false) {
     if (this.platform_.isBot()) {
       this.pages_.forEach((page) => {
         page.setDistance(0);
@@ -2237,13 +2240,27 @@ export class AmpStory extends AMP.BaseElement {
 
     const pagesByDistance = this.getPagesByDistance_();
 
-    this.mutateElement(() => {
+    const preloadAllPages = () => {
       pagesByDistance.forEach((pageIds, distance) => {
         pageIds.forEach((pageId) => {
           const page = this.getPageById(pageId);
           page.setDistance(distance);
         });
       });
+    };
+
+    this.mutateElement(() => {
+      if (prioritizeActivePage) {
+        // Load page with distance 0 first, and then load the other ones.
+        return Promise.all(
+          pagesByDistance[0].map((pageId) => {
+            const page = this.getPageById(pageId);
+            page.setDistance(0);
+            return listenOncePromise(page.element, EventType.PAGE_LOADED);
+          })
+        ).then(() => preloadAllPages());
+      }
+      preloadAllPages();
     });
   }
 

diff --git a/extensions/amp-story/1.0/test/test-amp-story.js b/extensions/amp-story/1.0/test/test-amp-story.js
@@ -37,6 +37,7 @@ import {createElementWithAttributes} from '#core/dom';
 import {registerServiceBuilder} from '../../../../src/service-helpers';
 import {toggleExperiment} from '#experiments';
 import {waitFor} from '#testing/test-helper';
+import { EventType } from '../events';
 
 // Represents the correct value of KeyboardEvent.which for the Right Arrow
 const KEYBOARD_EVENT_WHICH_RIGHT_ARROW = 39;
@@ -58,6 +59,8 @@ describes.realWin(
     let replaceStateStub;
     let win;
 
+    const nextTick = () => new Promise((resolve) => win.setTimeout(resolve, 0));
+
     /**
      * @param {number} count
      * @param {Array<string>=} ids
@@ -1837,5 +1840,40 @@ describes.realWin(
         ).to.be.false;
       });
     });
+
+    describe('page loading', () => {
+      it('should load the active page on layout', async () => {
+        const pages = await createStoryWithPages(
+          2,
+          ['page-1', 'page-2'],
+          false
+        );
+        env.sandbox.stub(story, 'mutateElement').callsFake((mutator) => {
+          mutator();
+          return Promise.resolve();
+        });
+        await story.buildCallback();
+        await story.layoutCallback();
+        expect(pages[0].hasAttribute('distance')).to.be.true;
+      });
+
+      it('should load the inactive pages after the active page is loaded', async () => {
+        const pages = await createStoryWithPages(
+          2,
+          ['page-1', 'page-2'],
+          false
+        );
+        env.sandbox.stub(story, 'mutateElement').callsFake((mutator) => {
+          mutator();
+          return Promise.resolve();
+        });
+        await story.buildCallback();
+        await story.layoutCallback();
+        expect(pages[1].hasAttribute('distance')).to.be.false;
+        pages[0].dispatchEvent(new CustomEvent(EventType.PAGE_LOADED));
+        await nextTick();
+        expect(pages[1].hasAttribute('distance')).to.be.true;
+      });
+    });
   }
 );