Archived topic
Website temporarily shows old colour scheme while loading
4 replies · Started by Jacob on March 17, 2023
I'm using GeneratePress with the Scribe website template. I've done lots of editing to this default template, including changing the default colour scheme.
The problem is, when I load the website, for the half a second or so while it loads, it displays the default (purple) colour scheme, then switches to the one that I've changed it to after loading.
I can't find any remnant of the old colour scheme in the settings. The Footer and Header element backgrounds are set to the correct colour, and all colours are set correctly in site customisation. And yet when a browser with a clear cache loads the website for the first time, the header and footer display as purple.
I've cleared my browser cache, and I've cleared the web cache via my host's cache clear options, and this hasn't fixed the issue. Any idea what could be causing this?
[Edit]
I should note that Page Speed Insights picks this up, too. It shows that there's a problem with "Cumulative Layout Shift" on Desktop (but not on mobile). The thumbnail that it picks for the site is also of the original colours.
[Edit 2]
I'm using LiteSpeed Cache plugin, and it's set to the Aggressive preset. Could this be the issue? If so, do you know which LiteSpeed settings are likely causing the issue?
Hi there,
it will be a caching issue, the Litespeed cache has saved the old CSS in its critical CSS. That needs refreshing.
Hi David,
Unfortunately, I just cleared the LS Cache (via 'Purge All' from the drop-down menu on the WP admin bar) and also cleared the 'object' and 'web' cache via the host control panel, and the problem is still occurring - it's showing the footer/buttons/etc. as purple for half a second, and Page Speed Insights still says there's Cumulative Layout Shift.
[Edit]
I also just found the 'Purge Critical CSS' option in LSCache, and unfortunately purging in this way didn't fix the issue, either. In case it's relevant, "CSS Combine", "CSS Combine External and Inline", "Load CSS Asynchronously" are turned off.
Hi David,
It did in fact fix the issue. 'Purge All' doesn't purge critical CSS. I found the setting to purge critical CSS, and then I just had to clear the web/object cache on the host side of things, which seems to have fixed it. Thanks for the help!
Glad to be of help!
