Video has always been a great promotional tool and as the technology for better mobile performance has grown so has the demand for website development with videos as the main design element. Gaslight Media is sharing a three-part serious by Andy Favell on mobile video practices.
Mobile video is great. When it works.
Implemented correctly, video or audio *should not* impact the speed that pages load on a mobile device and when the play button is pressed, it needs to start quickly and work well.
Video content is top of the agenda for many brands. It is proving a great way to engage customers and visitors, but when viewed on mobile devices, particularly those on cellular connection, video (and to a lesser extent audio) should come with a health warning.
Users are increasingly impatient with slow-to-load and stalling video and will start to abandon a video after waiting just two seconds, research from UMass and Akamai shows.
This column, the first of three parts, will take a close look at how and why video affects page performance. In the second part, we’ll look at the impact of video autoplay and audio on page performance, as well as what makes a poor viewer experience (VX).
Finally, we’ll explore how to detect, avoid and remedy issues to prevent users tuning out.
Video is a massive mobile data hog
The provision and consumption of video on mobile devices via web and apps is growing rapidly. Mobile video is already 60% of total mobile data traffic worldwide and is expected to be 78% by 2021 according to Cisco’s Visual Networking Index (VNI).
All other elements will grow over the next five years, but their proportion of overall traffic will be less. Audio will be 5% compared with 8% today and mobile web will be 14% compared with 30% of traffic today.
Video has always been a great promotional tool and as the technology for better mobile performance has grown so has the demand for website development with videos as the main design element. Gaslight Media is sharing a three-part serious by Andy Favell on mobile video practices.
Mobile Video
Mobile video is a major up-and-coming trend in content, with brands everywhere converging on the new and lucrative mobile video market.
Mark Zuckerberg said on a recent shareholder conference call that he sees video as “a megatrend on the same order as mobile” – which makes mobile video, the intersection between the two, the ultimate sweet spot of engaging content to draw in new consumer eyeballs.
But sadly, there are still some technical hurdles to overcome before the mobile video experience is as smooth as companies would like it to be. In our previous installment we looked at how video can be a massive mobile data hog, and why it shouldn’t (but still does) have an impact on download speed.
In this part we’ll look at the contentious subject of autoplaying videos and their impact on mobile webpage performance, as well as how audio can delay page speed, and what kind of conditions make for a poor viewer experience (VX).
Our third and final part will consider some solutions that webmasters can enact to counter the issues with mobile video.
Video autoplay and page performance
Comparing the data on HTTP Archive for average content for the top 100 most popular sites (according to Alexa) with the top 1 million (shown above) reveals some interesting stats.
On average, video content is just 17kB (rather than 128kB) which is 2.1% of total page size, which, is a (comparatively) slender 828kB.
There are three reasons why this might be:
- Top sites avoid using video. (Considering these include video specialist like YouTube, BBC and CNN, this is the least likely of the three reasons).
- Top sites avoid using video on the (mobile) homepage. (The homepage of YouTube, for example, is made up of image links to videos, rather than videos themselves. Each video has its own webpage).
- Top sites use video more efficiently (as Dutton suggests).
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.
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.
