Question

我正在使用Chrome开发工具来审核网站的首页。并为我主页中的facebook，twitter和linkedin分享按钮提供了“预连接到必需的来源”的机会之一。

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

但是在我的主页上，将连接到社交网站的共享按钮如下所示：

<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>

在这种情况下，如何将preconnect或dns-prefetch提示添加到html代码中？似乎这些提示仅对链接标记有效？

谢谢

Answer 1

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

如果您点击预加载关键请求审核，您应该会看到一个展开的表格，其中包含建议您进行预加载的确切网址。

采用这些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”添加到链接以外的其他标签？

1 个答案: