HTTP/2 Server Push

Description

HTTP/2 is the new generation of the venerable HTTP protocol that powers the web. Among its most powerful features is server push, a way for web servers to send resources to the browser before it even realizes it needs them. This avoids the usual HTTP request/response cycle which happened for every script or stylesheet on a page.

This plugin enables WordPress to send a Link:<...> rel="prefetch" header for every enqueued script and style as WordPress outputs them into the page source. Unfortunately, it can’t help plugins and themes that output their scripts directly into the page itself, but these will continue to work as they always have.

Requires a web server that supports HTTP/2.

WordPress 4.6 and above

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:

`add_filter('http2_render_resource_hints', '__return_true');```

Installation

Install HTTP/2 Server Push automatically from your admin account by selecting “Plugins”, then “Add new” from the sidebar menu. Search for HTTP/2 Server Push, then choose “Install Now”.

or

Download the latest HTTP/2 Server Push plugin archive from wordpress.org. Unzip the archive and upload the http2_server_push directory to the /wp-content/plugins/ directory on your WordPress site. Activate the plugin through the ‘Plugins’ menu in WordPress

FAQ

What if my web server doesn’t support HTTP/2 or “server push”?

Server push is triggered by the same mechanism as link prefetching, which almost all major modern browsers support over HTTP 1.x. So even if you can’t take advantage of HTTP/2’s features, people visiting your site may still get a better experience from prefetching.

How do I know if this is working?

There are a couple ways:

  1. nghttp is an HTTP/2 client that ships with the nghttp2 suite. nghttp -v http://example.com will show all the HTTP/2 signalling packets, HTTP headers, content, and resources sent from the server in a single request. You can see PUSH PROMISE signals from the server and the pushed resources after the main page is sent.
  2. In Google Chrome, chrome://net-internals/#spdy will show a history of server connections from the browser. Clicking on a connection will show the discussion between the browser and the server. Within that text, you can see PUSH PROMISE packets and the pushed resources.
How can I help with development and testing?

The source code is available at https://github.com/daveross/http2-server-push. Issues and pull requests are welcome and encouraged!

Reviews

Jumpin’ Geehosofats

Boink !

endless hours fine tuning and agonizing over my complicated site(s) with a gazillion plugins and scripts.

tried every cache ever made for wordpress. different CDN’s… fire breathing VPS…

without Cloudflare, and Simple Cache site loads in something like 16 seconds

now using all free cloudflare, simple cache and HTTP/2 Server Push… Pingdom is telling me it loaded in UNDER 2 seconds…

Experience with bloated theme, cloudflare and server push

Hey I am very much interested in the concept of using server push and I have tried it with some sites using the plugin in combination with another plugin called

WP Asset Clean Up

. WP Asset Clean Up allows you to deregister styles and scripts that you do not want/need on every page. It was much easier for a quick test than writing some conditional logic. I have compared it with loading times against a normal w3 total cache site where everything is minified and cached. So far for the bloated theme (salient), the loading times are actually much better for the website using w3 total cache, but I still think that a lightweight theme with conditional logic for js and css in combination with server push will be my future concept for the next websites we are developing. I also got the 520 errors from cloudflare when editing the pages but this can be circumvented by switching the plugin off before editing.

Keep up the good work I think there is great potential in this plugin. I think that prefetch, preload and deregister could be options that one could choose for each script/style on each page to really only load scripts when they are needed.

Thanks again!

Tino

Unfortunately didn't work for me

Unfortunately this didn’t work for me. I tried two websites, running Photocrati and Interface themes. I don’t run a caching plugin, but I cleared my web server cache and browser cache multiple times.

I gave the plugin 3/5 because I like the idea and don’t want to put people off, and because it does no harm. Hopefully it can be improved to work more broadly.

Read all 8 reviews

Contributors & Developers

“HTTP/2 Server Push” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0

  • Initial release

1.1

  • Fix errors starting the output buffer through the template_redirect action

1.2

  • Support for protocol-relative URLs
  • Implemented “resource hints” to encourage preload/prefetch behavior when HTTP/2 support is lacking.
  • Fixed ‘as’ value to match latest W3C specs

1.3

  • Doesn’t render resource hints when WordPress native support is present
  • No longer pushes assets on admin pages
  • Limits HTTP/2 Server Push headers to 4k to help alleviate 520 errors when used with Cloudflare