Web Performance 101: Video Optimization

Webpage content is a mix of rich HTML, images, videos, and other media types. Multimedia content can add significantly to the overall page size and directly affect webpage performance. This doesn’t mean embedding videos are against best practices; all type of page content can be tuned to overcome any negative impact on performance. Optimizing a webpage is a critical step in ensuring a satisfactory digital experience, and this process is incomplete if the video content is overlooked.

Video content boosts user experience and conversion rates. High-resolution videos are now a staple in webpage design, and this translates to heavier webpages. There are a variety video formats available today with each format having its own set of specifications and limitations.

Some of the common types of video files used in webpages include WMV, FLV, MOV, WebM, and MP4. MP4 and WebM are the most popular formats and is used across different video sharing platforms like YouTube and Vimeo as the video quality is better than other file types. Another advantage of using MP4 and WebM files is that the size is relatively smaller and it is supported by most browsers.

If you aim to deliver the best digital experience without compromising on rich multi-media content on your website, then there are two main aspects to consider:

• Optimizing the video content to provide high-quality video with minimum impact to page speed.
• Optimizing the page design to embed and display multi-media content and boost the user experience.

Optimizing Video Content

Videos don’t necessarily have to be an impediment to improved webpage performance, there are several ways to tune the media content in a page to complement the page performance. Here are some of how you can optimize video files:

• File Size

The most basic step in optimizing video is cutting down the file size to make it easier to download and play. A video’s file size depends on the bit rate and other metadata attached to it. Data compression is one of the techniques that can be used to reduce the video file size without losing the video quality. ffMpeg, HandBrake, MpegStreamclip etc. are some of the compression tools available. These tools restructure the way the pixel data is stored to make the final video optimized and lighter.

• File format – converting to HTML5 videos

The file format can also contribute to the video file size; Different video file types store data in different ways which is why a WebM video is lighter than an MP4 video. In addition to the bytes a video file adds to the page, we should also consider browser support; browsers may support only a few of the available formats and this makes it important to ensure you are not embedding videos on your page that requires extra plugins.

Modern browsers support HTML 5 video formats like MP4, WebM and Ogg Video. So, it is recommended to convert the videos to one of these formats to make it easier to optimize and embed n webpages.

• Using CDNs

CDNs can be used to stream video content so that it is available to the user instantaneously; The user need not wait for the video to download and buffer. OVPs or Online Video Platform providers offer services that handles video optimization to provide the user with seamless video streaming.

CDN’s employ different caching techniques to ensure the requested media is delivered quickly and it is common practice for CDNs to cache popular video content. The infrastructure and geographical coverage provided by CDNs makes it possible for users to access videos from any device and from any location without compromising the video quality or webpage performance.

• Video Streaming

Traditionally media files were downloaded or copied to the user’s system before playback; this usually resulted in latency and loss of quality. Streaming was introduced to directly “stream” media content from a server to a media player on the browser.

Several new technologies make use of Adaptive Bitrate Streaming over HTTP to enable streaming; some of these include MPEG-DASH, HTTP Live Streaming (HLS), HTTP Dynamic Streaming (HDS) etc. All these protocols are designed to stream videos from a regular HTTP server making specialized media delivery servers redundant. The video stream is broken into smaller chunks of different bitrates that are ready for playback; a device trying to view the video file can pick the data stream as needed based on the bandwidth available.

Optimizing Page Design for Video

In addition to the format and data delivery of the video content, it is also important to optimize the webpage design so that it doesn’t hinder the user experience. Here are some points to consider when designing your website:

• Optimizing for mobile devices

The video content on a page must be optimized for mobile devices as the display resolution and size vary across different mobile devices. The video must re-adjust along with the responsive design of the website; it should also detect the device orientation and display the video accordingly.

• Video Size and Placement

The size of the video embedded on the page is as important as the video format and file size. Using HTML or CSS to specify the exact width and height of the embedded video allows the browser to allocate the required bandwidth and avoid unnecessary overhead.

• Deferring Videos

Embedded videos that are configured to auto-play requires the page to make additional requests for files and resources needed for video payback, this can slow down the page significantly. Deferring videos from loading till after the initial page load has completed, frees up bandwidth allowing the page to load faster.

To Embed or Not To Embed

Website designs are more creative and fluid than it has ever been. Multimedia content has become a necessity in engaging users and can improve conversion rates on your website. It also provides a unique digital experience. So, there are more reasons to embed videos on your webpage than there are disadvantages. There is no cost to performance if we optimize the page design, pick the right video format and utilize media delivery providers to handle video processing efficiently.