Web Design & Development

3 Tips for Optimizing Video on Your Website

While video content is often larger and more resource-intensive than almost any other way of presenting information on the web, it’s also one of the most in-demand forms. These are staggering numbers: by 2022, videos are expected to make up 82% of global IP traffic on the internet, a 29% bump up from 2017. This means, regardless of device-type, video content is expected to flourish.

A properly optimized video on your website can increase the chance that it will appear on a front-page Google result by as much as 53%.

But knowing things like what types of video files to use or how to reduce their sizes and load times isn’t an intuitive thing, especially if you’re just starting out.

Here are some good rules of thumb when adding video content to your website:

  1. Optimize Videos for Web Streaming

    The most widely used video formats on the web are:

    • MP4: Based on Apple’s Quicktime format, MP4s have a long track record of being used on websites for the middle-ground of high quality videos at a smaller size. Used frequently for YouTube uploads and has very high cross-browser compatibility.
    • WEBM: A Google product, this newer and popular format compresses video size well without taking out much quality. They can usually compete with MP4s in terms of quality and size, but have slightly less cross-browser compatibility.
    • AVI, MOV, and MKV: Highest image quality and great for HD streaming services on big screens.

    Navigating the technical aspects of a video, like frame rates, visual codex, resolution, and file type can feel a bit overwhelming. A tool like Handbrake can make the whole optimization experience easier, providing an automated “web optimized” feature and other easy-to-read options.

    Converterpoint is a great free tool that lets you upload videos for the specific purpose of converting them to common internet formats and otherwise auto-optimizing them for quick streaming on your website.

  2. Hosting Your Video

    How and where to host your videos usually boils down to just a couple options:

    • Hosting on your own site: While technically possible, this is not a recommended method due to slower load times, website size bloat, and significantly increasing how much bandwidth your site’s using.
    • Embedding YouTube or Vimeo videos: This is probably the most popular hosting choice. Both platforms can take on the bandwidth and file-size burdens of your video, and WordPress has plenty of plug-ins, like ARVE, that embed those videos on your website via shortcode techniques.
  3. Put Mobile Users First

    You can make the mobile viewing experience easier by using responsive web design principles for your site:

    • Size and Placement: So that you don’t keep more bandwidth available than needed, make sure to define the width and height of your video in HTML or CSS. For mobile users, keeping a video more central on the web-page is usually better for easy access.
    • Turn-off Autoplay: For mobile users especially, automatically playing video content on a web-page takes up unnecessary resources that could be used to load a website more quickly.
    • Removing Mobile Video: Even if you’re a veteran web developer, making sure your videos display on all screen sizes, mobile and non, can be serious work. If your video doesn’t seem necessary for mobile users, you can stop an attention-grabbing video from loading on narrow screens with the following code:
      @media screen and (max-width: 767px) {
          #hero-video {
              display: none;
          }
      }
See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles