Always Pre-Load Mandatory Content

There are some cases during the user experience where preloading content is not a good idea.

For example, if the user is faced with multiple options as to what content he will choose, then it would not be a good decision to preload all content. This would add unnecessary HTTP requests and bandwidth for both client and server, and would degrade the user experience.

But in other cases, using JavaScript (or some other means) to preload video or images is the right choice, because of the path the user has chosen to take. The website for Major League Baseball has a video page that I think could benefit from this kind of improvement.

An Ad Appears Before the Video Plays

The problem arises when you select a video to view. At random times while switching between videos, an advertisement will appear in place of the video, with a friendly message that informs you that your chosen video will play in x number of seconds, as indicated in the image below. This is common on video content sites, and I’m sure most of you have seen something similar.

I have no problem with advertising online, and I fully support websites that elegantly and appropriately “monetize” their content.

Video Still Loading After the Ad Finishes

But in this case, the ad causes a delay that makes the waiting for the video even worse than it actually is. Even though I’ve waited 15 or more seconds for an ad to play, after the video appears I have to wait an additional 10 or more seconds for the video to finish loading before I can comfortably start watching it.

You’re probably thinking “You can still watch the video while it loads, so what’s the big deal?” Well, in this case it’s a sports video with fast-paced action, so smooth playback is crucial to the experience. Unfortunately, on the MLB website there’s always a really annoying and choppy delay in the video playback at the end of the load time, requiring me to move the scrubber back to the start so I can view it again without the choppy playback.

In the case of the MLB videos, the video advertisement is playing in place of the chosen video, and when it finishes, the chosen video replaces the ad. So it probably would not be possible to pre-load the video with this setup. But I can’t imagine it would be too difficult instead to do the following:

• Load the chosen video normally, but don’t autoplay it;
• As it’s loading, display an overlay that shows the video advert;
• Make sure there’s no way for the ad to be cancelled early (because that’s obviously how they want it);
• When the ad is finished, close the overlay and trigger the play button via JavaScript

I think that’s a much better solution, and will prevent the videos from becoming interrupted by the load times and choppy playback. And this would especially be helpful for those with slower internet connections (although that’s becoming less and less of a problem nowadays).

The Lesson Learned

Of course, I don’t know all the details behind how the MLB video system works, and what is practical (or even possible) in that regard. But I think this is a good lesson for content creators and web developers to, wherever possible, make sure any mandatory content is pre-loaded during any wait times, to ensure a smoother experience for the user.

As mentioned, there are cases where it would be wrong to pre-load content. For example, if a user is viewing a thumbnail gallery of images, you would not want to pre-load all the large versions of the images. You don’t know which images the user will choose, so that would not qualify as mandatory content.

There are, however, some cases in a user’s visit where you know what’s coming next (as in the case of an advert playing while waiting to view a video), so the content becomes mandatory by user choice (even thought that sounds a bit paradoxical). In those instances, the content should be preloaded to avoid further wait times and improve the user experience.