Title: Better Resource Hints Author: Alex MacArthur Published: Èbìbí 10, 2018 Last modified: Èrèlé 12, 2019 --- Ṣàwárí àwọn plugin ![](https://ps.w.org/better-resource-hints/assets/banner-772x250.jpg?rev=1873761) Plugin yìí **kò tíì ṣe àyẹ̀wò pẹ̀lú àwọn ìtújáde mẹ́ta pàtàkì tó kẹ́yìn ti WordPress**. Ó lè jẹ́ pé a kò tọ́jú tàbí ṣe àtìlẹ́yìn fún un mọ́, ó sì lè ní àwọn ọ̀ràn ìbámu nígbà tí a bá lò ó pẹ̀lú àwọn ẹ̀yà WordPress tuntun. ![](https://ps.w.org/better-resource-hints/assets/icon-256x256.jpg?rev=1873761) # Better Resource Hints Láti ọwọ́ [Alex MacArthur](https://profiles.wordpress.org/alexmacarthur/) [Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/better-resource-hints.1.1.3.zip) * [Àwọn àlàyé](https://yor.wordpress.org/plugins/better-resource-hints/#description) * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/better-resource-hints/#reviews) * [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/better-resource-hints/#installation) * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/better-resource-hints/#developers) [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/better-resource-hints/) ## Àpèjúwe 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Ìtumọ̀ Yorùbá: ’t that bad about providing a base level of these hints. In fact, a basic, dedicated API has been [shipped since version 4.6.](https://make.wordpress.org/core/2016/07/06/resource-hints-in-4-6/). However, this functionality only scratches the service, providing only `dns-prefetch` tags out of the box, and thereÌtumọ̀ Yorùbá: ’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** Ìtumọ̀ Yorùbá: – 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** Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’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** Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’s wise to prefetch that asset on the home page, so itÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’s host, and not actually download the resource itself. **Server Push** Ìtumọ̀ Yorùbá: – 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](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) [Preloading Key Requests](https://developers.google.com/web/tools/lighthouse/audits/preload) [Preload: WhatÌtumọ̀ Yorùbá: ’s It Good For?](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/) [Resource Hints – What is Preload, Prefetch, and Preconnect?](https://www.keycdn.com/blog/resource-hints/) #### What Makes This Plugin Stand Apart? ThereÌtumọ̀ Yorùbá: ’s no shortage of plugins out there that aim to leverage resource hints for boosting performance. However, IÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’t be unecessarily preloading assets in the background when theyÌtumọ̀ Yorùbá: ’re not even needed on the page. **Misunderstanding What Different Hints Do** IÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’ 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Ìtumọ̀ Yorùbá: ’t prefetch any assets that are enqueued on the page, because thatÌtumọ̀ Yorùbá: ’s just not how the prefetch hint is designed to be used. Is Better Resource Hints perfect? Absolutely not. ThatÌtumọ̀ Yorùbá: ’s why I encourage any constructive feedback or bug reports to be sent my way immediately, so that I canÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’ve completely loaded. The advantage to doing this is that while the files are downloading, they wonÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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: 1. Preloading JavaScript assets enqueued in the footer. 2. 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](https://developers.google.com/web/tools/lighthouse/) to measure the impact of these changes on your siteÌtumọ̀ Yorùbá: ’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](https://yor.wordpress.org/plugins/better-resource-hints/alex@macarthur.me?output_format=md) or [tweet](http://www.twitter.com/amacarthur) me. You hate it? [Email](https://yor.wordpress.org/plugins/better-resource-hints/alex@macarthur.me?output_format=md) or [tweet](http://www.twitter.com/amacarthur) me. Regardless of how you feel, your review would be greatly appreciated! ## Àwọn àwòrán ìbòjú [[ [[ [[ ## Ìgbéwọlẹ̀ 1. Download the plugin and upload to your plugins directory, or install the plugin through the WordPress plugins page. 2. Activate the plugin through the ‘Plugins’ page. 3. Use the Settings -> Better Resource Hints screen to choose whether and which assets to preload, prefetch, and server push. ## FAQ What about browsers that donÌtumọ̀ Yorùbá: ’t support these resource hints? If someoneÌtumọ̀ Yorùbá: ’s using an older browser that doesnÌtumọ̀ Yorùbá: ’t support these hints, nothing will break. The generated tags will just be skipped over and the page will load as normal. The one slight exception to this is preloading CSS. Because the original `link` tags are completely converted to `rel="preload"`, there would be nothing on which to fall back. To remedy this, a small polyfill is included by this plugin, so you can be at ease. How can I test my siteÌtumọ̀ Yorùbá: ’s performance to verify improvements? To start, IÌtumọ̀ Yorùbá: ’d recommend [Google Lighthouse](https://developers.google.com/web/tools/lighthouse/). ItÌtumọ̀ Yorùbá: ’s built into Google Chrome and thereÌtumọ̀ Yorùbá: ’s also a command line utility available. Beyond that, you could try out something like [WebPagetest](https://www.webpagetest.org/) or a more enterprise solution like [SpeedCurve](https://speedcurve.com/). How can I specifically verify that preloading is working? First, ensure that your source code contains `` tags. Then, in Chrome, inspect the page and open up the Network tab. Refresh the page, and filter for your JS files to make things a little easier. Preloaded assets will have a “ Priority” of “High.” How can I verify that prefetching is working? Remember, this is different from `dns-prefetch`, and will download assets in the background as to cache them for future use. To verify a resource is being prefetched, first ensure that your source code contains `` tags. Then, in Chrome, inspect the page and open up the Network tab. Refresh the page, and filter for your JS files to make things a little easier. Prefetched assets will have a “ Priority” of “Low.” How can I verify HTTP/2 server push is working? First, ensure your server is configured to support server push. Then, you can use ChromeÌtumọ̀ Yorùbá: ’s net internals to inspect each HTTP/2 session and which assets are being pushed. Navigate to `chrome://net-internals/#http2` in Chrome to view this information. ## Àwọn àgbéyẹ̀wò ![](https://secure.gravatar.com/avatar/0a01e20cce2e4d8e2186a47453b6f483a11e7c277e59ddd1a83ae21d3b118096? s=60&d=retro&r=g) ### 󠀁[Great plugin that adds much needed functionality](https://wordpress.org/support/topic/great-plugin-that-adds-much-needed-functionality/)󠁿 [johnnyfyffe](https://profiles.wordpress.org/johnnyfyffe/) Ọ̀wàrà 5, 2019 Cheers Alex, I found this plugin through your blog. IÌtumọ̀ Yorùbá: ’m going to promote it in my tutorials. ItÌtumọ̀ Yorùbá: ’s about time WordPress got this extra functionality. Are you planning to update the plugin any time soon? ItÌtumọ̀ Yorùbá:’ d be great if the last update was a bit more recent. It would show that youÌtumọ̀ Yorùbá: ’re still actively managing it. Thanks again for an amazing plugin. Warm regards, Johnny. ![](https://secure.gravatar.com/avatar/07739c41de4a0e47b814c343934c8059f294464572601b223b7b51cfe8403d2d? s=60&d=retro&r=g) ### 󠀁[Works as expected. Improved PageSpeed Score.](https://wordpress.org/support/topic/works-as-expected-improved-pagespeed-score/)󠁿 [vinaythoke](https://profiles.wordpress.org/vinaythoke/) Agẹmọ 23, 2019 This is fairly new plugin. I came here to try this from AuthorÌtumọ̀ Yorùbá: ’s blog post about it. Very simple solution to such big problem. Definitely helped me get that extra second off my server load times. ![](https://secure.gravatar.com/avatar/ca481b56965d51c2202d6b74d3e6567908a142d529dc39061546a1acef255af2? s=60&d=retro&r=g) ### 󠀁[Great](https://wordpress.org/support/topic/great-9554/)󠁿 [Lovro Hrust](https://profiles.wordpress.org/lovor/) Igbe 10, 2019 I found just what I needed. It is aimed at developers, so probably this is the reason for low number of installs. You might consider updating it to be compatible to latest wordpress version (it works in my case) [ Ka gbogbo àwọn àgbéyẹ̀wò 3 ](https://wordpress.org/support/plugin/better-resource-hints/reviews/) ## Àwọn Olùkópa & Olùgbéejáde “Better Resource Hints” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa sí plugin yìí. Àwọn Olùkópa * [ Alex MacArthur ](https://profiles.wordpress.org/alexmacarthur/) [Túmọ̀ “Better Resource Hints” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/better-resource-hints) ### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè? [Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/better-resource-hints/), ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/better-resource-hints/), tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/better-resource-hints/) nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/better-resource-hints/?limit=100&mode=stop_on_copy&format=rss). ## Àkọsílẹ̀ àwọn àyípadà #### 1.0.0 * Initial release. #### 1.1.0 * Introduce support for generating preconnect hints. * Improve user interface. * Improve documentation. #### 1.1.1 * Append plugin version to admin assets to ensure theyÌtumọ̀ Yorùbá: ’re not cached after updates. * Fix miscellaneous UI-related bugs appearing in the admin. #### 1.1.2 * Fix bug causing duplicate preload links being generated for some assets. * Fix bug causing preconnect links to have incorrectly formatted `href` values. * Fix typos in documentation. #### 1.1.3 * Add fallback for cases when no assets are registered. * Clean up plugin code structure. * Switch from yarn to npm for JS package management. * Update preload polyfill for CSS preloading. * More intelligently load preload polyfill. ## Àkójọpọ̀ Meta * Ẹ̀yà **1.1.3** * Ìgbàgbọ́hùn tó kẹ́yìn **ọdún 7 sẹ́yìn** * Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **200+** * Ẹ̀yà WordPress ** 4.0 tàbí ju bẹ́ẹ̀ lọ ** * Dánwò dé **5.0.25** * Ẹ̀yà PHP ** 5.6 tàbí ju bẹ́ẹ̀ lọ ** * Èdè * [English (US)](https://wordpress.org/plugins/better-resource-hints/) * Àwọn àmì * [performance](https://yor.wordpress.org/plugins/tags/performance/)[prefetch](https://yor.wordpress.org/plugins/tags/prefetch/) [preload](https://yor.wordpress.org/plugins/tags/preload/)[server push](https://yor.wordpress.org/plugins/tags/server-push/) * [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/better-resource-hints/advanced/) ## Àwọn ìbò 5 lára àwọn ìràwọ̀ 5. * [ 3 5-star reviews ](https://wordpress.org/support/plugin/better-resource-hints/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/better-resource-hints/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/better-resource-hints/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/better-resource-hints/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/better-resource-hints/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/better-resource-hints/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/better-resource-hints/reviews/) ## Àwọn Olùkópa * [ Alex MacArthur ](https://profiles.wordpress.org/alexmacarthur/) ## Ìrànlọ́wọ́ Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́? [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/better-resource-hints/) ## Ṣe ìtọrẹ Ṣé o fẹ́ ṣe àtìlẹ́yìn fún ìlọsíwájú plugin yìí? [ Ṣe ìtọrẹ sí plugin yìí ](http://paypal.me/alexmacarthur)