对于我们应该"dns-prefetch preconnect"连接的域数量有限制吗?使用Chrome? [英] Is there a limit to how many domains we should "dns-prefetch preconnect" with Chrome?

问题描述

当我们要确保使用第三方窗口小部件/插件/插件/分析等的快速网站时，要达到此目的，许多要求之一就是为每个域"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" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://fonts.gstatic.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://images.typeform.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://js-agent.newrelic.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://js.driftt.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://load.sumo.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://metrics.api.drift.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://renderer-assets.typeform.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://static.addtoany.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://sumo.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://weclean1.typeform.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://www.google-analytics.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://www.googletagmanager.com" crossorigin/>< link rel ="dns-prefetch preconnect" href ="https://www.youtube.com" crossorigin/> 

任何链接的反馈/建议都将不胜感激！

解决方案

资源提示不应过度使用

首先，如下所述，您应该首选 preload .如果您不确定页面将包含哪些资源，则 dns-prefetch 和 preconnect 可能是合适的.

资源提示规范

该规范的编辑Ilya Grigorik，说

也就是说，请明智地使用它:每个打开的套接字都会在客户端和服务器，并且您要避免打开可能会出现的套接字没用过.与往常一样，应用，衡量实际影响并迭代通过此功能获得最佳性能里程.

也是Google员工SérgioGomes， echos Ilya的警告带有更加具体:

请记住，虽然< link rel ="preconnect"> 相当便宜，仍会占用宝贵的CPU时间，尤其是在安全的情况下连接.如果不使用连接，这尤其糟糕在10秒内，当浏览器关闭时，所有的时间都浪费了连接工作.

通常，请尽可能使用< link rel ="preload"> 进行更全面的性能调整，但在边缘情况下，请将< link rel ="preconnect"> 保留在工具栏中.

Sérgio继续说明几个示例，其中使用 preconnect (而不是 preload )是合适的.我强烈建议看看..>

伊万·阿库洛夫(Ivan Akulov)，前Googler和现任网络性能初创公司首席执行官，用于超过4-6个域，因为打开并保持连接是一项昂贵的操作.< link rel ="dns-prefetch"/> 更为轻巧，因此，如果您也想加快它们的速度，可以将其用于其他第三方域.

但是，伊凡(Ivan)虽然是著名的消息来源，但并未为这项建议提供坚决的技术支持.

如果不阅读每个相关浏览器的源代码，就无法辩解地说有多少dns-prefetch/preconnects太多了.即使在阅读了源代码之后，它也只能提示多少个合适的代码.没有硬性限制，但是上面的权威资料使我们有理由保持谨慎.

但是很难知道在哪里画线

只有一种方法可以提高性能:

1. 确定哪些指标对您和您的用户重要
2. 使用最佳的综合和真实用户号码来衡量现状
3. 进行更改并衡量差异

要获得最佳配置，将需要进行多次迭代.最佳提示选择可能会随时间而变化.从可维护性的角度来看，最好积极地连接符合Sérgio的边缘案例"要求的所有内容，并信任浏览器来完成其工作.但是，再次，从来没有测试.

其他一些笔记

该页面有很多第三方依赖项.我确定您在自己的要求之内，但这可能是要求管理层重新评估其中某些必要性的好时机.

最后，请记住， crossorigin 是不合适的每个资源提示.这取决于要下载的资源是否将使用CORS.如果您不知道，那可能会使所需的预连接数量增加一倍.

crossorigin 属性与 rel ="preconnect" 一起使用时，不会描述目标来源在哪里，而是描述哪种资产将从该来源下载.如果资产使用CORS，需要 crossorigin .如果不使用CORS，则应使用 crossorigin 省略.如果两种资产都存在，则有两个资源提示是必需的.

看看这个使用CORS的资源列表获取指导.

When we want to make sure a blazing fast website who uses third-party widgets/plugins/add-ons/analytics etc.. One of the many requirements to achieve this is to "dns-prefetch preconnect" for each individual domain name (basically saving a little for the DNS lookups etc.)

