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 column 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.
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. See this column on user testing mobile sites/apps.
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 / app that will host it should help avoid many of the common issues i.e.: won’t play, slow to play, 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, is 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, is contains quality content, is 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:
“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/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).
- Uses up the customer’s bandwidth and battery life unnecessarily.
- Can slow down how quickly the page loads.
- Is 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. 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.
- Read the BBC Mobile Accessibility Guidelines (excellent resource).
8. Minimize video start-up delay
The delay to start-up is caused by two essential processes:
- The authentication process (including digital rights management).
- 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.
Thus 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. 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:
- Startup delay (how long from click to stream).
- 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 CDN 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 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.
- Video fails or is slow to start or stalls during play.
If the video performance is an issue.
- 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. Fix them.
- Have the video re-edited to make it more concise; and optimized to improve bitrate and compression.
- Use or replace 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 44 of the ClickZ ‘DNA of mobile-friendly web’ series.
Here are the recent ones:
How video impacts mobile web performance and UX
How JavaScript impacts how fast your page loads on a mobile device
Optimizing images for mobile: right format, right size, right place, right device
How to fix your bloated mobile website: fewer, better, smaller images
Average mobile webpage is now 2.2MB, 68% is images: let’s trim the fat
Andy Favell is ClickZ’s columnist on mobile. He is a London-based freelance mobile/digital consultant, journalist and web editor. Contact him via LinkedIn or Twitter at Andy_Favell.