Video has become an important tool in the marketers’ tool box. Video storytelling is a useful and increasingly popular way to engage customers.

But if your video doesn’t work properly or cripples your website or app performance it will become a major frustration to customers, marketers and techies alike.

In the previous two parts of this column on data and download speed and autoplay and audio we learned:

• Video dominates mobile data traffic
• When implemented correctly, mobile video should not impact the speed that pages load on a mobile device
• Mobile users start to become impatient after waiting just two seconds for a video to load; by 10 seconds a fifth will have given up.

This column will explore how to detect, avoid and remedy issues with videos to give your viewers the best possible experience with your video content and keep them engaged and watching your videos.

Jump to:

How to detect problems with video
How to avoid problems with video
How to remedy problems with video

How to detect problems with video

Detecting issues with video, audio or any other web or app issue a) can be straightforward; b) should be everyone’s responsibility, from the CEO down; and c) helps to keep agencies, techies and marketers on their toes.

1. Use it

Blatantly obvious – but when was the last time you checked out your site and videos from a bus, train or bar? Incentivize employees to use the site/app (during beta testing and routinely after goes live) and report issues and suggest improvements.

Check for:

• How quickly did the site/page load? (Count the seconds)
• How long did you have to wait for the video to start?
• How good is the quality?
• Does it stall / (re) buffer during playback?
• Was it worth watching/watching to the end?
• How do you feel about these conclusions?

2. User test it

Recruit customers and monitor their behavior and reactions as they use your web site, using different devices, networks and locations. Score against the above checklist. If this cannot be conducted in person use a remote service such as UserTesting.com.

User testing should occur at each stage of the development process. For more on why user testing is so crucial, see my previous column for our sister site ClickZ on Why user testing should be at the forefront of mobile development.

3. Test it

There are different types of testing, including:

• Page performance – tools such as WebPageTest (free) show how/if the video is impacting how fast the page loads. It shouldn’t. The image below shows the WebPageTest results for how quickly Sam Dutton’s mobile video explainer on YouTube loads on a mobile device. The page took 6.6 seconds to load 809kB.
• A/B testing – tests alternative experiences with different groups of web (or app) visitors. For example, test hosting the video on the homepage versus on a dedicated page.
• Video testing tools – AT&T’s Video Optimizer (formerly known as Application Resource Optimizer) is a free-to-download tool used by developers (requires technical knowledge) to detect issues such as delays with start-up and the frequency and duration of stalls and optimum segment size.

4. Monitor it

• Web analytics tools, such as Google Analytics, track visitor engagement with video – e.g. number of views, who viewed, how long, and with the webpage itself, including dwell time and bounce rate. See this introduction to using GA to assess video engagement.
• Heat map tools, such as Clicktale and Crazyegg provide a visual representation of how users interact, or attempt to interact, with webpages and video.

How to avoid problems with video

Following best practices while creating/producing the video or coding the page, website or app that will host it should help avoid many of the common issues – videos that won’t play, are slow to play, or have broken playback.

Industry guidelines on mobile video are thin on the ground, considering the increasing popularity of the format. What guidance is available tends to be a bit techie and thus a turn off for non-techies.

The following recommendations have been compiled with the help of:

• Doug Sillars, Principal Architect, Mobile Application Performance, AT&T
• Usha Andra, Senior VNI Analyst, Cisco
• Rick Viscomi, HTTP Archive project leader, Developer Advocate, Google
• Ramesh Sitaraman, Professor of Computer Science, UMass, Amherst
• Sam Dutton, a Developer Advocate at Google.

1. Make it worth it

There are many costs involved with video/audio:

• For the producer: the cost of production and distribution; impact on web performance
• For the network: the impact of network congestion
• For the viewer, in terms of data consumption, battery life and time it takes to consume.

This makes it imperative that the video is meeting a known user need, contains quality content, is the right length, optimized in terms of bitrate, segments and compression.

2. Be aware: video is greedy; HD greedier; 4K much greedier

When it comes to bandwidth, standard video is greedy, requiring 0.5 Megabits per second (Mbps); high definition (HD) is five times as greedy as SD; and 4K is 30 times as greedy.

Cisco’s Usha Andra explains:

