CodeinWP CodeinWP

Always Pre-Load Mandatory Content

Always Pre-Load Mandatory ContentThere 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.

Ad Overlay on

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.

Video Loading on

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.

3 Responses

  1. I totally agree with the article and with flash this shouldn’t be a problem;
    – load player + preload ad
    – play ad + preload content
    – play content

    In the upcoming era of HTML5 video it might become a problem, since you can easely just “remove” the ad layer. Although other technics should be used like dynamically attach ads to the content (server-side).

    • Yeah, it will be interesting to see how ad-driven video gets implemented with HTML5. Since video will be more directly part of the DOM, then obviously, that leaves it more open to manipulation on the client side through plugins and whatnot.

      That would be an interesting topic to write about once I have a better understanding of HTML5 audio/video. Thanks!

  2. djones says:

    I too, agree with this entry. Great points were made. I’d like to thank you for sharing it. Pre-loading content should be a must.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).