Only keep the slowest LoAF entries

Author: josephwynn-sc

src/metric/LoAF.ts

@@ -79,11 +79,17 @@ export function getData(config: UserConfig): LoAFSummary {
     totalEntries: entries.length,
     totalStyleAndLayoutDuration: floor(totalStyleAndLayoutDuration),
     totalWorkDuration: floor(totalWorkDuration),
-    entries: summarizedEntries.slice(0, config.maxAttributionEntries),
+
     scripts: summarizeLoAFScripts(
       entries.flatMap((entry) => entry.scripts),
       config,
     ),
+
+    // Only keep the slowest LoAF entries
+    entries: summarizedEntries
+      .sort((a, b) => b.duration - a.duration)
+      .slice(0, config.maxAttributionEntries)
+      .sort((a, b) => a.startTime - b.startTime),
   };
 }
 

tests/integration/post-beacon/loaf.spec.ts

@@ -80,6 +80,58 @@ test.describe("POST beacon LoAF", () => {
     }
   });
 
+  test("Only the slowest LoAFs are collected", async ({ page }) => {
+    const MAX_ENTRIES = 3;
+    const loafSupported = await entryTypeSupported(page, "long-animation-frame");
+    const luxRequests = new RequestInterceptor(page).createRequestMatcher("/store/");
+    await page.goto(
+      `/long-animation-frames.html?injectScript=LUX.maxAttributionEntries=${MAX_ENTRIES};`,
+      {
+        waitUntil: "networkidle",
+      },
+    );
+
+    // Create a mixture of short and long LoAFs
+    // Short
+    await page.locator("#create-long-task").click();
+    await page.locator("#create-long-task").click();
+
+    // Long
+    await page.locator("#long-task-duration").fill("100");
+    await page.locator("#create-long-task").click();
+
+    // Short
+    await page.locator("#long-task-duration").fill("50");
+    await page.locator("#create-long-task").click();
+    await page.locator("#create-long-task").click();
+
+    // Long
+    await page.locator("#long-task-duration").fill("150");
+    await page.locator("#create-long-task").click();
+    await page.locator("#create-long-task").click();
+
+    await luxRequests.waitForMatchingRequest(() => page.evaluate(() => LUX.send()));
+    const b = luxRequests.get(0)!.postDataJSON() as BeaconPayload;
+
+    if (loafSupported) {
+      const loaf = b.loaf!;
+
+      expect(loaf.entries.length).toEqual(MAX_ENTRIES);
+
+      // The entries should all be the longer LoAFs. Note the total duration is the value from the
+      // #long-task-duration input, plus a hard-coded 50ms long task in external-long.task.js.
+      expect(loaf.entries[0].duration).toBeGreaterThanOrEqual(150);
+      expect(loaf.entries[1].duration).toBeGreaterThanOrEqual(150);
+      expect(loaf.entries[2].duration).toBeGreaterThanOrEqual(100);
+
+      // The entries should be ordered by start time
+      expect(loaf.entries[0].startTime).toBeLessThanOrEqual(loaf.entries[1].startTime);
+      expect(loaf.entries[1].startTime).toBeLessThanOrEqual(loaf.entries[2].startTime);
+    } else {
+      expect(b.loaf).toBeUndefined();
+    }
+  });
+
   test("LoAFs are collected as INP attribution", async ({ page }) => {
     const luxRequests = new RequestInterceptor(page).createRequestMatcher("/store/");
     await page.goto("/long-animation-frames.html", { waitUntil: "networkidle" });

tests/test-pages/long-animation-frames.html

@@ -13,6 +13,7 @@ <h1>LUX long animation frames test page</h1>
 
     <img src="eve.jpg" elementtiming="eve-image">
 
+    <input type="text" id="long-task-duration" value="50">
     <button id="create-long-task" type="button">Make a delayed paint</button>
 
     <div style="margin-top: 2000px;">
@@ -21,12 +22,15 @@ <h1>LUX long animation frames test page</h1>
 
     <script src="app.js"></script>
     <script>
+        const durationInput = document.getElementById("long-task-duration");
         document.getElementById("create-long-task").addEventListener("click", globalClickHandler);
 
         function globalClickHandler() {
+            const duration = Number(durationInput.value) || 50;
             const script = document.createElement("script");
             script.src = "external-long-task.js";
-            script.onload = () => externalLongTask(50);
+            script.onload = () => externalLongTask(duration);
+
             document.body.appendChild(script);
 
             const firstImage = document.querySelector("img");