I could not find a document that would advise how many domain names we could "dns-prefetch preconnect" before we lose any potential benefit. Remember how in the old times Internet Explorer had a limit to how many images could be downloaded in parallel, just wonder if Chrome could have some reasoning for limiting "dns-prefetch preconnect" request?

For example: how many is too many?

<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" crossorigin />
<link rel="dns-prefetch preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://images.typeform.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://js-agent.newrelic.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://js.driftt.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://load.sumo.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://metrics.api.drift.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://renderer-assets.typeform.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://static.addtoany.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://sumo.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://weclean1.typeform.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://www.google-analytics.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://www.googletagmanager.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://www.youtube.com" crossorigin />

Any links feedback/advice is greatly appreciated!

解决方案

Resource hints shouldn't be over-used

First, as mentioned below, you should prefer preload. If you don't know exactly what resources your page will include, the dns-prefetch and preconnect can be appropriate.

The resource hint specification indicates that the optimal number of connections is highly contingent:

The optimal number of connections per origin is dependent on the negotiated protocol, users current connectivity profile, available device resources, global connection limits, and other context specific variables. As a result, the decision for how many connections should be opened is deferred to the user agent.

Both dns-prefetch and preconnect indicate the user agent "should" initiate the process, which means they don't have to do so.

Ilya Grigorik, the editor of that spec, says

That said, use it wisely: each open socket incurs costs both on the client and server, and you want to avoid opening sockets that might go unused. As always, apply, measure real-world impact, and iterate to get the best performance mileage from this feature.

Sérgio Gomes, also a Googler, echos Ilya's warning with a bit more specificity:

Bear in mind that while <link rel="preconnect"> is pretty cheap, it can still take up valuable CPU time, particularly on secure connections. This is especially bad if the connection isn’t used within 10 seconds, as the browser closes it, wasting all of that early connection work.

In general, try to use <link rel="preload"> wherever you can, as it’s a more comprehensive performance tweak, but do keep <link rel="preconnect"> in your toolbelt for the edge cases.

Sérgio continues to illustrate a couple examples where preconnect, rather than preload, is appropriate. I highly recommend taking a look at those.

Ivan Akulov, former Googler and current web performance startup CEO, ventures a numerical recommendation:

You want to speed up more than 4-6 domains. It’s not recommended to use <link rel="preconnect" /> with more than 4-6 domains, as opening and keeping a connection is an expensive operation. <link rel="dns-prefetch" /> is more lightweight, so use it for other third-party domains if you want to speed them up too.

But Ivan, though a reputable source, doesn't provide hard technical support for this recommendation.

Without reading the source code for each relevant browser, it's impossible to defensibly say how many dns-prefetch/preconnects are too many. Even after reading source code, it can only offer a hint as to how many are appropriate. There is no hard limit, but the authoritative sources above give us reason to be cautious.

But it's difficult to know where to draw the line

There's only one way to improve performance:

1. decide which metrics matter to you and your users
2. use the best available synthetic and real-user numbers to measure the status quo
3. make changes and measure the difference

It would take a number of iterations to land on the best possible configuration. And the optimal hint selection could change over time. From a maintainability perspective, it would be best to aggressively preconnect everything that meets Sérgio's "edge case" requirements, and trust the browser to do its job. But again, never without testing.

A couple other notes

That's a lot of third-party dependencies for that page. I'm sure you're working within your requirements, but this may be a great time to ask management to re-evaluate the necessity of some of those.

Finally, keep in mind that crossorigin isn't appropriate for every resource hint. It depends on whether the resource(s) to be downloaded will use CORS. If you don't know, that could double the number of preconnects needed.

The crossorigin attribute, when used with rel="preconnect", doesn't describe where the target origin is but rather what kind of assets will be downloaded from that origin. If the assets use CORS, crossorigin is needed. If CORS won't be used, crossorigin should be omitted. If both types of assets will be present, two resource hints are necessary.

Take a look at this list of resources that use CORS for guidance.

这篇关于对于我们应该"dns-prefetch preconnect"连接的域数量有限制吗?使用Chrome?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！