Lighthouse: Avoid unload event listeners (Deprecated)
Overview
This audit was removed in Lighthouse v10.0 (Moved from Performance to Best Practices audits).
Avoiding unload event listeners can help you take advantage of the back/forward cache (aka bfcache) in modern browsers.
The bfcache is an in-memory browser cache that enables near-instant backward and forward navigation when using the browser's backward and forward buttons.
If any JavaScript on your page uses unload event listeners, the bfcache is disabled - which means instant back and forth navigation isn't possible, degrading your visitors' page experience.
How does your site score on this audit?
How does avoiding unload event listeners affect page performance?
Avoiding unload event listeners is necessary to gain the benefits of the bfcache - an in-memory browser cache that stores a complete snapshot of your page (including JavaScript heap) as the user is navigating away.
In the simplest terms, this is akin to "pausing" your page when navigating away, and then "resuming" when you return to it.
We've all been in situations where we visit a page and then click on a link to go to another page, but we realize that's not the page we really want and click the back button to return to the first page.
If the browser encounters an unload event handler, it disables the bfcache, as the JavaScript stored in the unload handler may cause issues with the page after it is restored with bfcache.
In other words, the browser will elect not to enable the bfcache if it discovers an unload event handler in order to ensure your page retains functionality between back and forth states.
Using the unload event on modern browsers breaks near-instant back and forth navigation.
It is these kinds of navigations (particularly on mobile devices) where bfcache is very beneficial to page performance as it can retrieve whole pages quicker than the browser's HTTP cache.
If you add an unload event to your page, you're likely depriving your visitors of the opportunity to experience near-instant navigations when using the browser's backward and forward buttons.
In addition, having unload event listeners on your page slows down performance in Firefox, and the code probably won't even execute most of the time in Chrome and Safari.
Generally speaking, unload listeners shouldn't be used as modern browsers have better methods to determine when a user has navigated away from the page.
How does GTmetrix trigger this audit?
GTmetrix analyzes your page's code and triggers this audit if it discovers any JavaScript on your page adding an unload event listener.
How to fix this audit?
To fix this audit, remove any unload event listeners on your page.
Instead, consider using pagehide or visibilitychange events to ensure that your page can still utilize bfcache, and reap all its associated benefits.
Refer to this external resource for more information on using pagehide and visibilitychange events.