<aside> 🧑‍🎓 This guide refers to critical request chains and critical rendering path. Refer to these guide to learn how to identify them!

How to identify critical rendering path?

How to identify critical request chain?

</aside>

For most pages, the critical content of that page is coming from a unique content of that page, for example:

• The LCP element of PLP could be the third product image
• The LCP element of a homepage could be the slider

The header, footer, and other miscellaneous components are never critical therefore, they should be deprioritized. By default, these non-critical components are loaded along side the critical request chain:

Together with page appearance in browser, it might look like this:

The goal of non-critical request de-prioritization is to move non-critical requests made during the critical request chain load to after the critical request chain load. Note, the LCP element rendering happening earlier, due to more resources (bandwidth) available for critical request chain to execute:

To achieve it, the following actions are required:

1. Hard-code the default window.actionName value

By default (in Magento mode), ScandiPWA sets the window.actionName.type to determine the page type in HTML entry-point. In production, this entry-point is public/index.php. In development, the public/index.html is used.

It is recommended to hard-code the window.actionName default value for development. To do it, fully override (copy the original content) the public/index.html and add the following script into it:

window.actionName = {
	type: 'CATEGORY' // <- set the type, based on the page your are looking at
};

2. Set a default flag value, based on page type

Completely override (copy it’s original content) the entry-point (src/index.js), add the preload detection logic before the app is rendered:

/* eslint-disable simple-import-sort/sort */

import 'Util/Polyfill';
import 'Style/main';

import { render } from 'react-dom';

import App from 'Component/App';

// vvv add this section
export const isPriorityLoadedByDefault = (
    window.actionName?.type !== 'CATEGORY'
    && window.actionName?.type !== 'PRODUCT'
    && window.actionName?.type !== 'CMS_PAGE'
		// Additional page types that need deprioritizing can be added here
);

// vvv Set to false, aka. make app wait for priority load ONLY for given pages
window.isPriorityLoaded = isPriorityLoadedByDefault;
// ^^^ end of added section

// let's register service-worker
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        const swUrl = '/service-worker.js';
        navigator.serviceWorker.register(swUrl, { scope: '/' });
    });
}

render(<App />, document.getElementById('root'));