From c44d8ad01de44916e4db4b094ee3f57e4175ba72 Mon Sep 17 00:00:00 2001
From: Chris Peyer <chrischrischris@users.noreply.github.com>
Date: Mon, 15 Jul 2024 05:15:46 -0400
Subject: [PATCH] MWPW-152280 MEP: Only preload fragments that are in the 1st
 section (#2525)

---
 .../personalization/personalization.js        |  9 +++++-
 test/features/personalization/actions.test.js | 22 +++++++++++++++
 .../mocks/actions/manifestPreloadFrags.json   | 28 +++++++++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 test/features/personalization/mocks/actions/manifestPreloadFrags.json

diff --git a/libs/features/personalization/personalization.js b/libs/features/personalization/personalization.js
index c214bafa89..5608c19c1c 100644
--- a/libs/features/personalization/personalization.js
+++ b/libs/features/personalization/personalization.js
@@ -111,6 +111,11 @@ export const preloadManifests = ({ targetManifests = [], persManifests = [] }) =
 
 export const getFileName = (path) => path?.split('/').pop();
 
+const isInLcpSection = (el) => {
+  const lcpSection = document.querySelector('body > main > div');
+  return lcpSection === el || lcpSection?.contains(el);
+};
+
 const createFrag = (el, url, manifestId) => {
   let href = url;
   try {
@@ -126,7 +131,9 @@ const createFrag = (el, url, manifestId) => {
   if (isSection) {
     frag = createTag('div', undefined, frag);
   }
-  loadLink(`${localizeLink(a.href)}.plain.html`, { as: 'fetch', crossorigin: 'anonymous', rel: 'preload' });
+  if (isInLcpSection(el)) {
+    loadLink(`${localizeLink(a.href)}.plain.html`, { as: 'fetch', crossorigin: 'anonymous', rel: 'preload' });
+  }
   return frag;
 };
 
diff --git a/test/features/personalization/actions.test.js b/test/features/personalization/actions.test.js
index d903a0917b..e9bce4b9c0 100644
--- a/test/features/personalization/actions.test.js
+++ b/test/features/personalization/actions.test.js
@@ -263,4 +263,26 @@ describe('custom actions', async () => {
       },
     });
   });
+
+  it('Only fragments in the first section should be preloaded', async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/personalization.html' });
+
+    let manifestJson = await readFile({ path: './mocks/actions/manifestPreloadFrags.json' });
+    manifestJson = JSON.parse(manifestJson);
+    setFetchResponse(manifestJson);
+
+    // This fragment is in the 1st section and should be preloaded
+    const lcpLink = 'link[href^="/test/features/personalization/mocks/fragments/fragmentReplaced"]';
+
+    // This fragment is in the 3rd section and should not be preloaded
+    const notLcpLink = 'link[href^="/test/features/personalization/mocks/fragments/inlineFragReplaced"]';
+
+    expect(document.querySelector(lcpLink)).not.to.exist;
+    expect(document.querySelector(notLcpLink)).not.to.exist;
+
+    await applyPers([{ manifestPath: '/path/to/manifest.json' }]);
+
+    expect(document.querySelector(lcpLink)).to.exist;
+    expect(document.querySelector(notLcpLink)).not.to.exist;
+  });
 });
diff --git a/test/features/personalization/mocks/actions/manifestPreloadFrags.json b/test/features/personalization/mocks/actions/manifestPreloadFrags.json
new file mode 100644
index 0000000000..8ee42f1bf8
--- /dev/null
+++ b/test/features/personalization/mocks/actions/manifestPreloadFrags.json
@@ -0,0 +1,28 @@
+{
+  "total": 5,
+  "offset": 0,
+  "limit": 5,
+  "data": [
+    {
+      "action": "replace",
+      "selector": ".custom-block",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "/test/features/personalization/mocks/fragments/fragmentReplaced",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    },
+    {
+      "action": "replace",
+      "selector": ".how-to",
+      "page filter (optional)": "",
+      "param-newoffer=123": "",
+      "chrome": "/test/features/personalization/mocks/fragments/inlineFragReplaced",
+      "firefox": "",
+      "android": "",
+      "ios": ""
+    }
+  ],
+  ":type": "sheet"
+}