It's difficult to build a website that uses all the latest best practices and provides great performance and user experiences. As the website evolves, it can become even harder to maintain the user experience over time. You can use feature policies to specify the desired best practices, and rely on the browser to enforce the policies to prevent regressions.
There are several policy-controlled features designed to represent functionality that can negatively impact the user experience. These features include:
- Layout-inducing Animations
- Unoptimized (poorly compressed) images
- Oversized images
- Synchronous scripts
- Synchronous XMLHttpRequest
- Unsized media
To avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins. That is, the default allowlist is
'*' for each feature. Preventing the use of the sub-optimal functionality requires explicitly specifying a policy that disables the features.
For new content, you can start developing with a policy that disables all the features. This approach ensures that none of the functionality is introduced. When applying a policy to existing content, testing is likely required to verify it continues to work as expected. This is especially important for embedded or third-party content that you do not control.
To turn on the enforcement of all the best practices, specify the policy as below.
Send the following the HTTP header:
Feature-Policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';
allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"></iframe>