Cloudinary Blog

Digital Nomad With a Chance of Streaming Videos

Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Recently, Doug held an interesting Ask Me Anything (AMA) on The Practical Developer. We had the opportunity to speak with him and dig in further on some of the topics he touched on during that AMA.

What would be the first item to work on when optimizing a website or mobile app?

Every site is different but I’d run it through webpagetest.org on both a mobile device and a desktop and see what comes up. Often, there is excess JavaScript, CSS, and code that you can optimize. In particular, take a good look at the Lighthouse reports on images. Images make up 40-60% of the payload on a website, so optimizing them can dramatically reduce the payload and thus speed up your site. If your page is really long with a lot of images, consider lazy-loading techniques.

When delivering images, how do you prevent users from downloading unnecessary pixels?

Optimizing images is really easy. Tools like Cloudinary make it even easier. Start with making your images responsive (smaller sizes for smaller screens) to accommodate your mobile users. That’s the easiest way to remove excess pixels.

The image-quality setting removes pixels in the resized image, averaging the colors inside the image. Even though reducing the number of pixels lowers the quality, you can do it in such a way that the human eye cannot tell the difference. Lighthouse recommends Quality=85% but SSIMULACRA can get it to the exact point of human perception, often saving hundreds more KBs.

What’s wrong with animated GIFs?

Animated GIFs add a lot of fun to online content, including social media. However, on the downside, they are huge files. Since their format was devised in the 1980s (perhaps older than some of the readers of this post), animated GIFs are a flip book of images being played at whatever the frame rate of the animation is. That means that, unlike videos, no compression occurs on the time axis. Delivering a movie as an animated GIF can make the file two to four times larger. Luckily, Colin Bendell shows how to serve looping movies as described in his post Evolution of : Gif without the GIF.

What are the best ways to leverage videos on mobile sites?

Great question! For images, you can use media queries to serve different-sized ones based on screen size. You can’t do that with videos. The easiest solution is to serve exactly the same video to both mobile and desktop but please don’t do that. You could write some simple JavaScript to determine which videos to play, that is, big screens get big videos and small screens get smaller ones, or you could stream the videos. In the past, you would need a streaming server but, with HTTP Live Streaming (HLS), you can host the files on any server.

The great thing about streaming is that the player on the device has an idea of the network speed and knows the screen size. That means the player can choose the best playback file for any of your videos.

Streaming is becoming more and more popular. What are some ways to make sure that it doesn’t impact site or app performance?

As I mentioned before, streaming can really help with adjusting the bitrate and quality to best account for the device and its network conditions. That’s already a huge improvement from just sending the same 1080p MP4 video to all users.

We can do better, though. To ensure fast startup, choose one of the lower-quality bitrates to begin streaming. That way, the video might not be gorgeous but it will start faster. And when choosing bitrates—tools like Cloudinary would create them for you—be sure that the bitrate changes are fairly evenly sized, thus enabling a more smooth transition during playback should network conditions change.

Recent Blog Posts

An Eye-Opening Talk: Building Apps for the Next Billion Users in Africa

William (iChuloo) Imoh, who hails from Lagos, Nigeria, recently embarked on a U.S. speaking tour, February 20-March 12, during which he powwowed with technical and product teams and communities at such renowned enterprises as Netlify, Pluralsight, Lucidchart, Twilio, and more in Salt Lake City, Dallas, Las Vegas, and San Francisco. On March 5, he gave an enlightening talk, entitled International Developers and Development: Building for the Next Billion Users at Cloudinary in Santa Clara, California. Below is a synopsis. For details, see the related slides.

Read more
The Debut of the Cloudinary Customer Advisory Board

Focus on customers has always been Cloudinary’s mantra. Because we owe them our success, we are constantly reaching out to our customers, not just for feedback on our offerings, but also for their vision, wish list, and buy-in of what Cloudinary can do to meet their needs and make them succeed. About six months ago, it occurred to us that it would be beneficial if we could meet regularly with those who are behind innovation at our key customers—executives, product gurus, developers, content managers—to swap strategies, product roadmaps, best practices, and such. In particular, we’d like to solicit actionable feedback as a foundation for our plans of product enhancements.

Read more
Media Management With the Cloudinary-Netlify CMS Integration

Static sites and the JAMstack are quickly becoming a standard for developing safe and performant websites with an optimal workflow for developers. Netlify CMS (not to be confused with the company that created it, Netlify) is an open source content management solution that works especially with static site generators such as Gatsby, Hugo, etc... enabling content storage in your Git repository along with your code for easier versioning, multichannel publishing, and direct content updates in Git.

Read more
Vitaly Friedman's Insights on Media Conferences

Vitaly Friedman is a die-hard devotee of beautiful content. Born in Minsk, Belarus, he studied Computer Science and Mathematics in Germany, unearthing in himself a passion for typography, writing, and design in the interim. After a six-year stint as a freelance designer and developer, he co-founded Smashing Magazine, a leading online publication on web design and development. You can follow SmashingMag on Twitter @SmashingMag.

Read more