Video Performance Update

Last year we made a promise … deliver more video content, faster than ever to our fans. As of today, January 31, you may notice a couple of things. First, our video player looks slightly different, and second, it starts a heck of a lot faster!

When we outlined our current state of video and how we were going to improve it back in May ’16, we spoke about moving to an HTML5 player and also optimizing our video pages to improve performance. Over the last few months, we have been working with our integration partner Omnigon on integrating a brand new HTML5 video player that is completely JavaScript based. The final player is a custom implementation of our OVP Ooyala‘s newly released HTML5 player. What that means for you, the fan, is no more Flash! Eliminating Flash playback eliminates the need to load the often bloated Flash plugin and drastically speeding up our click-to-playback times. Additionally, the new HTML5 player is functional across all device types and operating systems (desktop, mobile/tablet, iOS, Android, etc.). If you haven’t already, jump on over to PGATOUR.COM and take a look at the new player.

The second major update we made was optimizing our video pages to be much lighter. Some of that was shuffling around page code to prioritize loading and removing unnecessary code, but the biggest lift came from optimizing our video preview images. Prior to our optimization efforts, our video pages were loading a full size render of our video preview images (often 640×360 pixels or larger) from our CDN and scaling them down to their display sizes in-browser. As you can imagine, our video pages were HUGE, often averaging between 18-20MB! We are now delivering optimized and scaled images from our image processing service Cloudinary and this has reduced our page drastically, now averaging anywhere between 1.5-3MB.

In our original post we outlined some performance numbers we wanted to hit so let’s take a look.

Overall, we’ve made some vast improvements, but we’re not even close to being done! Check out some of the goodies to come:

  • Sticky Player – We are currently prototyping and building a sticky player experience that will allow fans to continue to consume video content as they continue to browse PGATOUR.COM (i.e. checking scores on the leaderboard while continuing to watch video).
  • No more page re-loading – Part of our video page re-architecture to be completed, involves a process called dynamic page loading. What that means, is that rather than re-loading the entire video page (including all CSS/JavaScript code) every time you watch a new video, our video pages will dynamically load only the elements that need to change. This will reduce the time it takes to go from one video to another down to milliseconds.
  • UI/UX Changes – There will also be a number of UI design updates to help make the overall of experience of consuming video content on PGATOUR.COM a much more intuitive and easy experience. We hope to create an experience (especially at the mobile and tablet breakpoints) that mirrors the speed and interaction of a native application. For now, these details are still a bit of a surprise!

As always, stay tuned as we continue to improve our video experience across all our platforms, send us your feedback about the evolution of our video platforms and keep checking Labs for our next major release!