WebPagetest Forums

Full Version: Huge video - Slow loading time
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Dear All,

I have a website that although it is pretty light & optimized, it contains a video that it loads/plays straight ahead.

As you can understand, based on webpagetest, its document complete time is 3 seconds but document fully loaded time is 21 seconds.

What can i do to optimize document fully loaded time as well?
Can i do anything or as long as it loads then the time will be dependent on the file size of the video?

Thanks in advance.
Steve
I guess the best solution is to add an image & to load the video when i click it. What do you think?
Any chance for a faster loading without adding an image?

Thanks in advance.
Steve
I'd strongly encourage not setting the video to autoplay. Most players have an option for a static image that they can display until the user clicks to play (you don't need to manually load your own image and trigger the playback, it is supported by most players out of the box). My suggestion isn't just because of performance reasons but for user experience. If a user loads your page in a background tab then the video will start playing before they even actually look at the page. Users on metered connections will also have to pay for the bandwidth of the video as well.

If you do need to keep the video as an autoplay video, you can look to see if your player supports buffering only part of the video and using byte ranges. That way it will only download the first part of the video and it will download more as needed.
Dear Patrick,

Thank you so much for your prompt response.

I absolutely agree with all of your comments.

You rock.

Thanks once again.

Regards,
Steve
If it's absolutely necessary to load the video immediately (e.g. to get attention for the video), then load it after the Load Event.

Using jQuery on our website you can see on http://www.finanznachrichten.de in the footer that we load e.g. the ticker in the navigation area after the load event:
---
<script type="text/javascript">/*<![CDATA[*/$(window).load(function(){$('#fn-mc').load('/h/hauptmenue');$('#sb-adhoc-mrq-sp').load('/h/adhocticker');});/* ]]> */</script>
---

This is relatively easy to implement.
Thanks Markus.

Smart idea.

Regards,
Steve
Reference URL's