Integrate Web Worker Offloading with Rank Math SEO

[westonruter]

Summary

Previously #1563 to integrate Web Worker Offloading with WooCommerce.

This integrates Rank Math SEO's Google Analytics integration with Partytown to offload gtag() to a worker. Inline scripts now no longer block a registered script from being offloaded to a worker; any associated inline scripts are also offloaded to a worker.

This is part of #1455.

Diff of Prettier-formatted page with plugin active

--- wwo-disabled.html	2024-11-20 16:55:26.821253220 -0800
+++ wwo-enabled.html	2024-11-20 17:02:26.304266209 -0800
@@ -1070,9 +1070,10 @@
 		<meta name="generator" content="dominant-color-images 1.1.2" />
 		<meta
 			name="generator"
-			content="performance-lab 3.6.1; plugins: auto-sizes, dominant-color-images, embed-optimizer, image-prioritizer, performant-translations, speculation-rules, webp-uploads"
+			content="performance-lab 3.6.1; plugins: auto-sizes, dominant-color-images, embed-optimizer, image-prioritizer, performant-translations, speculation-rules, web-worker-offloading, webp-uploads"
 		/>
 		<meta name="generator" content="performant-translations 1.2.0" />
+		<meta name="generator" content="web-worker-offloading 0.1.1" />
 		<meta name="generator" content="webp-uploads 2.3.0" />
 		<meta name="generator" content="speculation-rules 1.3.1" />
 		<meta name="generator" content="optimization-detective 0.9.0-alpha" />
@@ -1082,8 +1083,9 @@
 			id="google_gtagjs"
 			src="https://www.googletagmanager.com/gtag/js?id=G-RSERXH3Y5M"
 			async
+			type="text/partytown"
 		></script>
