Tag Archives: mobile video

t47_top_100_youtube_content_breakdown.png

How video impacts mobile web performance and UX, part 2: autoplay and audio

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:

  1. Top sites avoid using video. (Considering these include video specialist like YouTube, BBC and CNN, this is the least likely of the three reasons).
  2. 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).
  3. Top sites use video more efficiently (as Dutton suggests).

Querying this apparent anomaly of video usage between all sites and the top 100 with the web performance experts at HTTP Archive, we received the following answer from Rick Viscomi, a leader of the HTTP Archive project and Developer Advocate at Google:

“I think the answer is: efficiency. To be more specific, I think it comes down to autoplay. HTTP Archive just visits a page and records the page load without clicking around. Autoplay videos would be captured on those visits, while click-to-play would not.

“Autoplaying is wasteful for everyone involved because a page visit does not always demonstrate intent to watch. One notable exception is YouTube, where visiting a watch page is definitely intent to watch. Keep in mind that only home pages are crawled by HTTP Archive. So my theory is the top sites choose not to autoplay in order to keep bounce rates low and conversions high.”

Notably, autoplay video and audio is also frowned on from an accessibility perspective. See these BBC guidelines for example. The reason for this is that people with visual impairments rely on screen readers to read aloud a webpage. Clearly if audio or video media starts to play (including advertisements) it will interfere with the screen reader and will make tricky for the user to find out how to make it stop.

The impact of audio on page performance

One of the most useful features of HTTP Archive or WebPageTest (from where it is captured) is the filmstrip which shows how a website loads on a mobile device second by second.

The loading process for New York Times mobile site on May 1, 2017 is captured by HTTP Archive in the image below. The audio story The Daily is at the top of the mobile page, above the fold, allowing us to see clearly how audio may delay page speed.

The audio does not finish loading until 22 seconds, when the play button finally appears and the site is visibly complete.

How video impacts mobile web performance and UX, part 2: autoplay and audio

Poor viewer experience (VX)

Assuming there is no autoplay, a correctly coded website should not require the video to be downloaded until the user requests it by clicking on the play button.

However as soon as the mobile user clicks on that play button, the level of expectation changes…

There are three potential VX problems with video:

  1. The video is too slow to start.
  2. It fails to start.
  3. It stalls during play back – this is due to (re) buffering or a dropping connection, typically shown by the spinning wheel.
  4. Poor video quality – or quality that is less an optimal for the connection.

Research by Conviva and nScreenMedia (November 2016) illustrates the difference in VX quality when a viewer is indoors (WIFI) or outdoors (cellular) failures for videos to start increases from 1.5% to 2.9% and buffering issues rises from 7.9% to 14.3% of views.

This has a noticeable impact on user satisfaction out of home 11.8% exit before the video starts versus 9.0% in home.How video impacts mobile web performance and UX, part 2: autoplay and audio

Research carried out by University of Massachusetts and Akamai, of 6.7 million video viewers, in 2012, also shows a growing intolerance to slow, stalling video.

Ramesh Sitaraman, Professor of Computer Science, UMass, Amherst tells ClickZ:

“Mobile users are impatient and abandon videos that do not start up quickly. However, they are more patient than users who have high-speed Internet access (say, Fiber), since their expectations of speed are lower in comparison.

“Mobile users start to abandon a video after waiting for about 2 seconds. By the 10 second mark, if the video has not started, roughly a fifth have abandoned.”

And on stalling:

“We don’t have data split out just for mobile. But, we studied a cross-section of users that included mobile. Overall, people watch videos for a shorter period of time when the video stalls than they would have otherwise.

“Roughly, a 1% increase in stalls leads to 5% decrease in the minutes watched.”

 

This is Part 2 of a series looking at how video impacts mobile web performance and UX. Read the previous installment: How video impacts mobile web performance and UX, part 1: data and download speed.

Or read on to the next part: How video impacts mobile web performance and UX, part 3: detecting and remedying issues.

t47_cisco_mobile_data_breakdown.png

How video impacts mobile web performance and UX, part 1: data and download speed

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 – and audio – used wrongly or inefficiently will impact mobile user experience (UX) – or should we say: “viewer experience” (VX) or “listener experience” (LX) – massively, but not necessarily in the same way as oversized images and poor or inefficient use of JavaScript.

Images and JavaScript, as seen in previous columns, are the biggest causes of slow loading mobile web pages. As discussed below, video can still contribute to page size and therefore contribute to page load delays, particularly (it seems) where autoplay is used, as we will discuss below.

But the biggest impact on VX comes after page load when the video is slow, or fails, to start or stalls.

The two charts below are from HTTP Archive, which twice monthly records the page size and download speed of the homepages of the top 1 million sites to desktop and mobile devices, using the excellent WebPageTest.

The first chart shows the breakdown of content types by bytes – images, JavaScript, video, stylesheets, HTML and fonts – as an average of all homepages recorded on April 15, 2017.

Video is 128kB or 5.5% of the total bytes loaded (2312 kB or 2.3MB). This might appear small, until you realize that 97% of pages monitored by HTTP Archive have no video content (we examine this surprising stat below).

Pages that do have video content will therefore show a higher proportion of video content.

The second chart (captured April 15, 2017) shows the content breakdown for the homepage of the US digital agency Huge. Here video content is 727kB or 14.5% of the total bytes. The total weight of the page is 5MB, which is a homepage worthy of the company name, and, when measured, took 25.8 seconds to load on a mobile device, according to HTTP Archive.

To be fair, many agencies (digital, media, advertising et al) have surprisingly slow loading, heavy weight sites (considering the importance of digital to their businesses), though Huge is exceptionally large. A trimmer example is Young and Rubicam. On the same date the Y&R homepage took three seconds to load 783kB on a mobile device (on other dates it took nine seconds) according to HTTP Archive.

How video impacts mobile web performance and UX, part 1: data and download speed

Video shouldn’t affect page load size or download speed

Implemented correctly, video (or audio) should not impact the size of the webpage or the speed that pages load on a mobile device, according to the experts.

Even when video is present on the page, to render the page, the browser only needs to load the video container, teaser image, start button etc. it doesn’t need to download the entire video (as the visitor may not want to watch it at all). Thus video and audio ought not to be a significant proportion of content recorded by HTTP Archive / WebPageTest – as we will see when we look at the most popular sites.

Sam Dutton is a Developer Advocate at Google who provides educational materials and workshops for techies in mobile video. He explains:

“Video is not a big issue for page loading, since in general video shouldn’t be part of the cost of loading a web page.

“HTTP Archive measures the bytes to load a web page, not the total bytes crossing the internet. When you load most web pages, you don’t load a video (but you do load images, HTML, CSS and JavaScript).

“Top sites are less likely than less popular sites to require video for page load since (hopefully) the top sites realize the detrimental effects on page weight and (therefore) bounce rates, etc.”

 

This is Part 1 of a series looking at how video impacts mobile web performance and UX. Read the next installment: How video impacts mobile web performance and UX, part 2: autoplay and audio.