WebPageTest returning horrible results with video tag

JavaScript
1

Hi there,

I am including a video in my home page. The speed index on Webpagetest.org after the video has been uploaded is horrible, over 20000. I was wondering what would be the correct way to include video to speed up rendering? Airbnb for example also has HTML5 video on their home page but their speed index is still 2000 or so which is fine.

I am including the video like this:

<video autoplay="autoplay" id="video" poster="img/videos/hero_video.jpg">
 <source src="img/videos/hero_video.mp4" type="video/mp4" />
 <source src="img/videos/hero_video.ogv" type="video/ogg" />
 <source src="img/videos/hero_video.webm" type="video/webm" />
</video>
2

I believe the airbnb has a dynamic video background in their hero slot. Is that what you mean?
seeing a live url might be more helpfull but was wondering if it could be your connection?
D

3

@pdxSherpa thanks for trying to help. Unfortunately I can’t share the link for the site but there is no need, it’s not about the site itself but the video script tag which messes up speed results. I made a demo with same code as in my first post , http://zerobrainwash.com/sandbox/video/ , and the results from that page are http://www.webpagetest.org/result/141003_J6_AH7/1/details/ .

I have also uploaded the airbnb’s code for reference, they are using the same code as mine. If by dynamic video background you mean have video in background CSS property, such thing does not exist. .

Looking through airbnb’s code and trying to understand what’s their secret sauce, I realized they use preload attribute. So I tried that, meaning that the video starts loading only after everything else has executed and was loaded, that should fix it then, right? Still no.

Here are my experiment results:

All three produce practically the same results. Now look at Airbnb results, it’s like black magic:

Interestingly enough, their home page had produced better speed index when I tried earlier, around 18000. Also, I checked their video, maybe that’s what it all comes down to, the video itself but their video is even longer and bigger than the one in my demo.

4

I have been experimenting with videos and curious to know the loading time for the following URL
http://www.johns-jokes.com/videos

5

@John_Betong these are not videos hosted by you and they are not supposed to autoplay like on my page to achieve a video background effect like Airbnb for example. Thus it’s irrelevant to the topic, if you are curious, go to webpagetest.org and test it, it’s a free tool. Here, I did it for you, the results are on this link - http://www.webpagetest.org/result/141003_M7_EQ1/. As expected, speed index is fine because none of the videos are auto loaded whilst opening the page. How the videos perform themselves are out of control since they are hosted by Youtube.

6

Maybe it is a slow hosting problem. You can remove image loading by the way.

8