I’m in Wix Studio. I’m trying to improve mobile page speed by replacing the hero video on mobile with a static image. The Wix AI Chatbot keeps telling me to replace it, but then it removes the video from the larger break points. Then it tells me to duplicate the section and make the new section with the image and “Hide” the video section, but that keeps the video just hidden and still won’t improve my mobile page speed.
What am I missing? Can this be done?
Hi, @Gregg_Murray !!
Personally, I thought the second method you mentioned would work. Visually, it certainly seems possible. However, since you reported that the mobile loading speed doesn’t change, it might be that “hiding” an element doesn’t actually prevent it from being loaded on mobile. I used to think that setting something as hidden on a layer meant it wouldn’t be loaded at all, but if that’s not the case, then a different approach may be necessary. In that case, I think a simple code-based solution could work—for example, loading the video only on desktop and loading an image on all other devices. Something like this code might do the trick. 
import wixWindowFrontend from "wix-window-frontend";
$w.onReady(() => {
const formFactor = wixWindowFrontend.formFactor;
if (formFactor === "Desktop") {
$w("#yourSection").background.src = "wix:video://v1/...";
} else {
$w("#yourSection").background.src = "wix:image://v1/...";
}
});
One important point to note is that the URL you set for the section background must be an internal URL that starts with “wix:“, not an external URL that starts with “https://“. 
If you want to easily obtain this internal URL, you can first set a background image (or video) on the actual section in the Wix Studio Editor. Then, add some code like the example below and check the value in the console on your live site.
$w.onReady(() => {
console.log($w("#yourSection").background.src);
});
Make sure to save those two internal URLs. Once you have them, replace the values in the code I shared earlier, and the result should be that the video plays when opened on desktop, while the image displays on other devices.
I think it’s important to reduce the data size of the video beforehand. Personally, I recommend compressing it with the AV1 codec, since it gives you high quality while keeping the file size small.
Ugh. Thanks, onemore. That’s way above my head. I chose Wix so I didn’t have to code. I appreciate your input, though.
I’m sorry to hear that. But since it’s really just a matter of copying and pasting code, it’s almost like a bit of finger exercise. So if you ever have a day in your life when you’re at max power, give it a try then. 
Did the non-code approaches not work out? Hiding it in the editor didn’t actually improve the loading speed? Just to check, how large is that video file?
The hiding it in the editor didn’t work because even if the vid is hidden on mobile, it’s still being counted in the page speed. Vid is only 1.5MB . I’m not scared so much of the code, but it is many hours of understanding where the code goes, how I find external links for the image and the video, then can I have the image only appear on mobile, instead of how you mentioned of vid only showing on desktop. I kept hoping there was another, easier solution out there. If you have a moment and can answer those questions I just mentioned, I could probably get close enough to give it a shot without spending hours trying to figure it all out for a once-off situation. Any help you can give for me to give it a shot would be great. Thanks for taking the time you have.
Hi there, I completely understand your concern — replacing a hero video with a static image for mobile is one of the best ways to cut down load time, but the way it’s being handled right now is why you’re not seeing any real improvement.
Here’s what you’re missing and how you can fix it:
Hidden Sections Still Load in Wix Studio
When you simply duplicate the hero section and hide the video on mobile, Wix is only making it invisible on the screen. The problem is, the video file is still downloading in the background. That’s why your mobile page speed doesn’t improve — because your phone is still loading the heavy video even though you don’t see it
Use Conditional Display with Velo Code
To truly speed up your site, you need the video to not load at all on mobile. That’s where Velo code helps. With a few lines, you can tell Wix:
“If someone is on mobile → don’t load the video, only show an image.”
“If someone is on desktop → load the video, hide the image.”
Here’s the simple code for that:
import wixWindow from ‘wix-window’;
$w.onReady(function () {
if (wixWindow.formFactor === “Mobile”) {
$w("#heroVideo").collapse(); // Video won’t load
$w("#heroImage").expand(); // Show static image
} else {
$w("#heroVideo").expand(); // Show video
$w("#heroImage").collapse(); // Hide image
}
});
This way, on mobile the video is completely skipped, and your page loads much faster.
This way, the video is skipped entirely on mobile, and your image shows instantly.
Compress and Optimize the Static Image
Even though you’re replacing the video with an image, a big heavy image can also slow things down. The trick is to use a compressed, optimized image that still looks sharp but loads super quickly.
The easiest way is to use an app like Image Optimizer Pro https://www.wix.com/app-market/media-compressor in Wix — it shrinks file sizes automatically without losing quality. That way, your hero image won’t drag down speed.
Test and Validate
After making these changes, always test your site again (e.g., Google PageSpeed Insights). On mobile, you should notice a big improvement in loading time and especially the Largest Contentful Paint (LCP) score, since the static image will appear much faster than the video.
If you’d rather not spend too much time tweaking all the technical details (like scripts, caching, and background tasks), there’s also a Wix app called Website Speedy https://www.wix.com/app-market/web-solution/websitespeedy that can handle most of that automatically for you.It helps a lot of Wix users keep their sites consistently fast without any extra work
Hey Gregg, long time no see. I had some free time, so I did a test and it looks like using “Hide” from the Wix UI doesn’t load the video data. So just using the UI should be sufficient. Of course, the method shared by WebsiteSpeedy is also effective. The key point is to use collapse() rather than hide().
If you want to check it yourself, in Google Chrome you can open the Developer Console and look at the “Network” tab to see what data is being loaded—give it a try.