-		<script id="google_gtagjs-inline">
+		<script id="google_gtagjs-inline" type="text/partytown">
 			window.dataLayer = window.dataLayer || [];
 			function gtag() {
 				dataLayer.push( arguments );
@@ -1888,6 +1890,288 @@
 			src="http://localhost:8888/wp-content/themes/twentytwentyone/assets/js/responsive-embeds.js?ver=2.4"
 			id="twenty-twenty-one-responsive-embeds-script-js"
 		></script>
+		<script id="web-worker-offloading-js-before">
+			window.partytown = {
+				...( window.partytown || {} ),
+				...{
+					lib: '\/wp-content\/plugins\/web-worker-offloading\/build\/',
+					debug: true,
+					globalFns: [ 'gtag' ],
+					forward: [ 'dataLayer.push' ],
+				},
+			};
+		</script>
+		<script id="web-worker-offloading-js-after">
+			/* Partytown 0.10.2-dev1727590485751 - MIT builder.io */
+			const defaultPartytownForwardPropertySettings = {
+				preserveBehavior: false,
+			};
+
+			const resolvePartytownForwardProperty = (
+				propertyOrPropertyWithSettings
+			) => {
+				if ( 'string' == typeof propertyOrPropertyWithSettings ) {
+					return [
+						propertyOrPropertyWithSettings,
+						defaultPartytownForwardPropertySettings,
+					];
+				}
+				const [
+					property,
+					settings = defaultPartytownForwardPropertySettings,
+				] = propertyOrPropertyWithSettings;
+				return [
+					property,
+					{
+						...defaultPartytownForwardPropertySettings,
+						...settings,
+					},
+				];
+			};
+
+			const arrayMethods = Object.freeze(
+				( ( obj ) => {
+					const properties = new Set();
+					let currentObj = obj;
+					do {
+						Object.getOwnPropertyNames( currentObj ).forEach(
+							( item ) => {
+								'function' == typeof currentObj[ item ] &&
+									properties.add( item );
+							}
+						);
+					} while (
+						( currentObj = Object.getPrototypeOf( currentObj ) ) !==
+						Object.prototype
+					);
+					return Array.from( properties );
+				} )( [] )
+			);
+
+			! ( function (
+				win,
+				doc,
+				nav,
+				top,
+				useAtomics,
+				config,
+				libPath,
+				timeout,
+				scripts,
+				sandbox,
+				mainForwardFn = win,
+				isReady
+			) {
+				function ready() {
+					if ( ! isReady ) {
+						isReady = 1;
+						libPath =
+							( config.lib || '/~partytown/' ) +
+							( false !== config.debug ? 'debug/' : '' );
+						if ( '/' == libPath[ 0 ] ) {
+							scripts = doc.querySelectorAll(
+								'script[type="text/partytown"]'
+							);
+							if ( top != win ) {
+								top.dispatchEvent(
+									new CustomEvent( 'pt1', {
+										detail: win,
+									} )
+								);
+							} else {
+								timeout = setTimeout( fallback, 999999999 );
+								doc.addEventListener( 'pt0', clearFallback );
+								useAtomics
+									? loadSandbox( 1 )
+									: nav.serviceWorker
+									? nav.serviceWorker
+											.register(
+												libPath +
+													( config.swPath ||
+														'partytown-sw.js' ),
+												{
+													scope: libPath,
+												}
+											)
+											.then( function ( swRegistration ) {
+												if ( swRegistration.active ) {
+													loadSandbox();
+												} else if (
+													swRegistration.installing
+												) {
+													swRegistration.installing.addEventListener(
+														'statechange',
+														function ( ev ) {
+															'activated' ==
+																ev.target
+																	.state &&
+																loadSandbox();
+														}
+													);
+												} else {
+													console.warn(
+														swRegistration
+													);
+												}
+											}, console.error )
+									: fallback();
+							}
+						} else {
+							console.warn(
+								'Partytown config.lib url must start with "/"'
+							);
+						}
+					}
+				}
+				function loadSandbox( isAtomics ) {
+					sandbox = doc.createElement(
+						isAtomics ? 'script' : 'iframe'
+					);
+					win._pttab = Date.now();
+					if ( ! isAtomics ) {
+						sandbox.style.display = 'block';
+						sandbox.style.width = '0';
+						sandbox.style.height = '0';
+						sandbox.style.border = '0';
+						sandbox.style.visibility = 'hidden';
+						sandbox.setAttribute( 'aria-hidden', ! 0 );
+					}
+					sandbox.src =
+						libPath +
+						'partytown-' +
+						( isAtomics
+							? 'atomics.js?v=0.10.2-dev1727590485751'
+							: 'sandbox-sw.html?' + win._pttab );
+					doc.querySelector(
+						config.sandboxParent || 'body'
+					).appendChild( sandbox );
+				}
+				function fallback( i, script ) {
+					console.warn( 'Partytown script fallback' );
+					clearFallback();
+					top == win &&
+						( config.forward || [] ).map(
+							function ( forwardProps ) {
+								const [ property ] =
+									resolvePartytownForwardProperty(
+										forwardProps
+									);
+								delete win[ property.split( '.' )[ 0 ] ];
+							}
+						);
+					for ( i = 0; i < scripts.length; i++ ) {
+						script = doc.createElement( 'script' );
+						script.innerHTML = scripts[ i ].innerHTML;
+						script.nonce = config.nonce;
+						doc.head.appendChild( script );
+					}
+					sandbox && sandbox.parentNode.removeChild( sandbox );
+				}
+				function clearFallback() {
+					clearTimeout( timeout );
+				}
+				config = win.partytown || {};
+				top == win &&
+					( config.forward || [] ).map( function ( forwardProps ) {
+						const [
+							property,
+							{ preserveBehavior: preserveBehavior },
+						] = resolvePartytownForwardProperty( forwardProps );
+						mainForwardFn = win;
+						property
+							.split( '.' )
+							.map( function ( _, i, forwardPropsArr ) {
+								mainForwardFn = mainForwardFn[
+									forwardPropsArr[ i ]
+								] =
+									i + 1 < forwardPropsArr.length
+										? mainForwardFn[
+												forwardPropsArr[ i ]
+										  ] ||
+										  ( ( propertyName ) =>
+												arrayMethods.includes(
+													propertyName
+												)
+													? []
+													: {} )(
+												forwardPropsArr[ i + 1 ]
+										  )
+										: ( () => {
+												let originalFunction = null;
+												if ( preserveBehavior ) {
+													const {
+														methodOrProperty:
+															methodOrProperty,
+														thisObject: thisObject,
+													} = ( (
+														window,
+														properties
+													) => {
+														let thisObject = window;
+														for (
+															let i = 0;
+															i <
+															properties.length -
+																1;
+															i += 1
+														) {
+															thisObject =
+																thisObject[
+																	properties[
+																		i
+																	]
+																];
+														}
+														return {
+															thisObject:
+																thisObject,
+															methodOrProperty:
+																properties.length >
+																0
+																	? thisObject[
+																			properties[
+																				properties.length -
+																					1
+																			]
+																	  ]
+																	: void 0,
+														};
+													} )( win, forwardPropsArr );
+													'function' ==
+														typeof methodOrProperty &&
+														( originalFunction = (
+															...args
+														) =>
+															methodOrProperty.apply(
+																thisObject,
+																...args
+															) );
+												}
+												return function () {
+													let returnValue;
+													originalFunction &&
+														( returnValue =
+															originalFunction(
+																arguments
+															) );
+													( win._ptf =
+														win._ptf || [] ).push(
+														forwardPropsArr,
+														arguments
+													);
+													return returnValue;
+												};
+										  } )();
+							} );
+					} );
+				if ( 'complete' == doc.readyState ) {
+					ready();
+				} else {
+					win.addEventListener( 'DOMContentLoaded', ready );
+					win.addEventListener( 'load', ready );
+				}
+			} )( window, document, navigator, top, window.crossOriginIsolated );
+		</script>
 		<script type="module">
 			console.log(
 				'[Optimization Detective] Inspect URL Metrics: ' + '

Looking at the network logs:

Without plugin active:

With plugin active:

Relevant technical choices

The integration is not targeting the \RankMath\Analytics\GTag::enqueue_gtag_js() code which is only used for WP<5.7. In WP 5.7, the wp_script_attributes and wp_inline_script_attributes filters were introduced, and Rank Math then deemed it preferable to use wp_print_script_tag() and wp_print_inline_script_tag() rather than wp_enqueue_script() and wp_add_inline_script(), respectively. Since Web Worker Offloading requires WP 6.5+, there is no point to integrate with the pre-5.7 code in Rank Math.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: westonruter <[email protected]>
Co-authored-by: adamsilverstein <[email protected]>
Co-authored-by: mukeshpanchal27 <[email protected]>
Co-authored-by: kafleg <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[westonruter]

Thanks to @joemcgill for offering to connect with someone to test.

[westonruter]

Build for testing: web-worker-offloading.zip

[mukeshpanchal27]

@westonruter @joemcgill, one of my community friends, @kafleg, is a sponsored contributor working with Rank Math SEO. I recently reached out to him, and he’s happy to help us test these integrations.

Ganga, please let us know your findings or if you need anything from us.

[kafleg]

Hi @mukeshpanchal27

We tested this PR and it is working as expected.

Thank you

[adamsilverstein]

thanks for adding this comment!

[adamsilverstein]

assume this is a "permalink"?

[westonruter]

It's a @link to show what part of RankMath this code is related to.

[adamsilverstein]

right, I meant the github link is from the 'copy permalink' menu:

I get https://github.com/rankmath/seo-by-rank-math/blob/6d081340b126ea80232b0bafa295ede6fa69430b/includes/modules/analytics/class-gtag.php#L161-L167 for that on master

[adamsilverstein]

• I believe using this type of link makes it work even if the code is moved or deleted.

[westonruter]

Oh yes, sorry, exactly. I forgot that GitHub used the "permalink" term. So yes, this link ensures that the code reference doesn't change when changes are added.

[adamsilverstein]

noting this function is exactly the same as the previous one other than this string. probably fine, but if they got any more complex it would make sense to combine them somehow.

[westonruter]

Yes, although the previous function is targeting wp_script_attributes whereas this one is targeting wp_inline_script_attributes, so I think they would make sense separate in any case.

[adamsilverstein]

Lovely!