aem-boilerplate icon indicating copy to clipboard operation
aem-boilerplate copied to clipboard

In very rare cases, header and footer loading can result in a FOUC

Open shsteimer opened this issue 6 months ago • 0 comments

Expected Behaviour

Header and Footer must be fully loaded before they are displayed

Actual Behaviour

In some rare cases, the header js can load and be executed before the css loads, leading to a FOUC. for the footer, this generally doesn't cause a problem as that is below the fold, but it can lead to CLS with the header

Reproduce Scenario (including but not limited to)

an example page speed report illustrating the problem https://pagespeed.web.dev/analysis/https-www-stewarttitle-co-uk-en/nxtbqg6bsh?form_factor=desktop

If you look at the desktop timeline images, you can see the header content come in unstyled, and then the styling loads after the fact.

Sample Code that illustrates the problem

in load block, the css and js promises are awaited together. For other blocks that are in sections, this is not a problem as they are shown only once all blocks in the section are loaded and the section is revealed, but need special handling for the header and footer to ensure the same thing happens there.

PR coming with a proposed solution.

shsteimer avatar Dec 07 '23 21:12 shsteimer