A month or so ago I added a video to my site through Vimeo, which has more or less doubled the page load time of my site. I’ve looked at this on various sites like Pingdom where you can check the process of how a page opens and the delay is down to callouts made by Vimeo at time of page loading, even though I don’t have it set up to play the video automatically.
Is there a way to delay those scripts through RW so they don’t kick in until the play button is pressed? There is a WordPress plugin that appears to achieve this goal and it would be good if we could do the same thing in RW. I am using Foundation. http://tidyrepo.com/lazy-load-videos/
I had the same problem with Vimeo and simply stopped using it as it was too much hassle. I switched over to the Goldfish stack, which is an HTML 5 video player and it works well.
I seriously considered the Goldfish stack but went with Vimeo because I see big jumps in traffic at times when large newsletters go out and I was concerned that hosting the videos on my own site might slow things down but of of course I didn’t know that Vimeo itself would be slowing every site visitor.
I am amazed that more people are not shouting about this because it can negatively affect sales and search ranking. I use CloudFlare that caches images, fonts and PDF files etc but not video so if I hosted myself it would all be coming from my server. Perhaps it would manage fine but it’s very difficult to test in advance.
I may be remembering some of the details wrong, but a product like TopBox starts loading the video once the relevant button is clicked to open the top box/lightbox. This means I can put several videos on a page and the page loads very quickly.
However, if you are only putting one/two videos on a page and you don’t want to use a lightbox then I don’t think the difference in page load will make much of a practical difference to users. But there are design considerations also. If the video is at the top of the page then the page load difference becomes more obvious, but if there’s text/images that load quickly first then people won’t notice the difference as they have to scroll down to see the video.
So part of the question is how many videos are you trying to load on one of these pages?
It’s just one HD video about a minute long near the bottom of the page. Once the page has opened the video plays well so it’s not all bad by any means with Vimeo, however callouts to their servers that slow down page loading are a pain, especially since they seem to be related to analytics rather than anything useful.
I get that Vimeo takes much longer to load relative to other components. That’s obvious from your visual. But does it take long in any practical sense? E.g. if the short bars are for 0.1 second and the long bar is for 1.5 seconds, and the video is at the bottom of the page, then it’s hard to see how this has any practical negative impact on the user experience.
Also here’s a page that gives an example of using TopBox. There are 8 Vimeos on the page, but it all loads super fast. Of course, when you click on the relevant button it then begins to load the video. Here’s the link: http://mathewmitchell.net/tutorials/omnigraffle/
The advantage of loading when pressing a button is the user knows exactly what’s going on (It actually says “loading now” or something similar).
I think you are right about the call outs and analytics. If you find some way around that callout then let me and us know! But the disadvantages of hosting videos yourself relative to a company that knows how to do it well are much more of a problem. (I often have videos that are 5 to 15 minutes long so this may be a bigger problem for me than you).
That web page was certainly fast loading. In my case page loading became visibly slower the moment I added Vimeo. Previously I worked really hard to make my site load quickly and spent months making small tweaks for marginal gains that really added up to make a big difference.
Obviously there were differences in speed depending on the location of the visitor but anywhere in Europe or the US was super fast and generally the blink of an eye. Australia was the slowest and that was taking just under a second but now it’s more like 4 seconds and closer to home seems like 2+ seconds now.
It looks like TopBox does a good job of lazy loading these scripts and making the page loading faster but I would want this to work without the modal window so it just appears normally on the page. The screenshot shows how fast my site was before adding Vimeo and I’ve trimmed about 200k of weight since then along with other enhancements. Perhaps the developer of TopBox could offer a solution.
You’ve done a great job. Will Woodgate makes TopBox so I’d contact him directly about possible workarounds. If he does have a non-modal solution let the rest of us know! You can find him at willwoodgate.com (amongst other addresses such as stacks4stacks.com)
I’ll send Will an email tomorrow and see if he has any ideas. I agree that hosting videos yourself can create problems but these kind of page loading delays with Vimeo and presumably other similar services really need to be resolved.
What I would ideally like to see is some sort of invisible stack or coding that allows for lazy loading of scripts but doesn’t affect the appearance of my web page.
Got it. I have heard (I think on these discussions boards somewhere) a stack that lets you place a poster image, then when you click the video begins. So initial load is much quicker. Then the normal load time occurs once the play button is pressed. That might also be a Will stack: but I could be wrong.
At the time I read about this approach I was too busy to play around with it (web design is not my “day job”) so I never followed through. But it seems this could be an ideal approach. In fact it may be one way to set up the Player stack (see https://stacks4stacks.com/player/), but I’m not positive about that.
