Distinguish generic mtc.js from dynamic mtc.js #4017

Initially reported on https://github.com/mautic/mautic/issues/4017

Description:
The load of the mtc.js file is quite long on web browser. One of the opportunity to optimize that load, is to add a cache control to the mtc.js.

Unfortunately, there are small dynamic pieces in the mtc.js if the mautic user has web notifications, pages, (gated videos ?) and dynamic contents. Because of that, it is NOT possible to add the cache control.

Recommandation
Create a core mtc.js that is ALWAYS the same and that includes a cache control.
Create a “dynamic” script (eg: mtc_dynamic.js) that includes variations hereabove which will be generated each time if needed.

This optimization request has been +1 by many GH users.

I agree. I’m new to Mautic and while overall I’m very excited about the possibilities, I quickly noticed mtc.js is ~135kb, when drip.com’s is, for example, 41kb (and linkedIn’s, which admittedly only does basic tracking, is 13kb). I can probably deal with the size, but it would be great to separate base code so it can be better cached, and then have an advanced features aggregated .js file (I imagine checking the boxes of the advanced features I intend to use and getting the smallest features .js file that can support it).

p.s. for those interested in a minor hack, if you don’t use gated video (surely that’s a small minority), commenting out one line of code in /app/bundles/PageBundle/EventListener/BuildJsSubscriber.php,
[‘onBuildJsForVideo’, 256], (around line 56)
as per https://www.robertwent.com/blog/cutting-size-mautic-javascript-tracking-script/

Reduces mtc.js from ~135kb to ~49k
But of course, you’ll need to re-do the hack after the each upgrade.

Obviously, creating a longer cache would be a great enhancement as well.

1 Like

One other hack that seems to work (so far) is to load yourmautic/mtc.js in your browser, save it locally, then upload the file to (let’s say) /media/js and manually change the file request URL in your tracking code to reference yourmautic/media/js/mtc.js instead of yourmautic/mtc.js. As a static file (instead of a php request that generates and minifies on the fly), it loads much faster.

It would be great to see options to (a) exclude gated video code (and any other advanced features that could be optioned-out) and (b) generate a static file (maybe putting it in cache so that it is regenerated any time the cache is cleared?)

1 Like

Is there any documentation or code that tells us which parts need to be dynamic?