在TYPO3中预加载脚本或CSS

问题描述 投票：0回答：2

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

现在看起来像这样：

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

enter image description here

html typo3 typo3-9.x google-pagespeed
2个回答
1
投票

我认为TYPO3目前不支持链接预加载，但是在添加库时，您可以同时使用

headerData
和
footerData
包含库的已经最小化版本（就像您已经做的那样）来解决它。 当以这种方式包含它时，TYPO3 将既不缩小也不合并此文件。

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

欲了解更多信息：
请参阅 TYPO3 文档中的insertData。
以及 mdn 网络文档上的 rel 预加载。

0
投票

有几种预加载技术：1) HTML 

<link rel>
，2) HTTP 
Link:
header，3) HTTP Early Hints

为了获得 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:
header

早期提示

遗憾的是，对于 TYPO3，我们无法轻松使用“早期提示”，因为我们现在可能无法在页面呈现之前获得资产的最终 URI。如果您可以调整您的构建/实例以拥有稳定的资产 URI（也请考虑 ?timestamp），这在我看来确实会产生影响，因为下载确实可以提早开始。但这需要仔细考虑。

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

Link:
 vs 
<link>
我怀疑 HTML 
<link rel="preload">
 会对加载速度产生任何明显的影响：对于 CSS，无论如何，你都可以在 
<head>
 中找到它。对于 JS，您可以控制是否需要在 
<head>
 中，有或没有 
async
/
defer
。字体可能有更好的用例。
Link:
 标头实际上可能有助于缩短一些毫秒，因为它不需要评估 HTML 来收集 URI。但我们仍然存在页面生成的延迟（据我所知，在页面生成之前不会发送标头）。
    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.