Mp4 and webm versions of my background video are both being loaded on my site

Design help General
1

My video is 3mb but in google page speed it shows my site is loading 6mb of video since both the mp4 and webm are loading. Is this normal?

All I did was use the webflow background video element and upload an mp4 video.

2

Browser support is the reason two are presented yet your browser will only load the one it does.

3

Hey thanks for the response!

The thing that’s throwing me off is one of my pages with a background video only has the mp4 version of the video loading, but the rest of the pages are loading both the mp4 and webm. As a result the network payload is nearly twice what it otherwise would be on those pages.

4

I was going to inspect the code on the published site and realized I can’t do that. No thing to look at.

5

Hi all,

We are encountering similar “issues” with the background video element.

We upload a video being 425 Ko in webm format. This vidéo is transcoded into a 3mb video by Webflow when uploading, and seems to be served twice according to Lighthouse when displaying the page. See image attached.

Capture d’écran 2021-12-17 à 18.35.22
Capture d’écran 2021-12-17 à 18.35.221890×530 77.3 KB

The result is a website asking for around 6Mb of videos when the initial one is 425Ko. Sam problem with .mp4 format as source video.

Anyone has an idea on how to solve this ?

Thanks a lot in advance,

guillaume

6

@Guillaume_Macherey - the browser will only load the video it supports, but not both. As for encoding size, not much you can do about that unless you host your own and load it with custom code.

7

Hi, thnaks for your reply.
It seems the online version of lightHouse is still buggy and indeed downloads all video formats instead of one (Google Pagespeed Insights downloading all video sources with different formats (Avoid enormous network payloads) · Issue #11413 · GoogleChrome/lighthouse · GitHub)

Regarding the transcoding issue: maybe webflow could skip transcoding in case of webm format as source vidĂ©o ? I go from 430Ko webm video to a duo of 3Mb mp4+Webm videos
 Or offer the ability to upload two sources for browser compatibility ? In the meantime I’ll try my own code, let’s see.

Also one last question : we are trying to have two videos : one for desktop and one for mobile. So we put two background video components, the first one with “large” video, hidden in mobile, the second one with small video, hidden in desktop.
But lightHouse shows that the video is downloaded 4 times (twice for desktop, twice for mobile): so basically for mobile and desktop even if we are testing only for desktop. Do you know why ? Is webflow really delivering videos for both desktop and mobile even if we are hiding the component in mobile, or is it just the lightHouse test ?

Thanks again,

Guillaume

1 Like
8

Did you look at your field data (in Google Search Console)? Does this appear there, too?

9

Is this for test data (Lighthouse or PageSpeed Insights) or field data (Google Search Console)? That would help understand the issue.

10

Dear Guillaume,

Chiming in a bit late to the party, I am interested wheter you found a solution for either one of your problems as I am in the exact same situation with the webm compression issue and the idea to serve desktop and mobile.

Thank you so much for your answer! kordial,
Damian