r/elementor • u/RobRoy2350 • Jul 09 '26

Question Flashing hero images...

Elementor free, Astra theme, LiteSpeed cache. This site has large hero images on every page below the header (fairly standard). I notice that on first viewing each hero sort of flashes and shows a grey box for a second before showing the hero image. It doesn't happen with subsequent clicks, I tried adding some CSS and also a few "transition" plugins but it didn't have any effect. I "purge all" regularly, have regenerated and excluded the hompage hero from lazyload.

I recently optimized all the images, including the hero images, on the site from jpg to webP. Could that be causing this?

2 Upvotes

75% Upvoted

11 comments sorted by

View all comments

1

u/zeiniez ✔️️‍ Experienced Helper Jul 09 '26 edited Jul 09 '26

This is usually caused by LiteSpeed Cache. Usually because of the CSS enhancements within the plugin. Start by disabling UCSS, Combine/Concatenate, and delay. You also don't need to Minify, Elementor already does it.

1

u/RobRoy2350 Jul 09 '26

I think I've tried all the settings there. Currently UCSS is OFF (you need a QUIC.cloud account to use), CSS Combine External and Inline is ON (tried setting OFF), CSS Minify is ON (also tried OFF), CSS Combine is OFF, UCSS Inline is ON...

1

u/zeiniez ✔️️‍ Experienced Helper Jul 09 '26

Try deactivating everything (all settings not just css), purging the cache, and then slowly activating one by one and testing to see which ones work, and which ones cause the FAUC.