Unfortunately HTTP/2 adoption is still slow, so the IETF “backported” this workflow to HTTP/1.1 as well, by introducing the HTTP status . In this case the server sends one or more HTTP responses for a single request. The last one must be the traditional that returns the HTML of the page, whereas the first n can include a special header Link to tell the browser to fetch the asset ahead of time.

As first thing, you need 3.11.0+ with Early-Hints enabled:

early_hints true

Then from the project configuration, you can simply enable the feature:

# config/environment.rb
Hanami.configure do
  # ...
  early_hints true
end

As last step, you need a web server that supports HTTP/2 and Early Hints like h2o. When you’ll start the server and visit the page, javascripts and stylesheets will be pushed (see section).

As of today, only Puma supports Early Hints.

You can opt-in/out the following types:

Javascripts

Pushed by default:

<%= javascript "application" %>
<%= javascript "https://somecdn.test/framework.js", "dashboard" %>

Opt-out:

<%= javascript "application", push: false %>
<%= javascript "https://somecdn.test/framework.css", "dashboard", push: false %>

Stylesheets

Pushed by default:

Opt-out:

<%= stylesheet "application", push: false %>

<%= favicon "favicon.ico", push: :image %>

Image

Opt-in:

<%= image "avatar.png", push: :image %>

Audio

Opt-in:

<%= audio "song.ogg", push: true %>

Block syntax (pushes only song.ogg):

Opt-in:

<%= video "movie.mp4", push: true %>

Block syntax (pushes only movie.mp4):

<%=
  video do
    text "Your browser does not support the video tag"
    source src: asset_path("movie.mp4", push: :video), type: "video/mp4"
    source src: asset_path("movie.ogg"), type: "video/ogg"
  end
%>

Asset path

Asset URL