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 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 its 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. Browser performance is slow with Īs Doug Sillars recently pointed out in a HTTP Archive post, there is huge performance penalty in the visual presentation when using the tag. Even if you can, there are three problems with this method of delivering GIF-like (Gif), micro-form video: 1. 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! … but we already have tags?Ī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 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. ![]() To quote from the original GIF89a specification: Now I love and love animated “GIFs”.Īnimated GIFs are a hack. Safari Tech Preview has changed all of this. Special thanks to: Eric Portis, Jer Noble, Jon Davis, Doron Sherman, and Yoav Weiss. Now we wait for the other browsers to catch-up: This post is 46MB on Chrome but 2MB in Safari TP.Finally cinemagraphs without the downsides of GIFs!.Background CSS video & Responsive Video can now be a “thing”.Early results show mp4s in tags display 20x faster and decode 7x faster than the GIF equivalent – in addition to being 1/14th the file size!.Now you can s in Safari Technology Preview.drawbacks: not preloaded, uses range requests Replacing GIFs with is better but has perf.GIFs are awesome but terrible for quality and performance.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |