标签: preconnect
您应该将预连接与样式表一起使用吗？
当您想要包含 Google Fonts 中的字体时，它建议 ([1]) 您这样做：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
预连接到fonts.gstatic.com是有意义的，因为浏览器只有在下载样式表后才会发现该域。但是，当样式表的链接就在fonts.googleapis.com之后时，预连接到 fonts.googleapis.com 的意义何在？浏览器不会同时处理这两个吗？
[1] 请参阅： https: //fonts.google.com/share?selection.family =Roboto，选择某种样式，然后单击右上角的公文包图标。）
推荐指数
解决办法
查看次数
我可以使用链接标签预连接到 WebSocket 目标吗？
我有一个使用 WebSockets 连接到服务器并传输数据的网站。
在css-tricks.com 上，他们展示了以下使用 HTML 链接标记预连接的示例：
<link rel="preconnect" href="https://css-tricks.com">
我可以使用它来连接到 WebSockets，或者至少可以加快速度吗？事情是这样的
<link rel="preconnect" href="WSS://css-tricks.com">
当我尝试 WS 连接时，有没有办法判断它是否正常工作？或者甚至使用 HTTP 连接？
推荐指数
解决办法
查看次数
为什么预连接资源提示不起作用？
我在crenshaw.dev/demo/hints.html创建了一个测试页面，浏览器提示请求 dns-prefetch 并预连接到 mac9416.com。
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test resource hints</title>
<link rel="dns-prefetch" href="//mac9416.com">
<link rel="preconnect" href="https://mac9416.com" crossorigin>
</head>
<body>
Lorem ipsum dolor sit amet,
<!-- a bunch more to delay page loading -->
Duis dignissim gravida commodo.
<script src="https://mac9416.com/blah.js"></script>
</body>
</html>
但是根据 WebPageTest，直到 index.html 完全加载后才会连接到 mac9416.com。
为什么 Chrome 在<head>解析后没有立即连接到 mac9416.com ？
更新：
根据接受的答案和评论，我写了一个修复的解释。
crossorigin与 一起使用时rel="preconnect"，该属性不描述目标来源的位置，而是描述将从该来源下载的资产类型。如果资产使用 CORS，crossorigin则需要。如果不使用 CORS，crossorigin则应省略。如果两种类型的资产都存在，则需要两个资源提示。
推荐指数
解决办法
查看次数
Google Chrome Lighthouse 报告中最大的内容绘制错误
我收到错误！对于 Google Chrome Lighthouse 报告中的“性能”选项卡。我尝试修复但无法修复，有什么建议吗？
这是以下错误：
Largest Contentful Paint Error! The page did not display content that qualifies as a Largest Contentful Paint (LCP). Ensure the page has a valid LCP element and then try again. (NO_LCP)
在诊断上，它有一个错误：
Preconnect to required origins Error! Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. Learn how to preconnect to required origins.FCPLCP. https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/?utm_source=lighthouse&utm_medium=devtools
[在此输入图像描述]( https://i.stack.imgur.com/dbZoA.png )
我将以下链接标记添加到我的 app.js 文件中，但它没有修复错误。我将其添加到预连接到谷歌字体，尽管我使用的是 NextJS 的 next/font。资源https://nextjs.org/docs/messages/google-font-preconnect
<link rel="preconnect" …
performance lighthouse next.js preconnect largest-contentful-paint
推荐指数
解决办法
查看次数
我们应该在Chrome中“ dns-prefetch preconnect”来限制多少个域？
当我们要确保使用第三方窗口小部件/插件/附加组件/分析等的快速网站时，要达到这一目的，许多要求之一就是为每个单独的域名“ dns-prefetch preconnect”（基本上是节省一点DNS查询等）
在找不到任何潜在利益之前，我找不到能建议多少个域名“ dns-prefetch preconnect”的文档。还记得Internet Explorer在过去曾经限制可以并行下载多少图像的问题，只是想知道Chrome浏览器是否可以出于某种理由来限制“ dns-prefetch preconnect”请求？
例如：多少是太多？
<link rel="dns-prefetch preconnect" href="https://admin.typeform.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://api.amplitude.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://api.segment.io" crossorigin />
<link rel="dns-prefetch preconnect" href="https://app.launchdarkly.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://bam.nr-data.net" crossorigin />
<link rel="dns-prefetch preconnect" href="https://cdn.amplitude.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://cdn.segment.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://customer.api.drift.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://embed.typeform.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://event.api.drift.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://events.launchdarkly.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://fonts.googleapis.com" …推荐指数
解决办法
查看次数
标签 统计
preconnect ×5
html ×3
css ×1
lighthouse ×1
next.js ×1
pagespeed ×1
performance ×1
websocket ×1