Ensure BFCache Eligibility

[dainemawer]

Is your enhancement related to a problem? Please describe.

One important consideration for ensuring well-performing and healthy Core Web Vitals is ensuring all pages are eligible for back-forward cache.

When a user clicks on the "Back" and "Forward" buttons in a browser, the page should load almost instantly.

Certain JS events and methods can invalidate this level of browser caching, which can negatively affect Core Web Vital data. The use of "back" and "forward" buttons by a user counts as a page view, so if the page does not load instantly, it is viable that on these "events," we could see poor Core Web Vital performance.

As such, there are a few considerations we need to take into account when adding functionality to wp-scaffold as well as building client websites on top of it.

1. Never use the unload event: https://web.dev/bfcache/#never-use-the-unload-event
2. Avoid using Cache-Control: no-store: https://web.dev/bfcache/#minimize-use-of-cache-control-no-store
3. If the site is tracking state (logged in, cart amount etc): the data should be updated or cleared as not to expose sensitive information: https://web.dev/bfcache/#update-stale-or-sensitive-data-after-bfcache-restore
4. Do not use window.open: https://web.dev/bfcache/#avoid-windowopener-references
5. When using IndexedDB, fetch, XMLHTTPRequest, WebSockets, WebRTC make sure to close connections after the work is done: https://web.dev/bfcache/#always-close-open-connections-before-the-user-navigates-away

Validating Back/Forward Cache

This can be done in Google Chromes DevTools: Application -> Cache -> Back/Forward Cache

During development, and from time to time, we should run the back/forward cache check in DevTools to make sure we arent bringing down Core Web Vital scores unintentionally.

Designs

N/A

Describe alternatives you've considered

N/A

Code of Conduct

• I agree to follow this project's Code of Conduct