<aside> 🧑‍🎓 The critical data is used for rendering FCP, eliminate or make critical requests early. More on these concepts can be read in following guides:

How to get FCP and LCP readings?

How to identify critical request chain?

</aside>

Preloading of critical data, can:

• Enable faster FCP by providing data to render page “instantly”
• Improve LCP by optimizing critical request chain

To visualize it, consider the following request chain (unoptimized):

Preloading critical data will have the following effect:

To achieve this effect, the following actions are required:

1. Expose minimal data in the HTML document

FCP happens too early to rely on data requested from JavaScript. Therefore, it is suggested to inline data required for FCP right into the HTML document, on server side.

<aside> 🧠 To get fast FCP reading, the display of simple, yet contentful page is required. Specifically, the display of placeholders for the desired page type, with some entity-relevant content. Therefore, it is crucial to detect which type of page is opened early. Knowing a page type, we can start loading necessary data to render it. The necessary data could be, for example:

• On product page: title to display on page, product id and sku to eliminate url rewrite
• On category page: title to display on page, category id to eliminate url rewrite
• CMS content to display on page, page id and identifier to eliminate url rewrite </aside>

The template used to generate HTML document on server side, is located in public folder, in Magento theme mode, the public/index.php template is used. Modify it, to get critical data early. The following code to be extended with additional data (in addition to already provided page type):

window.actionName = {
  type: `<?= $this->getAction(); ?>`
};

Modify it, to look as follows:

window.actionName = {
  type: `<?= $this->getAction(); ?>`,
  id: parseInt(`<?= $this->getId(); ?>`) || null,
  sku: `<?= $this->getSku(); ?>` || null,
  name: `<?= $this->getName(); ?>`,
  page: <?= json_encode($this->getPage()); ?> || {},
  identifier: `<?= $this->getIdentifier(); ?>`,
  description: `<?= $this->getDescription(); ?>`
};

<aside> 🧠 During development (or in storefront mode) the public/index.html template is used. Feel free to hardcode desired window.actionName values in it. The real data will be put into the actionName only when the application is ran in Magento theme mode.

</aside>

The context of this in this template, is defined in ScandiPWA\\Router\\Controller\\Pwa. The ScandiPWA\\Router\\Controller\\Router is matching routes and is capable of obtaining necessary entity details to output into the HTML document. To provide necessary data, add setters to Pwa controller and call them with corresponding data from Router controller.

• 👈 Click here to expand step-by-step instructions for task above