Easily Integrate HTTP 2 Server Push with a Laravel Middleware

 

As we all know technology changes fast and if you don’t stop and look around once in awhile, you could miss it. HTTP/2 is one area of our tech stack that I haven’t been keeping up with an honestly knew nothing about it until Laracon where Ben Ramsey gave a talk on the subject.

You can watch his talk here and his slide deck is available from his site to browse through. What amazed me is how easy it seemed to implement by utilizing server push or preload. Basically, you send a special “Link” header with all the pages assets and then if the server and browser support it they are pulled down in a more efficient use of the network.

During Ben’s talk he gave an example usage of how this could work in Laravel and here is one way:

return response($content, $status)
->header('Link', '; rel=preload; as=style', false)
->header('Link', '; rel=preload; as=script', false);

Of course doing this for every single asset is kind of a pain. Luckily we have two Laravel packages available that will automatically handle this through the Middleware.

The first is by Tom Schlick and the second by Jacob Bennett. Both packages do basically the same thing but each have a different idea on how you would want to integrate it.

Tom’s automatically includes the resources in your elixir /build/rev-manifest.json file. Then to add a resource manually you use

pushStyle($pathOfCssFile);
pushScript($pathOfJsFile);
pushImage($pathOfImageFile);

Jacob’s, on the other hand, is more automated because it scans the DOM and automatically adds any script, style, or image into the headers.

Which one you choose is going to be dependent on your project and your ideal workflow. Jacob’s is set it and forget it style but the view must be scanned to grab all the assets out. Where Tom’s is more manual but you can control every aspect.

If you are looking to improve the performance of your Laravel app give these a try.