“Mobile video and multimedia applications have higher bandwidth and lower latency requirements than non-video applications. The requirements can range from a low of 0.5Mbps for standard definition (SD) to 2.5Mbps for high definition (HD) and over 15Mbps for 4K/ultra-high definition (UHD) downloads and much higher for virtual reality (VR). Latency requirements can range from 100 milliseconds (ms) to 15ms for UHD VR video applications.”

3. Know the limitations of mobile networks in your target markets

Even among developed telecoms markets, the capability of mobile networks varies considerably. Check the Cisco GCI Global Cloud Readiness Tool for an averages of each country.

The stats suggest that download speeds in the US and UK are 40% lower than Norway and South Korea, and 25% lower than Canada:

• South Korea – download: 31.0Mbps; upload: 14.3Mbps; latency: 68ms
• Norway – download: 29.1Mbps; upload: 11.6Mbps; latency: 40ms
• Canada – download: 24.2Mbps; upload: 9.0Mbps; latency: 51ms
• UK – download: 18.2Mbps; upload: 8.0Mbps; latency: 55ms
• US – download: 17.1Mbps; upload: 10.0Mbps; latency: 88ms.

Usha Andra adds:

“Please note that these are average speeds and latencies, which means many users experience higher or lower speeds compared to the average speeds. When the speeds and latencies are lower than what an application warrants, the end user experiences delay in video, garbled audio, etc.”

4. Home page or own page?

Few of the most popular sites, including those that have a strong video focus – YouTube, Vimeo, BBC and CNN – host videos on the homepage or category pages. These sites promote their videos on the homepage as image links (often with play button icon overlaid) and text links, which when clicked or tapped go to a page dedicated to that video.

Why? Keeping video off the homepage keeps it leaner and faster to load on mobile devices. See the Twitch example below.

5. Avoid autoplay

Forcing mobile web visitors to view video whether they want to or not, is:

• Frustrating for the customer (especially when it happens in a quiet environment)
• Prone to using up the customer’s bandwidth and battery life unnecessarily
• Liable to slow down how quickly the page loads
• Contrary to accessibility best practice (as it can interfere with the screen readers used by visually impaired people)
• A common technique for artificially inflating video view stats.

There is a (vaguely plausible) argument that sites such as YouTube are an exception to the no autoplay rule. As the visitor is clicking through to the video on a dedicated page it is implicit that they intend to watch.

Consider Twitch, the surprisingly popular site where fans watch gamers playing video games live, captured in the image below. On the desktop homepage, Twitch.tv has a live game on autoplay, while on m.Twitch.tv, there are no videos hosted on the homepage.

Comparing the download size and page speed of Twitch homepage when downloaded to a mobile and desktop device on HTTP Archive (April 15 2017) delivers dramatic results:

• Mobile homepage (with no video) took 5.8 seconds to load 354kB of data over 24 requests
• Desktop homepage took 19.9 seconds to load 16,255kB of data over 275 requests. Of that, 11,827kB is video content.

6. Viewer experience (VX) and choice

Make sure the video and host page is intuitive. Let the viewer take control. Make it easy to:

• Choose video quality – low quality, HD or 4K
• Select and exit full-screen view
• Change device orientation change
• View and operate. Ensure the video fits the device screen and that buttons are intuitive
• Allow playback when the device is offline.

7. Make the video accessible

To make video/audio accessible for:

• Visually impaired people, provide a written transcript of the audio.
• People with hearing impairments, provide subtitles.

For more advice on making mobile content accessible to a wide audience, the BBC Mobile Accessibility Guidelines are an excellent resource.

8. Minimize video start-up delay

The delay to start-up is caused by two essential processes:

1. The authentication process (including digital rights management).
2. The downloading of the video. Video files are subdivided into segments. A sufficient number of segments need to be downloaded to the buffer (temporary store on the client device), before the video starts to play.

A delay is inevitable, but the video should be optimized to ensure delays are kept to a minimum.

As can be seen from the 2016 data from Conviva study below, videos tend to take longer to start on mobile devices, both on WIFI and Cellular, than Tablet or Desktop. It’s no coincidence that mobile has the highest proportion of exits per attempt.

9. Keep the user informed

While the authentication, downloading and (re) buffering occurs, tell the user what is happening and/or distract them. Watching a spinning wheel icon can be frustrating.

10. Minimize video stalls

Stalls occur when too few video segments stored in the buffer to allow playback to continue. The video will not continue until sufficient segments have been downloaded (called re-buffering).

The key is to find balance between slow start and stalling, says AT&T’s Doug Sillars:

