This content originally appeared on The AMP Blog and was authored by The AMP Project
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).
Google now provides support for video caching to all Web Stories. For most creators your favorite creation tool will likely handle this added performance boost. If you are publishing your own Stories you can opt-in to the Google Cache by following the steps below.
Potential Benefits
- Reduced serving costs: If you opt-in, Google will try to serve videos from the Google cache before falling back to your site’s hosting, potentially reducing your video hosting costs by up to 99%.
- Less waiting: Videos played from the Google cache start playing 35% faster on average than non-cached videos across Discover, Google Search and Google Images.
- Better reader experience: Google’s 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.
Opt-In Instructions
If you opt in, Google will try to serve videos from the Google cache before falling back to your site’s hosting, potentially reducing your video hosting costs by up to 99%.
To get started using the Google Cache to serve video, you’ll need access to the HTML of your Stories.
To opt-in on the Google cache:
Mark the amp-video with the attribute cache="google".
The sources should be specified as a source child component and not through the src attribute of amp-video. Use 720p videos or higher to take advantage of all the video transcodes and adaptive bitrate algorithms.
Example:
<!-- Enable caching on this video via the attribute opt-in -->
<amp-video cache="google">
<source src="source1.mp4">
</amp-video>Code language: HTML, XML (xml)If the opt-in was successful, you will be able to see on the browser network tab a request to https://*.cdn.ampproject.org/mbv/s/* 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.
Implementation Troubleshooting
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 robots.txt. For example, Vimeo or YouTube disable crawling, so if your videos are hosted on such services and embedded into your Stories, you won’t be able to use the feature.
Stay Updated
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 Github, Slack and can subscribe to a low traffic developer preview email group.
Posted by Ryan Warrender, Web Stories Product Manager, Google
This content originally appeared on The AMP Blog and was authored by The AMP Project
The AMP Project | Sciencx (2021-08-24T14:38:21+00:00) Better video performance in Web Stories. Retrieved from https://www.scien.cx/2021/08/24/better-video-performance-in-web-stories/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.