Brick loading sequence

[hannessolo]

We should attempt to load only the code necessary for the LCP until the LCP has been performed. This is approximated around 100kb.

To improve this we should load blocks in an order so that only the blocks needed for the LCP are loaded. This could be done:

1. in a model similar to franklin, loading 1 by 1 and executing as soon as ready
2. or we could first see which blocks are in the first section, load all blocks (with Promise.allSettled) and then execute them.

Background information about loading order in franklin:

The way this is done in Franklin with blocks is one-by-one blocks are loaded in order here https://github.com/adobe/aem-boilerplate/blob/efc82141de8092949e8ea3354649966cf200c2d8/scripts/aem.js#L570.

As soon as all blocks in a section are loaded, the section is unhidden (updateSectionStatus from here: https://github.com/adobe/aem-boilerplate/blob/efc82141de8092949e8ea3354649966cf200c2d8/scripts/aem.js#L602 -> https://github.com/adobe/aem-boilerplate/blob/efc82141de8092949e8ea3354649966cf200c2d8/scripts/aem.js#L504). So only the code for the first section is loaded before the LCP.

There is also waitForLCP. https://github.com/adobe/aem-boilerplate/blob/efc82141de8092949e8ea3354649966cf200c2d8/scripts/scripts.js#L83. This checks whether a) you have explicitly marked the first (it doesn't work if it's the second or nth) block as an LCP block, in which case it will be awaited, or b) it waits for the first image to load. This is to prioritise loading the first image (or something you as the developer marked as more important via LCPBlocks) over the next blocks. But the LCP will still not be shown until all blocks of the first section are loaded, and the section status is updated to show.