使用链接 rel="preload" 进行谷歌翻译答案

【问题标题】：Use of link rel="preload" for Google Translate使用链接 rel="preload" 进行谷歌翻译
【发布时间】：2018-06-01 23:47:46
【问题描述】：

我开始为我的 shopify 网站 im-diamond.com 使用 Google 翻译，方法是在标题中放置 sn-p。现在，当我检查 Chrome Lighthouse 报告时，它说它正在减慢网站速度并建议使用链接 rel='preload' 。我如何使用它来实现谷歌翻译的 sn-p？

<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'tr', includedLanguages: 'ar,de,en,ru', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-111111-1'}, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

【问题讨论】：

标签： html shopify google-translate preload

【解决方案1】：

rel=”preload” 允许您对页面加载后很快需要的资源进行优先级排序。顾名思义，资源将被预加载并在调用后即可使用。您可以在此 documentation 页面上找到有关 rel=”preload” 的更多信息。

要使用它，请将以下行放在您的 HTML 标题中：

<link rel="preload" href="scriptName.js" as="script">

其中“scriptName.js”是包含您正在使用的 Google 翻译脚本的文件的名称。在您需要使用预加载脚本的 HTML 代码中，使用以下行：

<script src="scriptName.js"></script>

【讨论】：