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" +}