FOUC on 'No Throttled' condition?

[jasonmevius]

FOUC on 'No Throttled' condition?

[c-vetter]

Hi Jason 🙂
Thank you for setting aside a page to investigate the issue, that's really helpful 👍

Regarding your FOUC: I could reproduce it unreliably. What I could see, however, is this: When throttling to GPRS, your main assets load in this order:

• combined.css
• jquery.js
• grouped.js

Without throttling, the order is such:

• jquery.js
• grouped.js
• combined.css

I could even observe combined.css getting loaded after the document's load event.

So, it looks like you trigger the transition from spinner to normal view in grouped.js before combined.css has finished loading, which will cause a FOUC. This is no bug in loadCSS, which looks to be working fine.

You have several options:

• make your script aware of your stylesheet's load-completion
• extent your <style> to include the critical styles for l-wrapper
• load the stylesheet synchronously
• inline all your styles

Seeing as you have a one-pager here, I'd just inline your stylesheets. That way you prevent any FOUC, have one less HTTP request, and can leave out the loadCSS overhead.

Hope this helps 🙂👍

---

By the way: I'd also hide l-wrapper in such a way that the page doesn't scroll until page-loader is removed. Alternatively, make page-loader position: fixed instead of position: absolute.

[jasonmevius]

Thank you so much for the insightful feedback. I'm investigating now and may come back with follow-up questions. Greatly appreciated!