Tracking actual data transfer (images, videos, assets)

I'm trying to track the actual amount of data transferred when a user loads a page, including:

• Images
• Videos
• CSS
• JavaScript
• Fonts
• Assets served from S3/CloudFront

I tried measuring the Laravel response size, but that only includes the HTML/JSON returned by Laravel and not the assets loaded by the browser.

I also tried using the browser Performance API (performance.getEntriesByType('resource')), but many external/CDN resources report a transfer size of 0.

What is the recommended way to accurately track the total data transferred for a user/page load? Is there a reliable approach for capturing all asset downloads, including files served from CloudFront and S3?