{"id":4204,"date":"2021-08-24T07:38:21","date_gmt":"2021-08-24T14:38:21","guid":{"rendered":"https:\/\/blog.amp.dev\/?p=4204"},"modified":"2021-08-24T07:38:21","modified_gmt":"2021-08-24T14:38:21","slug":"better-video-performance-in-web-stories","status":"publish","type":"post","link":"https:\/\/blog.amp.dev\/2021\/08\/24\/better-video-performance-in-web-stories\/","title":{"rendered":"Better video performance in Web Stories"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/blog.amp.dev\/wp-content\/uploads\/2021\/08\/image1-1-1024x512.png\" alt=\"\" class=\"wp-image-4206\" srcset=\"https:\/\/blog.amp.dev\/wp-content\/uploads\/2021\/08\/image1-1-1024x512.png 1024w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2021\/08\/image1-1-300x150.png 300w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2021\/08\/image1-1-768x384.png 768w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2021\/08\/image1-1-1536x768.png 1536w, https:\/\/blog.amp.dev\/wp-content\/uploads\/2021\/08\/image1-1.png 1999w\" sizes=\"auto, 100vw\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Web performance is critical for a great user experience. We continue to see Story creators utilizing video-first narratives to keep their viewers engaged and coming back for more. However, the distribution cost of serving videos, and the complexity of serving video quickly to users globally, can be high. To help address these challenges: Web Stories has expanded support for video caching (i.e. using the Google cache is not an obligatory part of using Web Stories).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Google now provides support for video caching to all Web Stories. For most creators your favorite <a href=\"https:\/\/stories.google\/tools\/\">creation tool<\/a> will likely handle this added performance boost. If you are publishing your own Stories you can opt-in to the <a href=\"https:\/\/developers.google.com\/amp\">Google Cache<\/a> by following the steps below.<\/p>\n\n\n\n<h2 id=\"potential-benefits\" class=\"wp-block-heading\"><strong>Potential Benefits<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Reduced serving costs: <\/strong>If you opt-in, Google will try to serve videos from the Google cache before falling back to your site&#8217;s hosting, potentially reducing your video hosting costs by up to 99%.&nbsp;<\/li><li><strong>Less waiting<\/strong>: Videos played from the Google cache start playing 35% faster on average than non-cached videos across Discover, Google Search and Google Images.&nbsp;&nbsp;<\/li><li><strong>Better reader experience<\/strong>: Google\u2019s video cache is fast, and we see on average a 75% improvement on bounce rate on pages with video across Discover, Google Search and Google Images.&nbsp;<\/li><\/ul>\n\n\n\n<h2 id=\"opt-in-instructions\" class=\"wp-block-heading\"><strong>Opt-In Instructions<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you opt in, Google will try to serve videos from the Google cache before falling back to your site&#8217;s hosting, potentially reducing your video hosting costs by up to 99%.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To get started using the <a href=\"https:\/\/developers.google.com\/amp\">Google Cache<\/a> to serve video, you\u2019ll need access to the HTML of your Stories.<\/p>\n\n\n\n<h3 id=\"to-opt-in-on-the-google-cache\" class=\"wp-block-heading\"><strong>To opt-in on the Google cache<\/strong>:<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Mark the <code>amp-video<\/code> with the attribute <code>cache=\"google\"<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The sources should be specified as a <code>source<\/code> child component and not through the <code>src<\/code> attribute of <code>amp-video<\/code>. Use 720p videos or higher to take advantage of all the video transcodes and adaptive bitrate algorithms.<\/p>\n\n\n\n<h3 id=\"example\" class=\"wp-block-heading\">Example:<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-comment\">&lt;!-- Enable caching on this video via the attribute opt-in --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">amp-video<\/span> <span class=\"hljs-attr\">cache<\/span>=<span class=\"hljs-string\">\"google\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"source1.mp4\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">amp-video<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">If the opt-in was successful, you will be able to see on the browser network tab a request to <code>https:\/\/*.cdn.ampproject.org\/mbv\/s\/*<\/code> that returns a JSON with an empty list of sources (since the cache missed this video). In the following minutes\/hours, the Google video cache will fetch and store the video contents, so that a later request to this url can return a processed list of video sources for that origin video.<\/p>\n\n\n\n<h2 id=\"implementation-troubleshooting\" class=\"wp-block-heading\"><strong>Implementation Troubleshooting<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Your video hosting must allow crawling the videos and the video must be public for the cache to fetch it. A typical way hosting services disable crawling is via <a href=\"https:\/\/developers.google.com\/search\/docs\/advanced\/robots\/intro\">robots.txt<\/a>. For example, Vimeo or YouTube disable crawling, so if your videos are hosted on such services and embedded into your Stories, you won\u2019t be able to use the feature.<\/p>\n\n\n\n<h2 id=\"stay-updated\" class=\"wp-block-heading\"><strong>Stay Updated<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Whether you like reading Web Stories, are interested in creating them yourself, or are building creation tools, do share your ideas and suggestions with the Web Stories working group. You can reach out to us on <a href=\"https:\/\/github.com\/ampproject\/amphtml\/issues?q=is%3Aissue+is%3Aopen+label%3A%22WG%3A+stories%22+\">Github<\/a>, <a href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/master\/CONTRIBUTING.md#discussion-channels\">Slack<\/a> and can subscribe to a low traffic <a href=\"https:\/\/groups.google.com\/a\/amp.dev\/g\/web-stories-devpreview\">developer preview email group<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Posted by Ryan Warrender, Web Stories Product Manager, Google<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web performance is critical for a great user experience. We continue to see Story creators utilizing video-first narratives to keep their viewers engaged and coming back for more. However, the distribution cost of serving videos, and the complexity of serving video quickly to users globally, can be high. To help address these challenges: Web Stories [&hellip;] <a class=\"excerpt-read-more\" href=\"https:\/\/blog.amp.dev\/2021\/08\/24\/better-video-performance-in-web-stories\/\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":4206,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[32],"tags":[],"class_list":["post-4204","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stories"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/blog.amp.dev\/wp-content\/uploads\/2021\/08\/image1-1.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paQKQx-15O","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts\/4204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/comments?post=4204"}],"version-history":[{"count":2,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts\/4204\/revisions"}],"predecessor-version":[{"id":4208,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts\/4204\/revisions\/4208"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/media\/4206"}],"wp:attachment":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/media?parent=4204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/categories?post=4204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/tags?post=4204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}