使用Early Hints预加载CCM19脚本触发警告：预加载资源未及时使用

针对你遇到的预加载CCM19脚本触发浏览器警告的问题，可从以下几个方向排查和解决：

1. 确保预加载URL与实际加载URL完全一致 #

浏览器只会复用完全匹配的预加载资源，若URL存在差异（包括协议、参数转义、域名格式），预加载的资源会被闲置，触发警告：

• 检查预加载URL是否带协议（https://或//），避免浏览器解析为相对路径
• 修正配置中的转义字符：
  • NGINX配置无需转义<>和&：

    add_header Link "<https://www.example.com/app.js?apiKey=000000&domain=111111>; rel=preload; as=script";
    

  • TypoScript配置直接使用&而非&：

    config.additionalHeaders {
        100.header = Link: <https://www.example.com/app.js?apiKey=000000&domain=111111>; rel=preload; as=script
    }
    

  • HTML标签修正转义，补充协议：

    <link rel="preload" as="script" href="https://www.example.com/app.js?apiKey=000000&domain=111111" referrerpolicy="origin">
    

2. 验证预加载资源是否被实际复用 #

打开浏览器开发者工具Network面板：

• 查看预加载资源（Initiator标记为Preload）的状态，若显示200但后续又出现同脚本的新请求，说明URL不匹配，未复用预加载资源
• 确认页面中加载CCM19的<script>标签URL与预加载URL完全一致

3. 调整脚本加载时机 #

警告触发的核心原因是预加载资源在window.load事件后几秒内未被使用：

• 若CCM19脚本是延迟加载（如用户交互后才加载），可改为页面初始化时立即引用该脚本，让浏览器复用预加载资源
• 避免通过动态脚本注入的方式加载CCM19（或确保动态注入的URL与预加载URL完全一致），否则浏览器无法识别复用预加载资源

4. 排查TYPO3配置有效性 #

• 检查TypoScript的additionalHeaders是否被其他配置覆盖（可通过查看页面响应头确认Link头是否正确输出）
• 确保HTML中的<link rel="preload">标签放在<head>标签内，保证浏览器尽早处理预加载请求

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