Javascript 监视HTML5小程序数据使用情况

我正在开发一个HTML5小程序，用于所有报价和客户数据跟踪。在路上使用它的人抱怨他们的手机数据使用率很高。我已经在gzip服务器端的所有东西，缓存所有的资源文件和缓存15天的图像文件

在JS中有没有一种方法可以跟踪所有下载数据，或者在PHP中跟踪每次调用发送的字节？我知道如何跟踪所有ajax调用，但我希望有一个通用函数，它还可以跟踪页面加载量和图像大小，以便真正跟踪应该在哪些方面提高总体数据使用率

例如

document.onitemload=function（）{}

服务器是带有apache和PHP 7的centos 7
您是否尝试打开浏览器的控制台，特别是它的“网络”选项卡？是的，我可以在测试时检查自己的数据使用情况。我希望看到真实世界的应用程序，这样我就不必猜测了