前言介紹
- 這款 WordPress 外掛「Better Resource Hints」是 2018-05-09 上架。
- 目前有 200 個安裝啟用數。
- 上一次更新是 2019-02-12，距離現在已有 2275 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
- 有 3 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
preload | prefetch | performance | server push | resource hints |
內容簡介
Better Resource Hints 可以讓你的 WordPress 網站或應用程式更快速，並透過 intelligently leveraging 資源提示（例如 prefetch、preload、preconnect 和 server push）來提升整體效能。
目前，WordPress 提供了基本層級的提示，不算太差。事實上，自從版本 4.6 起，基礎的專用 API 已經推出了 。但是，這個功能只提供了預設的 dns-prefetch 標籤，它的提供範圍還相當有限。當新的提示：被引進和支援的時候，有更多的機會來利用他們。具體來說，此外掛重點關注於下列類型的提示，針對你的樣式和 JavaScript 資產：
預先連接 (Preconnecting) – 這個提示類似於 dns-prefetch；但是比較強大。預先連接提示除了解析 DNS 外，還處理 TLS 協商和 TCP 握手，從而降低頁面延遲。
預先加載 (Preloading) – 當瀏覽器被告知可以在頁面載入期間早期背景下載資產時，就會發生預載。這對於稍後在頁面中加載但仍然是頁面功能必不可少的資產非常有益，通常是 JavaScript 文件。啟用此功能會提高整體加載速度，並更快地獲得可操作頁面。
預取 (Prefetching) – 預取資產類似於預載，但是會以低優先級下載資產以便稍後使用高速緩存。例如，如果使用者點擊首頁且可能轉到使用大型 JavaScript 文件的頁面，則建議在首頁上預取該資產，以便在下一個頁面上使用。這樣可以再次加快後續頁面載入，更快的時間互動和改善整體使用者體驗。這與 DNS 預取不同，其僅會解析資源的主機 DNS，而不會實際下載資源本身。
服務器推送 (Server Push) – 如果啟用，服務器推送將告訴您的服務器在瀏覽器甚至要求其之前開始傳送資產。這導致關鍵資產的傳送速度更快，並且可以切換到預先加載、預取和預先連接的資產。 注意：此功能需要支援服務器推送的服務器，並且是此外掛最實驗的策略。
對於任何一種增強效能的技術，請小心謹慎使用，並且結果取決於網站載入資源的尺寸以及您的伺服器配置。更多閱讀資源請參閱以下文章：
Chrome 中的預載、預取和優先級別
預載重要請求
預設載入：有什麼用？
資源提示 - 什麼是預載、預取和預先連接？
此外掛的優勢在哪裡？
市場上不乏旨在利用資源提示提高效能的外掛，但我們發現其中有幾個缺點：
無彈性的提示管理 許多類似外掛在選項上提供非常有限的彈性，並且僅允許全局設定提示，而不考慮資料來源是否實際需要提示。此外掛則提供更靈活的控制，讓你可以針對每個頁面選擇啟用或禁用提示。此外，此外掛提供對每個頁面和每個資源的日誌記錄和調試支援。
原文外掛簡介
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.
As it stands, WordPress isn’t that bad about providing a base level of these hints. In fact, a basic, dedicated API has been shipped since version 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. Specifically, this plugin focuses on the following types of hints for your styles and JavaScript assets:
Preconnecting – This hint is similar to “dns-prefetch,” but a beefier version. Instead of just resolving the DNS, the preconnect hint handles TLS negotiations and TCP handshakes, resulting in reduced page latency.
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. 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. 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.
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
Preloading Key Requests
Preload: What’s It Good For?
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.
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
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. 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. 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.
*
* @param string $link (HTML tag)
* @param string $url (URL of the host)
* @return string
*/
add_filter('better_resource_hints_preconnect_tag', function ($link, $url) {
return $url;
}, 10, 2);
/**
* Modify the HTML link generated for prefetching hosts.
*
* @param string $link (HTML tag)
* @param string $handle (WP handle of the resource
* @param string $type (script or style)
* @return string
*/
add_filter('better_resource_hints_prefetch_tag', function ($link, $handle, $type) {
return $url;
}, 10, 3);
/**
* Modify the HTML link generated for preloading hosts.
*
* @param string $link (HTML tag)
* @param string $handle (WP handle of the resource
* @param string $type (script or style)
* @return string
*/
add_filter('better_resource_hints_preload_tag', function ($link, $handle, $type) {
return $url;
}, 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.
Setting preconnect hints for all third party hosts that already have dns-preconnect hints.
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 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 me. You hate it? Email or tweet me.
Regardless of how you feel, your review would be greatly appreciated!
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Better Resource Hints」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.0 | 1.1.0 | 1.1.1 | 1.1.2 | 1.1.3 | trunk |
延伸相關外掛（你可能也想知道）
Speculative Loading 》- 這個 WordPress 外掛支援 Speculation Rules API，該 API 可以根據使用者互動，定義規則來動態預取或預渲染特定的 URL。, - 請參閱 Speculation Rules WICG...。
Flying Pages: Preload Pages for Faster Navigation & Improved User Experience 》Flying Pages 是一款 WordPress 外掛，可以在使用者點擊頁面前預先加載頁面，讓頁面瞬間載入。, , 它的運作方式是透過注入一小段（1KB gzipped）JavaScript ...。
Pre* Party Resource Hints 》這個外掛允許使用者自動且容易地插入資源提示來改善頁面載入時間。, 支援 DNS 預取、預渲染、預連線、預取和預載入等功能。, 安裝完成後，下次訪問網站時將會...。
Quicklink for WordPress 》Quicklink for WordPress 可嘗試加快導航到下一個頁面的加載速度。該插件嵌入了一個 JavaScript 库，用於檢測視口中的連結，等待瀏覽器閒置並預取這些連結的 ...。
Preload Featured Images 》此外掛可自動預載文章中的精選圖片以大幅提升頁面速度分數。, 對於使用主題自動在單篇文章頁面頂端顯示精選圖片的網站來說，此外掛是「必備品」。, 為何需要...。
Preload Images 》透過預載圖片的方式，為您提供更快速的網頁載入體驗。Preload Images 外掛支援無限制的圖片網址，特別適用於相片庫和圖片較重的網站，讓您能夠以最無縫的方式...。
HTTP/2 Server Push 》HTTP/2 是驅動網頁的傳統 HTTP 協定的新一代。其最強大的功能之一是伺服器推送，一種讓網頁伺服器在瀏覽器需要資源之前就將它們發送到瀏覽器的方式。這避免了...。
Simple DNS Prefetch 》DNS 解析時間可能會導致使用者感知到的延遲時間增加。DNS 解析所需時間的長短是高度變異的，延遲的時間從約 1 毫秒（本地緩存的結果）到報告的常見時間為幾秒...。
Oxyplug Prefetch & Prerender 》, 在文章/產品類別頁面上，使用者點擊前會先預載前 X 項。X 的預設值為 4 項，您可以透過外掛設定進行調整。, 如果使用者將滑鼠游標停留在某個連結上 X ...。
WP Instant Links 》此外掛程式無須設定即可馬上使用。啟用後，此外掛程式會在使用者點擊前預先提取下一個網頁，因此用戶可以體驗到即時的頁面載入。, 提供更好的使用者體驗，尤...。
WordPress Instant Articles 》使用 Instant Articles for WordPress，您可以配置 DNS 預取 URL，並在前頁預測最後兩篇文章，以及查看單篇文章時的下一篇和上一篇文章。您還可以選擇預測置...。
Image Preloading 》這個外掛可以預載入圖片，讓網頁載入速度更快。圖片預載入可以支援無限量的圖片 URL，適用於相片庫或其他需要加載大量圖片的網站，使得圖片載入的過程盡可能...。
DNS Prefetch 》這個外掛實現了 DNS 預取技術，遵循 Mozilla 對 Firefox 瀏覽器的規範。希望其他瀏覽器最終也能支持 DNS 預取。, 詳細內容請參閱 https://developer.mozilla....。
Preload Featured Image 》外掛簡介總結：這個外掛對於使用自動顯示精選圖像於單篇文章頁面頂部的主題的網站來說是一個「必備」的工具。, , 問題與答案：, , 問：這個外掛有什麼特點？,...。
Prerender and Prefetch 》Prerender 和 Prefetch 是什麼？好問題。這是一種新型的瀏覽器技術（好吧，我是在撒謊， Mozilla 自 2003 年就開始使用了！），它會在背景中載入您認為訪客接...。