Feedback: Script `worker` strategy #36778

housseindjirdeh · 2022-05-09T15:47:34Z

housseindjirdeh
May 9, 2022

tl.dr: Thread to collect feedback on <Script strategy="worker" />

Details: In v12.1.1-canary.11, next/script introduced a new worker strategy that allows you to relocate and execute third-party scripts in a web worker with Partytown (see documentation). This strategy is still experimental but I would like to use this thread to gather all types of feedback.

Some questions that may be useful to answer (although any feedback is worth sharing):

Have you noticed any performance benefits after switching to the worker strategy for any scripts on your site?
Have there been any scripts that failed to load after you switched to using the worker strategy?
Do you have any problems with the current developer experience?
Is there anything that can be improved with the current documentation?

mitestainer · 2022-06-14T19:55:27Z

mitestainer
Jun 14, 2022

We've been testing the worker approach in our websites here at Apto internally and the results have been positive. While running some page speed/web vitals audits we could notice improvements related to the impact of third-party code, unused javascript code and the main thread work time. That's what we wanted to check, and it worked alright!

We got the CORS error every time, even after applying the forward configuration Partytown suggests in their docs. We proxied the requests, but the Bing Search snippet coming from GTM, when present, started to throw an UET is not a constructor error (I've seen people reporting this at Partytown's repo). There's also no integration with the GTM test tool (also already reported to Partytown). Due to that, we decided to hold the implementation of worker and keep on doing more tests as more updates on Next.js and Partytown rollout.

The idea behind Partytown is really interesting and I'm glad you guys are working on integrate that on Next.js. Thanks for the great job! We'll be looking forward to the updates and we hope to see it working in our websites soon.

2 replies

housseindjirdeh Jul 11, 2022
Author

Thanks for the feedback! I'm glad to hear that early testing showed positive results. Do you happen to have any numbers that you can share with regards to how much it improved main thread work time or any of the other metrics?

I totally understand why you'd like to hold off fully integrating it to your sites until those issues get resolved. I'll send this feedback over to the Partytown folks and hopefully they can get resolved in the near future 🙏

mitestainer Jul 25, 2022

Sure! We ran several web.dev and WebPageTest audits to come to our conclusion. All the code related to third-party scripts didn't show on the unused javascript tab, we managed to decreased the main-thread work metric from 34.4s to 9.4s and the main-thread blocking due to third-prty code went down to zero.

axeldelafosse · 2022-08-10T14:46:48Z

axeldelafosse
Aug 10, 2022

Hey @housseindjirdeh! Thank you so much for your work, this is something I want to do since a long time now!

Here is a PR where I'm loading RudderStack with next/script using the worker strategy instead of using the npm package: showtime-xyz/showtime-frontend#1383

Unfortunately the script isn't loading. I'm getting this error:

Safari

Brave

Any idea? Have you heard of someone successfully using Partytown to load RudderStack?

0 replies

hieunguyen1704 · 2022-10-16T16:53:38Z

hieunguyen1704
Oct 16, 2022

Hi @housseindjirdeh, thank you for your great efforts.
But when I try with this, I've got some issues on Chrome, Safari still works fine:

Specifically, on the first load of the page everything works fine, but on the 2nd reload I get a 404 Not found error sending a request to get file partytown-sandbox-sw.html (http:// localhost:3000/_next/static/~partytown/debug/partytown-sandbox-sw.html?1665936200847). In Partytown's documentation they mentioned that if this request fails, then service worker is not installed correctly:

On Chrome:

On Safari:

Here is my _document.js :

import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          data-partytown-config
          dangerouslySetInnerHTML={{
            __html: `
              partytown = {
                lib: "/_next/static/~partytown/",
                debug: true
              };
            `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
        <Script
          id="gtag-init"
          strategy="worker"
          dangerouslySetInnerHTML={{
            __html: `!function(){function t(){var t,e,n,a;t=window,e=document,n="script",t[a="dataLayer"]=t[a]||[],t[a].push({"gtm.start":(new Date).getTime(),event:"gtm.js"}),a=e.getElementsByTagName(n)[0],(n=e.createElement(n)).async=!0,n.src="https://www.googletagmanager.com/gtm.js?id=GTM-5D3JJZT",a.parentNode.insertBefore(n,a)}function e(){setTimeout(t,0)}window.addEventListener?window.addEventListener("load",e,!1):window.attachEvent&&window.attachEvent("onload",e)}();`,
          }}
        />
      </body>
    </Html>
  );
}

Next version: 12.3.1
@builder.io/partytown version: 0.7.1

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feedback: Script `worker` strategy #36778

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 3 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Feedback: Script worker strategy #36778

Uh oh!

Uh oh!

housseindjirdeh May 9, 2022

Replies: 3 comments · 2 replies

Uh oh!

Uh oh!

mitestainer Jun 14, 2022

Uh oh!

housseindjirdeh Jul 11, 2022 Author

Uh oh!

mitestainer Jul 25, 2022

Uh oh!

axeldelafosse Aug 10, 2022

Uh oh!

Uh oh!

hieunguyen1704 Oct 16, 2022

Feedback: Script `worker` strategy #36778

housseindjirdeh
May 9, 2022

Replies: 3 comments 2 replies

mitestainer
Jun 14, 2022

housseindjirdeh Jul 11, 2022
Author

axeldelafosse
Aug 10, 2022

hieunguyen1704
Oct 16, 2022