0

I have been using, this plugin and its says

WordPress 4.6 introduced native support for resource hints. By default, this plugin defers to WordPress 4.6 and theme/plugin developers to responsibly prefetch the right assets. Sites running on older versions of WordPress will continue to get the previous behavior where all JavaScript and stylesheets had resource hints printed for them.

I’ve added a filter To restore the old behavior (hint everything) on WordPress 4.6 and above. To use it, add this line to your theme’s functions.php file or a custom plugin:

I have looked at the code and it seems extremely hacky and horrible to me (not the way it is done, the way it seems it had to be done at that point)

I actually am using the filter to hint everything right now (probably bad idea). I once stumbled on a thread on wp core track about this but I can not find it. From the introduction posts code I am really not learning that much.

What I would like is just something like

wp_register_script( ..., $http_prefech = true );

I think that was also discussed on trac somewhere.

Can there be a wrapper like this or can you show me in the most simple, more native to WP way how I set a specific asset to prefetch?

  • What filter are you using and how? – cybmeta Nov 3 '17 at 8:32
1

Support for resource hints in WordPress is done through rel attribute of <link> elements whithin the HTML docuemnt, not with HTTP/2 server push (which uses Link headers in the HTTP response). You can use wp_resource_hints filter to add the URLs you need the prefetch like this:

add_filter( 'wp_resource_hints', 'cyb_resource_hints', 10, 2 );
function cyb_resource_hints( $urls, $relation_type ) {

  if( 'prefetch' == $relation_type ) {

    $urls[] = 'https://exmaple.com/assets/script.js';

  }

  return $urls;

}

If you prefer to use HTTP/2 server push, you can set the Link header with PHP, .htaccess on Apache, etc.

For example, with PHP:

header("Link: </css/styles.css>; rel=preload; as=style");

And you can integrate it with WordPress at multiple levels, usually template_redirect action, for example:

add_action( 'template_redirect', 'cyb_push_styles' );
funciton cyb_push_styles() {

    header("Link: </css/styles.css>; rel=preload; as=style");  

}
  • Well server push is something different then this and they may used together if I getting this right. – NextGenThemes Nov 5 '17 at 14:06
  • Yes, HTTP/2 server push is not the same the HTML5 resource hints (preload, prefetch, and so on). Both are quite similar, HTML5 resource hints use <link> elements in the document while HTTP/2 server push uses Link header in the HTTP response. I don't think that using both together is worthy, I've updated the answer a bit. – cybmeta Nov 6 '17 at 8:50
0

First off, there's a difference between preloading and prefetching an asset, which isn't something that plugin is super clear about. Prefetching an asset is done in low priority, so it's best for resources that will be used on future page loads. Preloading assets is best for assets needed on the same page. All that said, you should be leveraging both.

As far as specifically sending prefetch/preload headers for an asset, you could use a plugin I built. It allows you to prefetch or preload assets by their registered handles. Just save the handle, specify if you want to send headers, and save your settings. Relatively straightforward, and a bit more fleshed out than the other plugin you mentioned.

https://wordpress.org/plugins/better-resource-hints/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.