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.