Display image as preloaded over hero video

Community resources
1

I’m currently experiencing an issue where my homepage is loading too slowly, and Google has flagging it as a “Poor URL.” While researching, I came across another website that appears to handle video loading more efficiently, which might help me address the problem.

Their approach seems to display an image first, with the video loading and starting a second later. From both a search engine and user perspective, the page appears to rendering quickly and smoothly. I also tested their page speed, and the performance is high.

Can something like this be achieved within Webflow natively? perhaps by adding a preloader or placeholder over the video? My first thought was to use a JavaScript event listener with a short timeout to hide the image and reveal the video after a second. However, that doesn’t feel like the most elegant solution. Any advice or better approaches would be greatly appreciated.

2

I’ve done some experiments here and it’s likely possible. Internally browsers have media events so you can tell when an image has loaded or when a video starts playing. You could build a “show an image then fade it out when the video starts”.

But honestly when I want video performance, I switch to streaming video. Check out Vidzflow, it has a free plan and supports background videos and full streaming, it might work better for you.