Module for integrating BuilderIO/partytown library functionality into Magento 2 project

With this module you will be able to use the BuilderIO/partytown in your Magento 2 project, which will allow you to optimize the frontend part of your project by separating the execution of analytics scripts into a separate thread of the webworker.

A small example of how this can affect TBT ( and not only ) metrics when validated with Lighthouse Api

Traditional connection / with Partytown module:

Requirements:

1. PHP 8.1 or higher
2. Magento 2.4.4 or higher
3. Node.js v16 or higher
4. configured https for the domain ( for correct work of service wokers )
5. Optional : configured reverse proxy for correct loading of some scripts ( see below )

Installing the module

1. composer config repositories.perspective-magento2-partytown git [email protected]:rostilos/perspective-partytown.git
2. composer require perspective/magento2-partytown dev-master
3. php bin/magento setup:upgrade
4. bin/magento setup:di:compile
5. php bin/magento setup:static-content:deploy
6. Clear all Cache

Updating partytown npm packages

The library files provided by the npm package @builder.io/partytown are already added to the module files, but in case you want to update them, it is recommended to do the following :

1. cd _magento-root_/vendor/perspective/magento2-partytown
2. npm install ( node v16+ required )
3. npm run partytown

Note that if you update the composer package, or reinstall it, you will revert to the existing version in the repository. This is planned to be fixed in future updates

Configurations

In order for scripts to be loaded and executed in a separate thread of the webworker - you need to set the appropriate type ( text/partytown ) when connecting them. Using the example of GMT :

<!-- Google Tag Manager -->
<script type="text/partytown">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
<!-- End Google Tag Manager -->

Configuration of the module is managed through the admin panel, where you can select the list of available analytics services that will be allocated for execution in the webworker, as well as specify other configurations that affect the functionality of the library

For correct work it is recommended to specify url to reverse proxy

Example of a self-hosted implementation using nodejs

Example of a self-hosted implementation using warden and custom container for revense-proxy ( nginx based )

The official documentation provides a list of possible reverse-proxy implementations.

In my practice I have tried the approach using Cloudflare Workers

Cloudflare Workers can be used as a reverse proxy ( more for testing purposes or for sites with low traffic due to Cloudflare limitations ) proxied with Cloudflare