This post has been republished via RSS; it originally appeared at: Microsoft Edge Blog.
We'd love to hear your feedback about a new feature proposal that we think will give you more control over the performance of your website or native application, by constraining the performance impact of any web content that you might embed.
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.
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">