0

I'm having a weird issue with my company's website. There is a blink when you load, with no CSS applied. I thought it just meant the CSS was delayed, but looking at the loading timeline:

Timeline of page load

It seems the CSS is applied, then after 400ms it stops being applied and then after ~500ms it is applied again.

I'm unable to see what could cause this kind of issue.

How to replicate:

Go to this site. Press Enter on the address bar (for some reason the problem doesn't appear when simply refreshing).

The problem appears only when cache is not disabled.

Replicated on Chrome and Firefox, doesn't seem to appear on Safari.

Doesn't appear when running as a localhost

Doesn't seem to be affected by presence/absence of adblockers

Community
  • 1
  • 1
Cristol.GdM
  • 505
  • 2
  • 5
  • 21

1 Answers1

0

Found a fix, still haven't found the reason.

The fix:

Move the CSS before the JS in the header. This shouldn't have an effect, but apparently it does in this situation.

The reason:

As far as I can tell, the problematic flow is the following:

1 - The browser gets the CSS from the cache and applies it

2 - The browser for some reason realizes it should use the header's CSS instead, and removes the cache CSS

3 - The scripts (mainly google analytics) delay the CSS loading enough that we can see a bit of no css website

Still don't understand point 2 at all, but the fix works. And I'm paid to make it work, not to understand it, so question closed.

Community
  • 1
  • 1
Cristol.GdM
  • 505
  • 2
  • 5
  • 21