Better Resource Hints will make your WordPress site or application faster and generally more performant by intelligently leveraging resource hints like prefetch, preload, preconnect, and server push.
更好的资源提示将通过智能地利用诸如预取，预加载，预连接和服务器推送之类的资源提示，使您的WordPress网站或应用程序更快，更高效。
As it stands, WordPress isn’t that bad about providing a base level of these hints.
就目前而言，WordPress在提供这些提示的基本级别方面还不错。
In fact, a basic, dedicated API has been 实际上，一个基本的专用API已经shipped since version 4.6.
.
从4.6版开始发布。
。
However, this functionality only scratches the service, providing only dns-prefetch tags out of the box, and there’s growing opportunity to take advantage of different hints as they are introduced and gain more browser support.
但是，此功能只会刮擦该服务，仅提供现成的 dns-prefetch 标签，并且随着这些提示的引入并获得更多浏览器支持的机会越来越多。Specifically, this plugin focuses on the following types of hints for your styles and JavaScript assets:
具体来说，此插件着重于针对您的样式和JavaScript资产的以下类型的提示：
Preconnecting – This hint is similar to “dns-prefetch,” but a beefier version.
预连接 –此提示类似于“ dns-prefetch”，但功能更强大。Instead of just resolving the DNS, the preconnect hint handles TLS negotiations and TCP handshakes, resulting in reduced page latency.
预连接提示不仅处理DNS，还处理TLS协商和TCP握手，从而减少了页面延迟。
Preloading – Preloading occurs when the browser is told it can start downloading an asset in the background early during page load, instead of waiting until the asset is explicitly called to start the process.
预加载 –当浏览器被告知可以在页面加载过程中尽早开始在后台下载资产时，而不是等到显式调用该资产来开始该过程时，即发生预加载。This hint is most beneficial for assets loaded later on in the page, but are nonetheless essential to the page’s functionality.
此提示对页面上稍后加载的资产最有用，但对于页面的功能而言仍然必不可少。
More often than not, this is a JavaScript file.
通常，这是一个JavaScript文件。
Enabling this results in an overall faster load time, and quicker time to interactive.
启用此功能后，总体上将加快加载时间，并缩短交互时间。
Prefetching – Prefetching assets is similar to preloading, but the assets are downloaded in low priority for the purpose of caching them for later use.
预取 –预取资产与预加载类似，但是资源的下载优先级较低，以便将其缓存以备后用。For example, if a user hits your home page and is likely to go to a page that uses a heavy JavaScript file, it’s wise to prefetch that asset on the home page, so it’s cached and ready to go on the next.
例如，如果用户点击您的主页并且可能会转到使用大量JavaScript文件的页面，则明智的做法是在首页上预取该资产，因此可以对其进行缓存并准备继续进行下一个操作。
Again, the result is a quicker subsequent page load, quicker time to interactive, and an improved overall user experience.
再次，结果是更快的后续页面加载，更快的交互时间以及更佳的整体用户体验。
This is different from DNS prefetching, which will only resolve the DNS of a resource’s host, and not actually download the resource itself.
这与DNS预取不同，后者只能解析资源主机的DNS，而不能实际下载资源本身。
Server Push – If enabled, server push will tell your server to start delivering an asset before the browser even asks for it.
服务器推送 –如果启用，服务器推送将告诉您的服务器在浏览器甚至没有要求之前就开始交付资产。This results in a much faster delivery of key assets, and be toggled on for both preloaded, prefetched, and preconnected assets.
这样可以更快地交付关键资产，并且可以针对预加载，预取和预连接的资产进行切换。
Note: This feature requires a server that supports server push, and is the most experimental strategy this plugin provides.
注意：此功能需要支持服务器推送的服务器，这是此插件提供的最具实验性的策略。 As with any sort of performance-enhancing technique, just be aware that they should be used judiciously, and that the results you see will depend on the size the of resources your site loads, as well as how your server is configured.
与任何一种性能增强技术一样，请注意应谨慎使用它们，并且您看到的结果将取决于站点加载的资源大小以及服务器的配置方式。
For additional reading, see some of the resources below:
有关更多阅读，请参见下面的一些资源：
Preload, Prefetch, & Priorities in Chrome
Chrome中的预加载，预取和优先级
Preloading Key Requests
预载关键请求
Preload: What's It Good For?<
预载：这有什么用？ <
br />
br />
Resource Hints – What is Preload, Prefetch, and Preconnect?
资源提示–什么是预加载，预取和预连接？
What Makes This Plugin Stand Apart?
是什么让这个插件与众不同？
There’s no shortage of plugins out there that aim to leverage resource hints for boosting performance.
那里不乏旨在利用资源提示来提高性能的插件。
However, I’ve seen that several of them make the following mistakes:
但是，我发现其中有几个会犯以下错误：
Inflexible Hint Management Many similar plugins only provide very limited flexibility in their options, and only allow setting hints globally for every page, regardless of whether the resources are actually needed on the page.
不灵活的提示管理许多相似的插件仅在其选项方面提供了非常有限的灵活性，并且仅允许全局设置每个页面的提示，而不管页面上实际是否需要资源。This can often result in unecessarily bloaging your bandwidth, since hints on several pages are effectively useless.
这通常会导致不必要地浪费带宽，因为几页上的提示实际上是无用的。
In some cases, this could actually lead to a less performant site.
在某些情况下，这实际上可能导致性能较低的网站。
This plugin attempts to provide options to manage hints more flexibily and intelligently, meaning you won’t be unecessarily preloading assets in the background when they’re not even needed on the page.
该插件尝试提供更灵活，更智能地管理提示的选项，这意味着您甚至在页面上甚至不需要它们时，也不会在后台不必要地预加载资产。
Misunderstanding What Different Hints Do I’ve come across some plugins that fail to understand and leverage different hints like they were designed.
误解了不同的提示 我遇到了一些插件，它们无法理解和利用不同的提示（如设计的）。For example, promising that assets are being preloaded, when they’re actually being prefetched.
例如，承诺实际上是在预取资产的同时预加载资产。
These and other hints have very different purposes, and should not be interchangably used if you want them to impact your site in the most effective way.
这些提示和其他提示的用途非常不同，如果希望它们以最有效的方式影响您的网站，则不应互换使用。
This plugin attempts to leverage these hints in way to maximize their effectiveness.
该插件尝试利用这些提示来最大化其有效性。
For example, BHR won’t prefetch any assets that are enqueued on the page, because that’s just not how the prefetch hint is designed to be used.
例如，BHR不会预取页面上排队的任何资产，因为这不是设计使用预取提示的方式。
Is Better Resource Hints perfect?
更好的资源提示是否完美？
Absolutely not.
绝对不。
That’s why I encourage any constructive feedback or bug reports to be sent my way immediately, so that I can’t improve this plugin as quickly as possible.
因此，我建议立即发送任何建设性的反馈或错误报告，以使我无法尽快改进此插件。
A Note About Preloading CSS
关于预加载CSS的注意事项
Because of their high placement on a page, if the option is enabled, your CSS files will be asyncronously preloaded, and then turned into a stylesheet once they’ve completely loaded.
由于它们在页面上的位置较高，如果启用此选项，则会异步地预加载您的CSS文件，并在完全加载后然后变为样式表。The advantage to doing this is that while the files are downloading, they won’t block the rest of the page from rendering, resulting an overall faster page load.
这样做的好处是，在下载文件时，它们不会阻止页面的其余部分呈现，从而总体上加快了页面加载速度。
However, this also means that there may be a flash of unstyled content on the page for a brief moment as the files download.
但是，这也意味着在下载文件时，页面上可能会短暂显示未样式化的内容。
To prevent this, it’s recommended to only preload CSS files that are not critical to the initial view of the page.
为避免这种情况，建议仅预加载对页面初始视图不重要的CSS文件。
This will allow you to gain some performance points without sacrificing use experience as the page loads.
这将使您获得一些性能点，而不会牺牲页面加载时的使用体验。
Filters
过滤器
The following filters are exposed for your use.
以下过滤器供您使用。
/** / *** Modify the HTML link generated for preconnecting hosts.
*修改为预连接主机生成的HTML链接。
*
*
* @param string $link (HTML tag)
* @param字符串$ link（HTML标记）
* @param string $url (URL of the host)
* @param字符串$ url（主机的URL）
* @return string
* @返回字符串
*/
* /
add_filter('better_resource_hints_preconnect_tag', function ($link, $url) {
add_filter（'better_resource_hints_preconnect_tag'，函数（$ link，$ url）{
return $url;
返回$ url;
}, 10, 2);
}，10，2）;
/**
/ **
* Modify the HTML link generated for prefetching hosts.
*修改为预取主机生成的HTML链接。
*
*
* @param string $link (HTML tag)
* @param字符串$ link（HTML标记）
* @param string $handle (WP handle of the resource
* @param string $ handle（资源的WP句柄
* @param string $type (script or style)
* @param字符串$ type（脚本或样式）
* @return string
* @返回字符串
*/
* /
add_filter('better_resource_hints_prefetch_tag', function ($link, $handle, $type) {
add_filter（'better_resource_hints_prefetch_tag'，函数（$ link，$ handle，$ type）{
return $url;
返回$ url;
}, 10, 3);
}，10，3）;
/**
/ **
* Modify the HTML link generated for preloading hosts.
*修改为预加载主机生成的HTML链接。
*
*
* @param string $link (HTML tag)
* @param字符串$ link（HTML标记）
* @param string $handle (WP handle of the resource
* @param string $ handle（资源的WP句柄
* @param string $type (script or style)
* @param字符串$ type（脚本或样式）
* @return string
* @返回字符串
*/
* /
add_filter('better_resource_hints_preload_tag', function ($link, $handle, $type) {
add_filter（'better_resource_hints_preload_tag'，函数（$ link，$ handle，$ type）{
return $url;
返回$ url;
}, 10, 3);
}，10，3）;
What Happens Out of the Box?
开箱即用的情况是什么？
Upon activation, Better Resource Hints will optimize your resource hints in a conservative, low-risk way by only doing two things out of the box:
激活后，“更好的资源提示”将以保守的，低风险的方式优化您的资源提示，只需做以下两件事即可：
- Preloading JavaScript assets enqueued in the footer.
- 预加载页脚中排队的JavaScript资产。
- Setting preconnect hints for all third party hosts that already have dns-preconnect hints.
- 为所有已经具有dns-preconnect提示的第三方主机设置预连接提示。
Using the Plugin
使用插件
After activation, you are able to adjust settings to tweak optimization as seen fit.
激活后，您可以根据需要调整设置以调整优化。
As a means of testing your optimizations, use a tool like Google Lighthouse to measure the impact
作为测试优化的一种方法，请使用 Google Lighthouse 之类的工具来衡量影响
of these changes on your site's performance.
这些变化对您网站的效果的影响。
As mentioned, the techniques used here are largely supported by modern browsers, but your results may vary depending on the amount of assets being loaded on your site, as well as your server configuration.
如前所述，现代浏览器在很大程度上支持此处使用的技术，但是您的结果可能会有所不同，具体取决于站点上加载的资产数量以及服务器配置。
Feedback
反馈
You like it?
您喜欢吗？
Email or tweet<电子邮件或 tweet < /a> me.
/ a>我。
You hate it?
你讨厌吗
Email or tweet<电子邮件或 tweet < /a> me.
/ a>我。
Regardless of how you feel, your review would be greatly appreciated!
无论您的感觉如何，您的评论都将不胜感激！
