Ironically, Shopify-Boomerang preventing Chrome's New Back/Forward Cache Feature

[hearingonline]

Hello,

I was doing some testing on my site and it seems the script shopify has for tracking core web vitals is actually hurting core web vitals.

The shopify-boomerang-1.0.0.min.js actually fires a "beforeunload" event that prevents the browser from taking advantage of the new Back/Forward Cache feature that has shown significant improvement in Core Web Vitals and Site Speed. [1]

While many people probably have no idea what this is or will even notice it, it will have a significant impact on sites' core web vitals scores, and therefore their google search results.

Is there any status on whether Shopify will address this issue, and if so, when?

[1]: https://www.smashingmagazine.com/2022/05/performance-game-changer-back-forward-cache/

[Rockey]

Adding some more information on this. I created a brand new store with DAWN them and try to test for backward/forward cache in devtools and I can see 'beforeunload' events being attached by Shopify boomerang (see screenshot)

[oreoorbitz]

Yeah, boomerang is a third party library that they modified a bit, I don't think they're going to re-write it to remove beforeunload.
My understanding is that Boomerang is pretty much useless for merchants, Shopify uses it for to measure user performance for it's own information, not to provide to merchants, so you could just remove bommerang by capturing content_for_header and replacing the URL address for boomerang

[Rockey]

@hearingonline @oreoorbitz,

I spent more time looking into this and consulted experts like https://twitter.com/bluesmoon (Author of Boomerang.js) and https://twitter.com/tunetheweb (who wrote the SmashingMagazine article referred in this issue by @hearingonline ).  Post that discussion, I don't think my last comment is accurate. I didn't realise that on the store I tested, I had some couple of apps installed and Dynamic checkout buttons enabled. 

We believe that 'beforeupload' event listeners being added by Shopify boomerang JS are OK and are not invalidating 'bfcache' (at least on Chrome and Safari). See following section in screenshot from article - https://web.dev/bfcache/. 

To confirm this, we conducted two tests - 

Test 1 - Created a brand new Shopify store with DAWN theme with no apps installed. In DAWN theme, Shopify Dynamic checkout buttons were enabled by default on PDP (We disabled it.. see Test 2 to understand why)

Store URL to test - https://bfcachetest.myshopify.com/products/baby-bamboo-weaning-bowl-and-spoon-set-you-are-my-sunshin... (use password - 'rockey')

You will see that this passes Back/forward cache test in DevTools.

At the same time, you can see 'beforeunload' event listeners by Shopify boomerang JS. This confirms that it's not making the site ineligible for Backward/Forward cache.

Test 2 - 

Created a brand new Shopify store with DAWN theme with no apps installed. In DAWN theme, Shopify Dynamic checkout buttons were enabled by default on PDP and this was left as-is. 

Store URL to test - https://bfcachetestwithdynamiccheckout.myshopify.com/products/baby-bamboo-weaning-bowl-and-spoon-set... (use password - 'rockey'). In this URL, we are forcing PDP to show 'Buy with GPay' option.

You will see that this fails Back/forward cache test in DevTools with error 'UnloadHandlerExistsInSubFrame'

Since the error complains about a sub-frame, it gives an indication that something outside main document is happening. Now, you can filter network request for type 'Doc' and you will see a 2nd document with request to pay.google.com

Now, if you try to search for 'unload' across all your documents, you will see two instances - 1) coming from Shopify boomerang 2) coming from gstatic.com domain (which is one of the Google's domain).

Shopify boomerang JS was present in Test 1 before. In Test 2, only new variable is Dynamic Checkout button and presence of Google Pay. This indicates that any Shopify stores which have Google Pay and Dynamic Checkout buttons enabled will not benefit from Backward/Forward cache. 

Now, my guess is that when @hearingonline raised this, that particular store has either a 3rd party app or something like this which is making the store ineligible for Backward/Forward Cache. @hearingonline - if you can share your store URL, I will be happy to have a look.

Cheers,

Rockey