Skip to content

Commit

Permalink
Adaptive site: disable non-critical tasks for users in the `adaptive-…
Browse files Browse the repository at this point in the history 
…site` test (#9024)

Co-authored-by: Max Duval <max.duval@theguardian.com>
  • Loading branch information
@sndrs @mxdvl
sndrs and mxdvl authored Oct 9, 2023
1 parent e7c6f08 commit b865fc1
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 130 deletions.
22 changes: 21 additions & 1 deletion dotcom-rendering/src/client/adaptiveSite.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import { log } from '@guardian/libs';
import { isServer } from '../lib/isServer';
import { setSchedulerPriorityLastStartTime } from '../lib/scheduler';

/**
* Whether we should adapt the current page to address poor performance issues.
* Initially this will only happen as part of a @guardian/open-journalism test.
*
* It will resolve immediately if `false`, but needs to wait for perf check to
* complete if you're in the adaptive site test variant.
*/
export const shouldAdapt = async (): Promise<boolean> => {
if (isServer) return false;
Expand All @@ -18,3 +22,19 @@ export const shouldAdapt = async (): Promise<boolean> => {

return isPerformingPoorly();
};

/** Hide all placeholders of non-critical islands */
const hideAdaptedIslands = () => {
const style = document.createElement('style');
style.innerHTML = `gu-island:not([priority=critical]) [data-name=placeholder] { display: none; }`;
document.head.appendChild(style);
};

export const adaptSite = (): void => {
log('openJournalism', '🎛️ Adapting');

// disable all tasks except critical ones
setSchedulerPriorityLastStartTime('feature', 0);
setSchedulerPriorityLastStartTime('enhancement', 0);
hideAdaptedIslands();
};
265 changes: 136 additions & 129 deletions dotcom-rendering/src/client/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,152 @@
import './webpackPublicPath';
import { adaptSite, shouldAdapt } from './adaptiveSite';
import { startup } from './startup';

/*************************************************************
*
* The following modules are bundled in the entry chunk,
* so they can be run immediately, but we still want to report
* on the duration of loading and evaluating them.
*
*************************************************************/
void (async () => {
if (await shouldAdapt()) {
adaptSite();
}

void startup(
'bootCmp',
() =>
import(/* webpackMode: "eager" */ './bootCmp').then(({ bootCmp }) =>
bootCmp(),
),
{
priority: 'critical',
},
);
/*************************************************************
*
* The following modules are bundled in the entry chunk,
* so they can be run immediately, but we still want to report
* on the duration of loading and evaluating them.
*
*************************************************************/

void startup(
'recordInitialPageEvents',
() =>
import(
/* webpackMode: "eager" */ './ophan/recordInitialPageEvents'
).then(({ recordInitialPageEvents }) => recordInitialPageEvents()),
{
priority: 'critical',
},
);
void startup(
'bootCmp',
() =>
import(/* webpackMode: "eager" */ './bootCmp').then(({ bootCmp }) =>
bootCmp(),
),
{
priority: 'critical',
},
);

void startup(
'ga',
() => import(/* webpackMode: "eager" */ './ga').then(({ ga }) => ga()),
{
priority: 'critical',
},
);
void startup(
'recordInitialPageEvents',
() =>
import(
/* webpackMode: "eager" */ './ophan/recordInitialPageEvents'
).then(({ recordInitialPageEvents }) => recordInitialPageEvents()),
{
priority: 'critical',
},
);

void startup(
'sentryLoader',
() =>
import(/* webpackMode: "eager" */ './sentryLoader').then(
({ sentryLoader }) => sentryLoader(),
),
{
priority: 'critical',
},
);
void startup(
'ga',
() => import(/* webpackMode: "eager" */ './ga').then(({ ga }) => ga()),
{
priority: 'critical',
},
);

void startup(
'dynamicImport',
() =>
import(/* webpackMode: "eager" */ './dynamicImport').then(
({ dynamicImport }) => dynamicImport(),
),
{
priority: 'critical',
},
);
void startup(
'sentryLoader',
() =>
import(/* webpackMode: "eager" */ './sentryLoader').then(
({ sentryLoader }) => sentryLoader(),
),
{
priority: 'critical',
},
);

void startup(
'islands',
() =>
import(/* webpackMode: "eager" */ './islands').then(({ islands }) =>
islands(),
),
{
priority: 'critical',
},
);
void startup(
'dynamicImport',
() =>
import(/* webpackMode: "eager" */ './dynamicImport').then(
({ dynamicImport }) => dynamicImport(),
),
{
priority: 'critical',
},
);

void startup(
'poorPerformanceMonitoring',
() =>
import(/* webpackMode: "eager" */ './poorPerformanceMonitoring').then(
({ recordPoorPerformance }) => recordPoorPerformance(),
),
{
priority: 'critical',
},
);
void startup(
'islands',
() =>
import(/* webpackMode: "eager" */ './islands').then(({ islands }) =>
islands(),
),
{
priority: 'critical',
},
);

/*************************************************************
*
* The following modules are lazy loaded,
* because they are lower priority and do not want to block
* the modules above on loading these.
*
* We are not assigning chunk name to allow Webpack
* to optimise chunking based on its algorithm.
*
*************************************************************/
void startup(
'poorPerformanceMonitoring',
() =>
import(
/* webpackMode: "eager" */ './poorPerformanceMonitoring'
).then(({ recordPoorPerformance }) => recordPoorPerformance()),
{
priority: 'critical',
},
);

void startup(
'atomIframe',
() =>
import(
/* webpackMode: 'lazy' */
'./atomIframe'
).then(({ atomIframe }) => atomIframe()),
{ priority: 'feature' },
);
/*************************************************************
*
* The following modules are lazy loaded,
* because they are lower priority and do not want to block
* the modules above on loading these.
*
* We are not assigning chunk name to allow Webpack
* to optimise chunking based on its algorithm.
*
*************************************************************/

void startup(
'embedIframe',
() =>
import(
/* webpackMode: 'lazy' */
'./embedIframe'
).then(({ embedIframe }) => embedIframe()),
{ priority: 'feature' },
);
void startup(
'atomIframe',
() =>
import(
/* webpackMode: 'lazy' */
'./atomIframe'
).then(({ atomIframe }) => atomIframe()),
{ priority: 'feature' },
);

void startup(
'newsletterEmbedIframe',
() =>
import(
/* webpackMode: 'lazy' */
'./newsletterEmbedIframe'
).then(({ newsletterEmbedIframe }) => newsletterEmbedIframe()),
{ priority: 'feature' },
);
void startup(
'embedIframe',
() =>
import(
/* webpackMode: 'lazy' */
'./embedIframe'
).then(({ embedIframe }) => embedIframe()),
{ priority: 'feature' },
);

void startup(
'relativeTime',
() =>
import(
/* webpackMode: 'lazy' */
'./relativeTime'
).then(({ relativeTime }) => relativeTime()),
{ priority: 'feature' },
);
void startup(
'newsletterEmbedIframe',
() =>
import(
/* webpackMode: 'lazy' */
'./newsletterEmbedIframe'
).then(({ newsletterEmbedIframe }) => newsletterEmbedIframe()),
{ priority: 'feature' },
);

void startup(
'initDiscussion',
() =>
import(
/* webpackMode: 'lazy' */
'./discussion'
).then(({ discussion }) => discussion()),
{ priority: 'feature' },
);
void startup(
'relativeTime',
() =>
import(
/* webpackMode: 'lazy' */
'./relativeTime'
).then(({ relativeTime }) => relativeTime()),
{ priority: 'feature' },
);

void startup(
'initDiscussion',
() =>
import(
/* webpackMode: 'lazy' */
'./discussion'
).then(({ discussion }) => discussion()),
{ priority: 'feature' },
);
})();

0 comments on commit b865fc1

Please # to comment.