Firefox网络分析资源大小与传输量不符、字体重复加载咨询

Firefox开发者工具网络面板默认会显示两个体积维度：一个是资源解压解析后的原始体积，一个是实际网络链路中传输的体积，二者不一致是非常常见的情况，结合你用的ModX+PHP-FPM+Zend OPcache技术栈，成因按概率从高到低排列：

• 传输压缩生效：如果你的服务端（Nginx/Apache）或者PHP层开启了gzip/Brotli压缩，CSS这类文本类资源压缩率通常可达60%-80%，传输体积会远小于原始文件体积。你可以点击对应CSS请求，在响应头中查找Content-Encoding字段，如果值为gzip/br即可确认是压缩导致的差异。
• 缓存机制触发：如果请求状态码显示为200 OK (from disk cache)/200 OK (from memory cache)，说明资源是直接从本地缓存读取，实际传输体积会显示为0或者极小的协商报文体积，和原始文件大小差异明显。
• 你提到的“未使用CSS被自动剔除”不会是默认行为：Zend OPcache仅负责缓存PHP编译后的字节码，优化PHP执行效率，完全不会处理静态CSS文件；ModX核心也没有内置CSS Tree-shake功能，除非你额外安装了前端优化插件、或者接入了CDN做了CSS精简，否则服务端不会自动移除未使用的CSS代码，你可以直接对比响应返回的CSS内容和源文件长度即可验证。

你贴的@font-face写法存在不规范的问题，结合ModX的架构特性，可以按以下顺序排查，不需要实际访问站点也能定位90%以上的同类问题：

• 首先修正@font-face声明：你当前的写法没有加format()格式标识，浏览器在CSSOM解析、页面渲染绘制两个阶段可能重复发起资源识别请求，修正后的标准写法参考：

@font-face {
    font-family: 'Montserrat';
    src: url('https://domain.online/manager/templates/default/fonts/montserrat-regular.ttf') format('truetype');
    font-display: swap;
}

fa-solid-900.woff2对应的@font-face声明也可以用同样逻辑检查，补全format('woff2')标识。

• 检查是否存在重复引用：你提到的字体路径属于ModX后台默认模板的资源路径，如果前台页面错误引入了后台的公共CSS文件，同时自身前端模板又重复写了一次同路径的字体声明，浏览器解析到重复的资源引用时就会触发两次加载。你可以在浏览器元素面板的样式搜索框中直接搜索两个字体的文件名，查看有多少条CSS规则引用了对应资源即可确认。
• 检查跨域/跨协议触发：如果站点同时存在HTTP/HTTPS、www/非www的访问入口，或者静态资源域名和主站域名不一致且没有配置正确的CORS头，浏览器会在首次预加载、实际渲染两个阶段分别发起跨域、非跨域的两次请求，你可以对比两个重复请求的请求头Host、Origin、Referer字段是否完全一致即可定位。
• 排查浏览器扩展影响：部分字体替换、广告拦截类扩展会拦截原生字体请求后重新发起拉取，你可以开启Firefox的故障排除模式（禁用所有扩展）后刷新页面，如果重复加载消失，逐个启用扩展定位冲突项即可。

内容的提问来源于stack exchange，提问作者benni