How to know what is the weight of a web request in Javascript only?

As a Web Analyst, I am trying to know what the actual difference is between Client side data collection vs Server Side data collection for the web performance.

For my website, I injected 2 Google Tag Manager (GTM) containers on the client side :

Client container 1 : Used for Server side tracking only :

• 1 big data flow is sent to my server side GTM container.

Client container 2 : Used for Client side tracking only :

• Multiple data flows are defined and sent to the chosen third party tools.

At this point, I know that my first container used for server side tracking is lighter than the 2nd one. The thing is that I would like to track what the actual difference is in terms of weight, for a page.

In the end, my objective is to show that, for a single page, 30kb is nothing, but when you analyse the difference between both implementation methods for a big platform that does 300.000.000 sessions a year, the difference is counted into Terabytes for this slight implementation method difference.

I know that some similar questions were posted here, but I can not figure out how to make the "solutions" work.

As shown here, I would like to try and get the following information for each request in Javascript :

• Size
• Time spent
• URL
• Type (Javascript, image, ...)
• Distinct if a request is in cache or not

In the end, I would agregate the result of this thing inside an array before sending the data to my analytics tools.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'event': 'customEvent',
    'event_type': 'global_performance',
    
    'request_list': [{
        'request_shortened_url': "GTM-XXXXXXXX", // str - Simplified request URL (or full URL if too complex for some cases)
        'request_size': 10, // short - size of the request, in bytes
        'request_time': 54, // short - time taken by the request, in ms
        'request_type': "javascript", // str - request type (is it either a javascript code, an image, or else...)
        'request_cached': true, // bool - True if the request is in cache, false otherwise
    },{
        /* And so on for the other requests */
    }]
});

I definitely know that third party tools like Google Analytics, Matomo, Piwik Pro, Adobe Analytics, Piano (etc...) are not designed to workaround this kind of issues natively, but I would love to give it a try.

I already spent hours trying to make this kind of thing work, without any success.

Thank you in advance for your answers. Do not hesitate asking questions if I am unclear.

but when you analyse the difference between both implementation methods for a big platform that does 300.000.000 sessions a year, the difference is counted into Terabytes for this slight implementation method difference.

You correctly compare the 30kb difference to the size of the page, but then you fail to do the comparison right after it. If you want to look at abstract absolute numbers, you should compare it to other abstract absolute numbers. In this case, an adequate comparison would be to the total Internet traffic in a year. In short, the terabytes of difference is nothing.

Another issue is your DL usage. You don't need DL for this unless you want to offload this work to the front-end. You generally just want to contain this logic in a CJS variable in GTM.

Finally, yes, you can get your hands on that information. Through the performance API

Here, take a look:

That should be ample for this kind of tracking.

That said, I wouldn't be wasting a dimension on this. Maybe I would want to track time to interactive, but tracking every library load times is an overkill in vast majority of cases, including large enterprise sites. There's absolutely no business case to build with just large absolute numbers not being properly cross-referenced and compared to proper industry standards.