Load Blocks concurrently in aem.js?

[mind-adobe]

In aem.js in the loadSection function the blocks are loaded one after the other :

async function loadSection(section, loadCallback) {
...
    for (let i = 0; i < blocks.length; i += 1) {
      await loadBlock(blocks[i]);
    }
...
  }
}

Wouldn't it be better to load them concurrently with a Promise.all(blocks.map(loadBlock)) call since their state is independent from one another? Are there performance concerns that I am missing like bandwidth?

CC: @dicagno @buuhuu

[kptdobe]

This has been raised multiple times (see https://github.com/adobe/aem-boilerplate/pull/125/files/cc939a5bf8a51d67df392f989d36762654d13f32#r991731557). I have also tested the Promise.all version 2 or 3 times and, so far, we could not prove any significant performance gain.

Intuitively, you also want the blocks to be loaded "in the sequence of appearance". This might lead to show some block at the bottom if first blocks are slower and if the overall display logic is not properly handled. And it brings some "a-synchronousness" complexity that the block developer would need to be aware of: if 2 blocks relies on an async singleton - like it makes a request (typically placeholder or metadata loading), the singleton needs to be properly implemented so that you do not make the init request multiple times. Nothing a good developer cannot solve but just an unnecessary overhead for no performance gain.