Issues with FOUC

[floral steppe]

I've built a website using the Astro framework.
url: https://www.mordecai-law.com/
Github: https://github.com/Albertyhu/eli-mordecai

Issues with FOUC appears when clicking from the home page to the inner pages and vice versa.
This likely happens on Chrome.

Check the video below to see what I am describing:
Library | Loom - 27 June 2024 - Watch Video

I did disable View Transitions, but that did not solve the problem.

I submitted my issue to With-Astro on Github last week, but it hasn't received a response yet.

https://github.com/withastro/astro/issues/11368

So, I thought I bring my issue here to see if I can get any help.

[wide bison]

do you mean with the font? it didn't seem to load on the first page view but then is there on subsequent ones.
one thought was the ttf you're using (vs. woff) but that was a wild guess i ran by claude:

[floral steppe]

I suspect it's an issue with the font.

[wide bison]

what happens if you have a default websafe font? if the issue goes away, that's a worthwhile path to explore.

(like first confirm that's the issue... then experiment with getting a working nice font)

[floral steppe]

So, I spent time implementing your suggestions, but the website still has the FOUC issue.

I changed the font types to .woff2.
I changed all the fonts on the website to a web safe font such as 'sans-serif'.
See the loom video here where I throttled the site to make the FOUC more apparent: https://www.loom.com/share/bec44f53af9c466c97df67166119d5c3?sid=0e20b2c8-c929-4af6-863c-8a5f18c1424b

Both methods did not correct the issue.

[wide bison]

strange. the white background in the loom is not what i see when i visit your url:
looks quite good for me.

and fonts are now stable too...

if you try in a different browser on the same computer, do you get a better result?

[floral steppe]

Perhaps, I had to clear the cache. It is very prevalent in Chrome.

The FOUC is noticeable when you throttle the connection using developer tools.

It happens when you switch from home page to any of the inner pages, and vice versa.

[floral steppe]

I found that the issue is prevalent on Chrome and Opera browser, but not too prevalent in Firefox or Microsoft Edge.

[wide bison]

oh in chrome on slow 3g with no cache i see what you mean.
that white background is loading probably before the site renders with the darker colour. it may be improved by adding the colour to body

[patent bison]

For future reference: most styling issues revolving loading (including fouc), you can use Google's pagespeed insights to diagnose stuff. It will show which parts take a longer time to load and that is usually what would be causing things like fouc.

[floral steppe]

I added a darker background color to body. The FOUC isn't as noticeable as before, but it is a band aid solution. My concern is that because the black text initially blends in with the background color, would this cause Google to penalize the site for thinking that I am trying to hide text in the background?