Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
shsteimer opened this issue Dec 7, 2023 · 0 comments · May be fixed by #305
Open

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

shsteimer opened this issue Dec 7, 2023 · 0 comments · May be fixed by #305

Comments

@shsteimer
Copy link

shsteimer commented Dec 7, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant