如何将 rel="preconnect" 添加到 link 以外的标签？

Question

我正在使用 Chrome 开发工具来审核我网站的主页。它为我主页上的 facebook、twitter 和 linkedin 分享按钮提供了 "Preconnect to required origins" 机会之一。

我在 https://developers.google.com/web/fundamentals/performance/resource-prioritization 阅读了有关预连接和 dns-prefetch 的 google 文章，但发现语法仅适用于 link 标记，如下所示：

但是在我的主页上，连接到社交网站的分享按钮是这样的：

<div class="fb-like" data-href="https://www.facebook.com/xxxx" data- 
send="false" data-layout="button_count" data-width="90" data-show- 
faces="true"></div>

或者这个：

<a href="https://twitter.com/share" class="twitter-share-button" data- 
 count="none">Tweet</a>

或者这个：

<script src="https://platform.linkedin.com/in.js" type="text/javascript"> 
</script>
                        <script type="IN/Share"></script>

在这种情况下，如何将预连接或 dns-prefetch 提示添加到 html 代码中？这些提示似乎只对 link 标签有效？

谢谢

Answer 1

我假设您正在使用审核面板审核您的页面，并且您正在查看 Preload key requests 审核。

如果您单击 预加载密钥请求 审核，您应该会看到一个展开的 table，其中包含建议您预加载的确切 URL。

获取这些 URL 并将 <link> 标记添加到预加载这些请求的 HTML 的 <head>。

<!doctype html>
<html>
  <head>
    <link rel="preload" as="script" href="facebook.js">
    <link rel="preload" as="script" href="linkedin.js">

您需要注意每个资源的文件类型并相应地更新as 属性。如果文件是样式表，则需要设置as="style"。如果是脚本你需要设置 as="script".

如何将 rel="preconnect" 添加到 link 以外的标签？

How to add rel="preconnect" to tags other than link?

html

hint

google-chrome-devtools