“The 2 biggest metrics for video are:

1. Startup delay (how long from click to stream).
2. Stalls (video stops, maybe a spinner).

These are (of course) interrelated.  If you startup too quickly – there will not be enough video stored locally on the device… and you might get a stall.  Or you can take too much data at the start (long startup delay), but have no stalls later.

There is a magic “Goldilocks” point in the middle – not too hot, not too cold – that balances the two factors.” 

11. Optimize bitrate, compression and segment size

Optimize bitrate, compression and segment size for the device and network connection.

• Re-buffering typically occurs where the video is played at a speed, measured in bitrates (bits per second), that is too fast for the download speed (bitrate) of the network connection, so the buffer is emptied quicker than it is being filled.
• Digital videos are divided into files, called segments, of 2 to 10 seconds, which are downloaded to the buffer and then played in order. Segments of optimum size for the connection will download, buffer and play faster.
• A Codec (coder/decoder) is a tool for compressing and decompressing audio and video files. There are a number of different compression formats, e.g. MPEG-4, each with pros and cons. Different video quality and the client device/connection will influence choice of format.

12. Use adaptive bitrates.

Adaptive bitrate streaming creates and stores digital video at a number of different quality/speeds/bitrates. The video player on the client device requests the most appropriate of these based on a) network speed, b) device capability, and c) capacity of the buffer.

There are two types of adaptive streaming, DASH and HLS, because one industry standard that worked on all devices would be just too easy (find out more here).

13. Use a content delivery network (CDN)

A content delivery network speeds up how quickly web media, including video loads and plays on a mobile device by reducing the that the video has to travel between the original web server – e.g. your webserver in California, USA and a viewer in Timbuktu in Mali – by replicating and storing the video on servers around the world.

According to BuiltWith, 53.8% of the top 10k websites use CDNs.

Akamai Edge, which was one of the original CDNs, founded in 1999, remains one of the most popular. According to BuiltWith, Akamai is used by 11.4% of the top 10,000 sites, followed by Amazon CloudFront at 4% and MaxCDN at 1.3%.

14. Host or embed?

Hosting websites on a third party network, and embedding the file, removes several headaches, including video compression, adaptive bitrates and engaging a CDN. This helps to explain why 15.2% of top 10k websites embed YouTube videos and 3.6% Vimeo, according to BuiltWith.

How to remedy problems with video / audio

1. Page weight or load speed issues.

Regularly check the key pages using a testing tool such as WebPageTest (this is the tool used by HTTP Archive).

If this highlights issues of excessive page weight, slow download speed, and it appears that video is a contributing factor (rather than oversized images or inefficient use of JavaScript), the options are:

• Kill autoplay
• Ensure the video is not preventing the page loading correctly
• Move the video to a dedicated page (with a prominent picture and text link)
• Use A/B testing to verify if this solves the issue.

2. Video fails or is slow to start or stalls during play

If the video performance is an issue, here are some troubleshooting tips to try:

• Try loading the video to a dedicated video service such as Vimeo or YouTube. Compare the performance of the video on the third-party site, embedded on your site and with the self-hosted version to highlight if problems lie with the video, as opposed to the website, webserver or CDN (or lack of CDN)
• Test the video with a tool such as AT&T’s Video Optimizer (requires development skills) to detect issues with video segmentation, compression, buffering etc. and fix them
• Have the video re-edited to make it more concise; and optimized to improve bitrate and compression
• Use or replace the CDN.

If video performs better on some devices and over different connections e.g. PC on cable versus smartphone on 3G:

• Prepare a number of versions of the video in different formats, with different quality, bitrates and compression to suit the most common scenarios of device and network type
• Use device detection to discover the client device, its capabilities and the type of connection to serve the most appropriate version of the video
• Use adaptive bitrates.

Resources (and sources)

These resources are aimed at developers, but are useful for all (if you ignore the techie bits):

• BBC’s Mobile Accessibility Guidelines (best resource on mobile accessibility).
• AT&T’s best practices for mobile video
• Sam Dutton’s mobile video explainer (video)
• Sam Dutton’s guide to video web fundamentals
• François Beaufort’s guide to Mobile Web Video Playback

This is Part 3 of a series looking at how video impacts mobile web performance and UX. Read the previous installments:

• How video impacts mobile web performance and UX, part 1: data and download speed
• How video impacts mobile web performance and UX, part 2: autoplay and audio