在 TYPO3 中预加载脚本或 CSS答案

【问题标题】：Preload Script or CSS in TYPO3在 TYPO3 中预加载脚本或 CSS
【发布时间】：2020-07-20 15:51:26
【问题描述】：

我在 TYPO3 9.5.15 中压缩了一些压缩的 JS 和 CSS 文件。我正在努力获得更好的 Google PageSpeed 排名。我得到了这个提示，但我不知道如何让 TYPO3 预加载那些压缩文件。

现在看起来像这样：

    page.includeJSFooterlibs {
        jquerycore = EXT:web4brelaunch/Resources/Public/JavaScript/jquery/jquery-3.1.1.min.js
    }

【问题讨论】：

标签： html typo3 google-pagespeed

【解决方案1】：

我认为 TYPO3 目前不支持链接预加载，但是在添加库时，您可以同时包含已最小化的库版本（如您所做的那样）headerData 和 footerData 同时解决它。以这种方式包含它时，TYPO3 既不会缩小也不会合并此文件。

page.headerData {
    10 = TEXT
    10.value = <link rel="preload" href="/typo3conf/ext/web4brelaunch/Resources/Public/JavaScript/jquery/jquery-3.1.1.min.js" as="script">
}
page.footerData {
    10 = TEXT
    10.value = <script src="/typo3conf/ext/web4brelaunch/Resources/Public/JavaScript/jquery/jquery-3.1.1.min.js" defer></script>
}

有关 rel 预加载的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

【讨论】：

但是会这样合并压缩吗？
你是对的。我错过了您问题中的“压缩”。抱歉，在 TYPO3 中启用压缩和/或串联时，这不起作用。我会更改我的回复以明确说明。

【解决方案2】：

有几种预加载技术：1）HTML <link rel>，2）HTTP Link: 标头，3）HTTP 早期提示

为了在 TYPO3 中获取 JS/CSS 资产的最终 URL，您应该使用资产后处理事件/挂钩：

参见https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/10.4/Feature-90899-IntroduceAssetPreRenderingEvents.html（v10 的事件，也包含 v9-hooks 的引用）。

钩子/`Link:`

作为示例 (v9)：EXT:http2_push 设置 Link: 标头

早期提示

遗憾的是，对于 TYPO3，我们不能轻易使用 Early hints，因为我们现在可能不是页面呈现之前资产的最终 URI。如果您可以调整您的构建/实例以获得稳定的资产 URI（也可以考虑 ?timestamp），这在我看来真的会有所不同，因为下载真的可以提前开始。但这需要仔细考虑。

我会彻底确保不会通过早期提示阻止客户端缓存。我不确定，但无条件推送甚至可能会产生不必要的开销。我不确定Accept-Push-Policy header 的实验性如何。

`Link:` 与 `<link>`

我怀疑 HTML <link rel="preload"> 会在加载速度方面产生任何显着差异：对于 CSS，无论如何你都可以在 <head> 中找到它。对于 JS，您可以控制是否需要在 <head> 中，有或没有 async/defer。字体可能有更好的用例。

Link: 标头实际上可能有助于减少几毫秒，因为它不需要评估 HTML 来收集 URI。但是我们仍然有页面生成的延迟（在页面生成之前不会发送 AFAIK 标头）。

【讨论】：

钩子/Link:

早期提示

Link: 与 &lt;link&gt;

钩子/`Link:`

`Link:` 与 `<link>`