OpenJS World Keynote Series: Prosper Otemuyiwa, CTO at Eden, “Media Performance at Scale”

During the OpenJS Foundation global conference, OpenJS World, we heard from many inspiring leaders. In this keynote series, we will highlight the key points from the keynote videos. 

The recent pandemic has changed the way people work and spend their time. Significantly, many activities have shifted online, resulting in a 1000x increase in media files being shared across the internet. The increased demand for fast, high quality delivery of content has revealed several issues with media performance — the speed at which photos, videos and other files are delivered to the user. Prosper Otemuyiwa, CTO at Eden, addresses these problems in his Keynote address on June 25, 2020. In this talk he explains why pages and files load so slowly, and how these issues can be solved. By following his advice developers can optimize their projects to deliver high quality image and video files without atrocious loading times. 

Full Video Here 

Otemuyiwa begins his talk by explaining what media performance is and what the major bottlenecks are. He emphasizes that users will become frustrated with long loading times and constant video buffering without proper optimization of media files. Next, he describes how developers can improve content delivery. Otemuyiwa provides specific examples of services/code that convert, compress and load files in order to make web pages load at lightning speeds. You can find the Keynote broken down by section below:

What is Eden?: 0:09

2020 Pandemic Era, Media Increase: 01:34

What is Media Performance? 02:30

Bottlenecks for Media Performance: 03:07

Scaling Media Performance in Your Own Apps: 

1. Leverage CDNS for Globally Distributed Caching: 04:20
2. Compress Image Files (without visible loss of quality): 05:39
3. Lazy Load Content: 07:08
4. Avoid Image Resizing on the Browser: 08:36
5. Don’t Hide Images with CSS: 09:15
6. Avoid PNG Files (Use JPG/WebP instead!): 09:48
7. Use CSS Image Sprites To Load Multiple Logos at Once: 12:26
8. Respect the User’s Hardware! 13:48
9. Set Up Performance Budgets for Images: 14:39
10. Convert Gifs to Videos (.MP4): 15:30
11. Preload Your Videos: 16:27
12. Utilize Adaptive Bitrate Streaming for Faster Video Playback: 16:48

Conclusion: Remember MOM (Measure, Optimize, Monitor): 18:28

Thanks to Prosper for this valuable information!