Merge pull request #85 from GoogleChrome/remove-scroll-lcp

Remove the scroll listener to stop LCP observing

src/getLCP.ts

@@ -19,7 +19,6 @@ import {getFirstHidden} from './lib/getFirstHidden.js';
 import {initMetric} from './lib/initMetric.js';
 import {observe, PerformanceEntryHandler} from './lib/observe.js';
 import {onHidden} from './lib/onHidden.js';
-import {whenInput} from './lib/whenInput.js';
 import {ReportHandler} from './types.js';
 
 
@@ -51,15 +50,21 @@ export const getLCP = (onReport: ReportHandler, reportAllChanges = false) => {
   if (po) {
     report = bindReporter(onReport, metric, po, reportAllChanges);
 
-    const onFinal = () => {
+    const stopListening = () => {
       if (!metric.isFinal) {
         po.takeRecords().map(entryHandler as PerformanceEntryHandler);
         metric.isFinal = true;
         report();
       }
     }
 
-    whenInput().then(onFinal);
-    onHidden(onFinal, true);
+    // Stop listening after input. Note: while scrolling is an input that
+    // stop LCP observation, it's unreliable since it can be programmatically
+    // generated. See: https://github.com/GoogleChrome/web-vitals/issues/75
+    ['keydown', 'click'].map((type) => {
+      addEventListener(type, stopListening, {once: true, capture: true});
+    });
+
+    onHidden(stopListening, true);
   }
 };

test/e2e/getLCP-test.js

@@ -65,38 +65,6 @@ describe('getLCP()', async function() {
     assertFullReportsAreCorrect(await getBeacons());
   });
 
-  it('reports the correct value on scroll (reportAllChanges === false)', async function() {
-    if (!browserSupportsLCP) this.skip();
-
-    await browser.url('/test/lcp');
-
-    // Wait until all images are loaded and fully rendered.
-    await imagesPainted();
-
-    // Scroll down
-    const footer = await $('footer');
-    await footer.scrollIntoView();
-
-    await beaconCountIs(1);
-    assertStandardReportsAreCorrect(await getBeacons());
-  });
-
-  it('reports the correct value on scroll (reportAllChanges === true)', async function() {
-    if (!browserSupportsLCP) this.skip();
-
-    await browser.url('/test/lcp?reportAllChanges=1');
-
-    // Wait until all images are loaded and fully rendered.
-    await imagesPainted();
-
-    // Scroll down
-    const footer = await $('footer');
-    await footer.scrollIntoView();
-
-    await beaconCountIs(3);
-    assertFullReportsAreCorrect(await getBeacons());
-  });
-
   it('reports the correct value on input (reportAllChanges === false)', async function() {
     if (!browserSupportsLCP) this.skip();