You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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.
The text was updated successfully, but these errors were encountered:
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.
The text was updated successfully, but these errors were encountered: