This plugin provides a convenient way to utilize Server Push via a twig filter
This plugin requires Craft CMS 4.0.0 or later.
To install the plugin, follow these instructions.
-
Open your terminal and go to your Craft project:
cd /path/to/project -
Then tell Composer to load the plugin:
composer require raeder/craft-http2-server-push-twig -
In the Control Panel, go to Settings → Plugins and click the “Install” button for HTTP/2 Server Push Twig.
This plugin adds a twig filter that allows you to send a "Link" header to your web-server to enable HTTP/2 Server Push. You will still have to configure your web-server to interpret the Link header and push the assets.
You can add any asset that should be included in the Link header like this:
<link rel="stylesheet" href="{{ '/css/blog.css' | h2push }}">
CSS, JS and image files are supported out of the box. If you want to push another asset type you can pass the type like this:
<link rel="stylesheet" href="{{ '/uploads/test.mp3' | h2push('audio') }}">
A full list of supported types can be found here: https://fetch.spec.whatwg.org/#concept-request-destination It's also possible to mark an asset as crossorigin:
<link rel="stylesheet" href="{{ '/uploads/test.mp3' | h2push('audio', true) }}">
After your site template was rendered by craft a hook will generate the Header. If you're using Caddy you can find an example on how to configure your server in my blog-post: https://www.raeder.technology/post/practical-php-implementation-for-http-2-server-push
Module preload headers are an experimental browser feature so tread carefully. To push your module file use the h2module filter:
<script type="module" src="{{ 'app.js' | h2module }}"></script>
Please note that you must add 'type="module"' to your script tag, otherwise Google Chrome will not support import and export features.