Add Web Worker Offloading module #556

thelovekesh · 2022-10-13T07:09:52Z

Summary

Fixes #176

Please check #271 for previous conversations.

Relevant technical choices

Add Web Worker module which allows running scripts within the worker thread with the help of the Partytown library.
Add the Partytown package to the dependencies
Add npm script to copy Partytown lib files to module assets/js folder.
- Currently, Partytown lib files are committed to the module.
- We can also set up webpack to copy partytown js files in the module build folder when creating the release of the plugin.
- Partytown library needs to be updated when a new version is released.
Add tests for the Web Worker Module.
Add partytown_configuration filter which can be used to update partytown configurations.

Screencast

1.mp4

Checklist

PR has either [Focus] or Infrastructure label.
PR has a [Type] label.
PR has a milestone or the no milestone label.

.github/workflows/deploy-dotorg.yml

adamsilverstein · 2023-11-29T16:16:19Z

modules/javascript/partytown-web-worker/load.php

+add_action( 'wp_print_scripts', 'perflab_web_worker_partytown_worker_scripts' );
+
+/**
+ * Helper function to get all scripts tags which has `partytown` dependency.


Rather than using a partytown dependency, can we look for scripts that have a partytown-worker strategy (and maybe no dependencies)?

That way partytown could be enabled with:
wp_script_add_data( $handle, 'strategy', 'partytown-worker' );

While it's feasible to execute this, my inclination is towards considering partytown to be included in the $deps array as a dependency.

This preference stems from the fact that when a script loads as script[type="text/partytown"], it necessitates the presence of partytown. Thus, referring to it as a direct dependency seems logical.

Additionally, by adhering to the dependency approach, merely registering the partytown script suffices, as WordPress automatically enqueues it if another script depends on it else it will not be enqueued to the front-end.

That makes sense, however I can also see the use case for the wp_script_add_data approach. For example, an optimization plugin could use this to specify it wants a specific script loaded with partytown. I'm not sure you could add a dependency dynamically like that (I have to look).

This is fine as is for now, I will check if maybe we can make it work both ways.

modules/javascript/partytown-web-worker/load.php

adamsilverstein · 2023-11-29T16:23:21Z

@thelovekesh apologies for dropping my attention here: I finally got back to this and left some feedback on the PR; I'd love to help get this over the finish line to land as a module.

thelovekesh · 2023-11-29T16:25:14Z

Thanks @adamsilverstein. I will try to resolve the feedback and update you once done.

modules/javascript/partytown-web-worker/load.php

.github/workflows/deploy-dotorg.yml

modules/javascript/partytown-web-worker/load.php

admin/load.php

modules/javascript/partytown-web-worker/load.php

package.json

modules/javascript/partytown-web-worker/can-load.php

…correctly

.github/CODEOWNERS

swissspidy · 2024-02-04T22:05:03Z

modules/js-and-css/partytown-web-worker/load.php

@@ -0,0 +1,139 @@
+<?php
+/**
+ * Module Name: Partytown Web Worker


Do we really want to call the module Partytown?

IMHO usage of the Partytown library is just an implementation detail.

Agreed. A less-specific name would be "Web Worker Offloading". I asked Bard for some alternative names, and it suggested "Threadshift". I like that, but it is trademarked.

That makes sense. If you have a certain name in mind, do let me know, and I will edit it.

How about Web Worker Offloading for now?

SGTM, some more names:

Scripts offloading/offloader (in the description add a reference to Web Worker and/or Partytown).

Third-party JS offloader

Non-critical JS offloader

I will defer name selection to you.

Those are some good options but I like Web Worker Offloading.

The JS being offloaded may not be third-party. It may also be critical, but just offloaded so it can run in another thread.

Suggested change

* Module Name: Partytown Web Worker

* Module Name: Web Worker Offloading

westonruter · 2024-02-05T22:02:15Z

Since we're currently in the middle of re-plumbing for standalone plugins, I'm going to re-base this branch to a ~~feature/partytown~~ feature/web-worker-offloading branch. I don't think this feature should be released as a module but rather as a standalone plugin, right? cc @mukeshpanchal27 @joemcgill

westonruter · 2024-02-15T21:53:34Z

.gitignore

@@ -33,6 +34,7 @@ build-cs/composer.lock
 node_modules/
 vendor/

+modules/js-and-css/partytown-web-worker/assets/js/partytown


This will necessitate introducing a .distignore file to replace the .gitattributes file as explained in #893 (comment).

westonruter

Since this would certainly get released as a standalone plugin on Wordpress.org, it seems we'd need to have the plugin actually do something without needing to code. Otherwise, I understand that the plugin review team would reject the plugin as a "framework plugin". I recall there was some discussion of what this could do by default, without there being a clear answer. Would there need to be a UI to select scripts to opt-in? Humm.

westonruter · 2024-02-27T16:39:22Z

module-i18n.php

@@ -9,6 +9,8 @@
 	_x( 'Creates WebP versions for new JPEG image uploads if supported by the server.', 'module description', 'performance-lab' ),
 	_x( 'Enqueued Assets Health Check', 'module name', 'performance-lab' ),
 	_x( 'Adds a CSS and JS resource check in Site Health status.', 'module description', 'performance-lab' ),
+	_x( 'Partytown Web Worker', 'module name', 'performance-lab' ),


Suggested change

_x( 'Partytown Web Worker', 'module name', 'performance-lab' ),

_x( 'Web Worker Offloading', 'module name', 'performance-lab' ),

westonruter · 2024-02-27T16:39:34Z

modules/js-and-css/partytown-web-worker/load.php

@@ -0,0 +1,139 @@
+<?php
+/**
+ * Module Name: Partytown Web Worker


Suggested change

* Module Name: Partytown Web Worker

* Module Name: Web Worker Offloading

westonruter · 2024-02-27T16:40:13Z

tests/modules/js-and-css/partytown-web-worker/partytown-web-worker-test.php

@@ -0,0 +1,139 @@
+<?php
+/**
+ * Test cases for Partytown Web Worker module.


Suggested change

* Test cases for Partytown Web Worker module.

* Test cases for Web Worker Offloading module.

westonruter · 2024-02-27T16:48:28Z

modules/js-and-css/partytown-web-worker/load.php

+
+	$partytown_handles = array();
+	foreach ( $wp_scripts->registered as $handle => $script ) {
+		if ( ! empty( $script->deps ) && in_array( 'partytown', $script->deps, true ) ) {


Correct me if I'm wrong, but let's say you have an existing script in a theme like:

wp_enqueue_script( 'foo', 'https://example.com/foo.js' );

In order to opt-in this script to use Partytown, you'd have to do this if you wanted to opt-in from a separate plugin:

wp_scripts()->registered['foo']->deps[] = 'partytown';

Is that right?

Yup, that should do the trick.

adamsilverstein · 2024-02-28T22:52:52Z

Since this would certainly get released as a standalone plugin on Wordpress.org, it seems we'd need to have the plugin actually do something without needing to code

We could have it automatically apply to analytics scripts where it is expected to work well - although those may not be enqueued with wp_scripts.

thelovekesh · 2024-03-01T15:12:55Z

We could have it automatically apply to analytics scripts where it is expected to work well - although those may not be enqueued with wp_scripts.

If the user wishes to offload these common scripts, it would be preferable if there was an opt-in form on some sort of options page. Alternatively, the user may utilize this as a framework to offload scripts.

There are two scenarios I can think of if the user opts in for script auto-offloading:

They should be enqueued with wp_scripts, and we could use something like wp_scripts()->registered['foo']->deps[] = 'partytown';
Alternatively, if any script tags are inline scripts added to the page's head or footer, we will need to parse every script tag on the page and offload the above-mentioned common scripts if available before the output buffer.

westonruter · 2024-03-12T23:50:57Z

Just noting this can be updated to use the new standalone plugin structure.

westonruter

Approving to continue work in the feature branch

adamsilverstein

Looking good! Lets keep iterating and testing in the branch.

thelovekesh requested review from aristath and sgomes as code owners October 13, 2022 07:09

thelovekesh mentioned this pull request Oct 13, 2022

Add partytown support to run scripts in Worker Thread #271

Closed

3 tasks

thelovekesh changed the title ~~Feature/add partytown module~~ feature(javascript): add partytown module Oct 13, 2022

thelovekesh changed the title ~~feature(javascript): add partytown module~~ Add partytown module Oct 13, 2022

thelovekesh requested review from JustinyAhin and felixarntz as code owners October 13, 2022 08:50

thelovekesh commented Oct 13, 2022

View reviewed changes

.github/workflows/deploy-dotorg.yml Outdated Show resolved Hide resolved

mukeshpanchal27 added [Type] Enhancement A suggestion for improvement of an existing feature [Focus] JavaScript no milestone PRs that do not have a defined milestone for release labels Oct 18, 2022

adamsilverstein reviewed Nov 29, 2023

View reviewed changes

modules/javascript/partytown-web-worker/load.php Outdated Show resolved Hide resolved

adamsilverstein reviewed Nov 29, 2023

View reviewed changes

modules/javascript/partytown-web-worker/load.php Outdated Show resolved Hide resolved

adamsilverstein reviewed Nov 29, 2023

View reviewed changes

modules/javascript/partytown-web-worker/load.php Outdated Show resolved Hide resolved

westonruter reviewed Nov 29, 2023

View reviewed changes

westonruter mentioned this pull request Dec 5, 2023

Add JS build step to utilize local copy of web-vitals.js #893

Closed

joemcgill mentioned this pull request Dec 18, 2023

Making standalone plugins usable before they're released to the plugin repo #911

Closed

thelovekesh force-pushed the feature/add-partytown-module branch from 293f408 to 94eb6bb Compare January 20, 2024 08:09

thelovekesh requested a review from mukeshpanchal27 as a code owner January 20, 2024 08:09

thelovekesh commented Jan 20, 2024

View reviewed changes

admin/load.php Outdated Show resolved Hide resolved

thelovekesh requested review from westonruter and adamsilverstein January 20, 2024 20:28

westonruter reviewed Jan 23, 2024

View reviewed changes

modules/javascript/partytown-web-worker/load.php Outdated Show resolved Hide resolved

westonruter reviewed Jan 23, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

thelovekesh force-pushed the feature/add-partytown-module branch from d1c3417 to 7a92fa7 Compare January 26, 2024 12:41

westonruter reviewed Jan 26, 2024

View reviewed changes

modules/javascript/partytown-web-worker/can-load.php Outdated Show resolved Hide resolved

thelovekesh force-pushed the feature/add-partytown-module branch from ac2c9d0 to 7afe9e9 Compare February 3, 2024 14:38

thelovekesh added 10 commits February 3, 2024 20:10

Update build command in workflows

5bbcd2c

Add .asset.php files to exclude from PHPCS

efd16cb

Update module-i18n.php

77f3907

Update plugin path to remove any trailing slashes

6b0b88f

Update partytown tests path

41f4c9a

Update partytown module tests cases

1f46191

Update partytown module tests cases to reset wp scripts global state …

35412eb

…correctly

Update substr offset to keep the logic clean

0095e8f

Add @thelovekesh

195886b

Add build assets steps in workflows

f9f2a5e

thelovekesh requested review from westonruter and adamsilverstein February 4, 2024 15:22

swissspidy reviewed Feb 4, 2024

View reviewed changes

.github/CODEOWNERS Show resolved Hide resolved

swissspidy reviewed Feb 4, 2024

View reviewed changes

westonruter changed the base branch from trunk to feature/web-worker-offloading February 5, 2024 22:03

westonruter reviewed Feb 15, 2024

View reviewed changes

westonruter reviewed Feb 27, 2024

View reviewed changes

thelovekesh changed the title ~~Add partytown module~~ Add Web Worker Offloading module Mar 1, 2024

westonruter mentioned this pull request Mar 11, 2024

Move image-loading-optimization from module to plugin #1040

Merged

3 tasks

westonruter approved these changes Apr 29, 2024

View reviewed changes

adamsilverstein approved these changes Apr 29, 2024

View reviewed changes

thelovekesh merged commit 1f949f4 into WordPress:feature/web-worker-offloading Apr 29, 2024
45 of 46 checks passed

thelovekesh deleted the feature/add-partytown-module branch April 29, 2024 16:00

thelovekesh mentioned this pull request May 24, 2024

Add web worker offloading plugin #1247

Merged

adamsilverstein mentioned this pull request Sep 24, 2024

Reconsider approach of using script dependencies to opt-in a script for worker offloading #1468

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Web Worker Offloading module #556

Add Web Worker Offloading module #556

thelovekesh commented Oct 13, 2022

adamsilverstein Nov 29, 2023

thelovekesh Jan 20, 2024

adamsilverstein Jan 30, 2024

adamsilverstein commented Nov 29, 2023

thelovekesh commented Nov 29, 2023

swissspidy Feb 4, 2024

westonruter Feb 5, 2024

thelovekesh Feb 6, 2024

westonruter Feb 6, 2024

thelovekesh Feb 10, 2024

westonruter Feb 12, 2024

westonruter Feb 27, 2024

westonruter commented Feb 5, 2024 •

edited

Loading

westonruter Feb 15, 2024

westonruter left a comment

westonruter Feb 27, 2024

westonruter Feb 27, 2024

westonruter Feb 27, 2024

westonruter Feb 27, 2024

thelovekesh Mar 1, 2024

adamsilverstein commented Feb 28, 2024

thelovekesh commented Mar 1, 2024

westonruter commented Mar 12, 2024

westonruter left a comment

adamsilverstein left a comment

	* Module Name: Partytown Web Worker
	* Module Name: Web Worker Offloading

	_x( 'Partytown Web Worker', 'module name', 'performance-lab' ),
	_x( 'Web Worker Offloading', 'module name', 'performance-lab' ),

	* Test cases for Partytown Web Worker module.
	* Test cases for Web Worker Offloading module.

Add Web Worker Offloading module #556

Add Web Worker Offloading module #556

Conversation

thelovekesh commented Oct 13, 2022

Summary

Relevant technical choices

Screencast

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamsilverstein commented Nov 29, 2023

thelovekesh commented Nov 29, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented Feb 5, 2024 • edited Loading

Choose a reason for hiding this comment

westonruter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamsilverstein commented Feb 28, 2024

thelovekesh commented Mar 1, 2024

westonruter commented Mar 12, 2024

westonruter left a comment

Choose a reason for hiding this comment

adamsilverstein left a comment

Choose a reason for hiding this comment

westonruter commented Feb 5, 2024 •

edited

Loading