How to prevent unload handlers from slowing down your websites
Use the permissions-policy header, also Chrome is deprecating the unload events.
I’m Jecelyn Yeen, currently working on Chrome Tooling - Chrome DevTools, Puppeteer and more at Google. I tend to talk about web development, debugging & testing.
Prefer video over text? Head to the end for the video version.
Unload handlers can be immensely helpful for tasks like saving user data or cleaning up resources before a page is closed. However, it is not reliable and Chrome is deprecating gradually.
When an unload handler is present on a page, the back and forward cache (bfcache) is disabled, preventing the page from being cached and instantly loaded upon back navigation.
To accurately test the impact of unload handlers on your site, it's best to use a guest profile or incognito mode, as extensions can also inject unload handlers and other APIs that hinder bfcache usage.
For websites that don't use unload handlers, there's a powerful tool at your disposal – the permissions-policy. This HTTP response header, sent with the document response, allows you to enforce restrictions on specific web features, including unload handlers.
By setting the permissions-policy to disallow unload handlers, you effectively prevent their use on your site. This not only guarantees consistent performance by enabling bfcache, but also ensures that no extensions and 3rd-party libraries can inject unload handlers and slow down your site.
Here's a quick tip:
You can actually test this out by overriding HTTP response headers! Simply add a permissions-policy header to your site that prevents the use of unload handlers. Now, even when you try to add an unload handler in the Console, it will be blocked, confirming the effectiveness of this method.
Remember, by taking a proactive approach and leveraging the power of the permissions-policy, you can ensure a smooth and fast browsing experience for your users, free from the performance hit of unnecessary unload handlers.