![]() But take a look at the Loki USA homepage – which uses a great hero-video, hosted on Vimeo: In addition to the markup you are forcing the browser to download, evaluate, and execute the JavaScript player – and only then can the video start to load.Īs many people know, I love my Loki jacket because of its built in mitts, balaclava, and a hood that is sized for helmets. This is normally a great idea, but for micro-form video, or critical content like hero videos, it just adds to the delay because of the JavaScript players and supporting resources that these hosting services inject (css/js/jpg/woff). Often, the easiest way to embed a video on a site is to use a hosted service like YouTube or Vimeo and avoid the complexities of video encoding, hosting, and UX. On high-latency cellular connections, these round trips can set video loads back by hundreds or thousands of milliseconds.Īnd what performs even worse than the native element? The typical JavaScript video player. The consequence is multiple TCP round trips before the browser can even start to decode the content and significant delays before the user sees anything. Then it will follow with multiple range requests in various chunk sizes to ensure that the video is adequately (but not over-) buffered. Instead of downloading the whole video file at once, which would waste your cell data plan in cases where you do not end up watching the whole video, the browser will first perform a 1-byte request to test if the server supports HTTP Range Requests. ![]() Worse yet, many browsers assume that tags contain long-form content. ![]() It’s the 27th requested resource and it isn’t even requested until after Start Render, after webfonts are loaded. This delays the loading of content by many hundreds of milliseconds.įor example, the hero video at the top of the Velocity conference page is only requested 5 full seconds into the page load. Since content can be any length – from micro-form to long-form – tags are skipped until the main thread is ready to parse their content. Generally preloaders only preload JavaScript, CSS, and image resources because they are critical for the page layout. ![]() Unlike tags, browsers do not preload content. Even if you can, there are three problems with this method of delivering Gif-like, micro-form video:Īs Doug Sillars recently pointed out in a HTTP Archive post, there is huge visual presentation performance penalty when using the tag. However, not everyone can overhaul their CMS and convert to. You just need to run ffmpeg -i source.gif output.mp4 Transcoding animated Gifs to MP4 is fairly straightforward. Since all browsers now support H.264, this was a very easy transition. Twitter instead transcodes Gifs to MP4s on-the-fly, and delivers them inside tags. That’s why in 2014 Twitter famously added animated GIF support by not adding GIF support. Take a look for yourself: Ĭool! This is going to be awesome on so many fronts – for business, for usability, and particularly for web performance!Īs many have already pointed out, using the tag is much better for performance than using animated Gifs. The intended use case is not long-form video, but micro-form, muted, looping video – just like animated Gifs. Market research has shown that users have higher engagement with, and generally prefer both micro-form video ( tags. Gifs have many advantages: they are requested immediately by the browser preloader, they play and loop automatically, and they are silent! Implicitly they are also shorter. My daughter loves them – but she doesn’t understand why her battery is always dead. And we’re spending all of those resources on something that doesn’t even look very good – the GIF 256 color limitation often makes GIF files look terrible (although there are some cool workarounds). Typically Gifs are 12x larger files than H.264 videos, and take 2x the energy to load and display in a browser. They are HUGE in size, impact cellular data bills, require more CPU and memory, cause repaints, and are battery killers. Animated Gifs are terrible for web performance. All of this awesomeness, however, comes at a cost. The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.īut they have become an awesome tool for cinemagraphs, memes, and creative expression.
0 Comments
Leave a Reply. |