When it comes to optimizing the performance of your app, you’re often limited by the performance of the content your app embeds. Embedded content may be 3rd party iframes for example, but it can also be shared components or apps from other teams within your organization. A common case is when an application gets embedded and starts causing performance problems because it wasn’t originally designed for embedded scenarios.
Being able to minimize the performance impact of the content you embed is crucial to improving the overall performance of your site or app.
Goals
With this new feature proposal, we aim to do two things:
- To make it possible for you to control the performance impact of the content you embed, and make it easy to do so, without having to determine exactly the individual constraints that are needed.
- And to make it possible for you to know when performance violations occur, so that you can understand when the user experience is negatively impacted by embedded content and improve the experience.
Proposal
We’re proposing to achieve the above goals by introducing new DocumentPolicy configurations and by reporting the violations to the embedder, so you can make decisions accordingly, and to the embedded content so they can also be aware of issues and mitigate them.
Here are the document policies we’re proposing to add for developers to apply to embedded content:
basic– Basic web development best practices that are scenario agnostic
This category encompasses fundamental web development best practices to ensure websites are optimized for performance across various environments. These tasks are typically simple to implement but are frequently overlooked, leading to significant performance issues. Constraints include limits on oversized assets (images, web fonts, etc.), and flagging unzipped assets and uncompressed resources.early-script– avaScript constraints to enhance performance and minimize impact on user experience before interaction begins
This category focuses on JavaScript development best practices that can be done to minimize performance issues before user interaction begins. This includes capping JavaScript resources loaded initially to avoid overwhelming devices with limited processing power or bandwidth, serving JavaScript with constrained content-length headers, and requiring animations to run on the compositor thread.globals– Overall media and system resource usage constraints
This category entails imposing limits on overall media and system resource usage during interactions to help prevent websites from over-consuming resources and degrading user experiences. This includes capping total media usage, iframe count, iframe depth, and CPU usage before the first interaction.script– Strict JavaScript restrictions while running/post-load
This category enforces restrictions on more complex JavaScript to further enhance performance. This includes limiting long tasks running on the main thread and capping high CPU usage tasks, particularly those involving workers that exceed certain execution times.
Violations will be reported through the Reporting API. Developers can also opt into letting the browser address the violations directly, for example by not rendering oversized assets, blocking out images that are too large, pausing/blocking loading of scripts that violate limits, etc.
Example
Imagine a complex app that embeds real-time content from different sources through iframes. The app has a weather widget that contains animations or high-definition videos which autoplay for different weather conditions without user interaction.
To minimize the performance impact of the embedded content, the developer of the host application aligns with producers of the embedded content on guidelines and best practices for the iframes to be loaded into the experience.
While the producers of the embedded content make the necessary changes to meet the requirements, the host app serves its main document with Document Policy directives to enforce on the embedded content. In the simplest case, the app uses the basic policy to ensure oversized assets are limited and require assets to be zipped, by using the following Document Policy header:
Require-Document-Policy: basic
If the developer also wants to ensure that video and animations pause when the user is not interacting with them as well as apply some additional limits on JavaScript code, the developer can also set the early-script policy:
Require-Document-Policy: basic, early-script
Alternatively, the developer can choose to set these policies individually, per iframe:
<iframe policy="basic">
<iframe policy="basic, early-script">
Let us know what you think
We’re very excited about how this proposal can give you more control of your app’s performance and help uncover issues to improve the overall user experience.
We’re looking for feedback on this proposal so if you’re interested in this API and want to help us shape it, please read the explainer, and share any thoughts you have by opening a new issue on our repository.
