Projects: HTTP/2 Early Hints

Webページは、スタイルシートや画像(アセット)などの外部リソースにリンクすることがあります。 HTTP/1.1では、ブラウザはHTMLを解析し、リンクごとにアセットをダウンロードし、最終的にそれに対してアクションを実行します: 画像のレンダリングまたはJavaScriptコードの評価。 HTTP/2では機能強化が導入されました: サーバーはHTMLペイロードと一部のアセットの両方を並行して事前にブラウザーに「プッシュ」することができます。このワークフローは、HTTP/2 TCP接続が多重化されているため許可されています。それは多くのコミュニケーションが同時に起こることができることを意味します。

残念ながらHTTP/2の採用はまだ遅いので、IETFはHTTPステータス103 Early Hintsを導入することで、このワークフローをHTTP/1.1にも「バックポート」しました。この場合、サーバーは単一の要求に対して1つ以上のHTTP応答を送信します。最後のものは、ページのHTMLを返す伝統的な200 OKでなければなりませんが、最初のnは、ブラウザにアセットを事前に取得するように指示する特別なヘッダLinkを含めることができます。

セットアップ

まず最初に、Early-Hintsを有効にしたPuma 3.11.0+ が必要です:

# Gemfile
gem "puma"

# config/puma.rb
early_hints true

その後、プロジェクト構成から、この機能を簡単に有効にすることができます:

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

最後のステップとして、HTTP/2とh2oのようなEarly HintsをサポートするWebサーバーが必要です。サーバーを起動してページにアクセスすると、JavaScriptとスタイルシートがプッシュされます(アセットヘルパーセクションを参照)。

他のWebサーバー

現在では、PumaだけがEarly Hintsをサポートしています。

アセットヘルパー

あなたの資産を自動的にプッシュするために、あなたは私たちのアセットヘルパーを使わなければなりません。しかし、ブラウザの制限(最大100アセットまでしかプッシュできません)により、デフォルトではHanamiはスタイルシートとJavaScriptのみを送信します。

Helper	Early Hints asset type	Pushed by default
`javascript`	`:script`	yes
`stylesheet`	`:style`	yes
`favicon`	`:image`	no
`image`	`:image`	no
`video`	`:video`	no
`audio`	`:audio`	no
`asset_path`	N/A	no
`asset_url`	N/A	no

次の種類をオプトインまたはオプトアウトできます:

JavaScript

デフォルトでプッシュされます:

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

オプトアウト:

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

スタイルシート

デフォルトでプッシュされます:

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

オプトアウト:

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

Favicon

オプトイン:

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

画像

オプトイン:

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

オーディオ

オプトイン:

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

ブロック構文(song.ogg のみプッシュ):

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

ビデオ

オプトイン:

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

ブロック構文(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 "application.js", push: :script %>

アセットURL

<%= asset_url "https://somecdn.test/framework.js", push: :script %>

デモプロジェクト

完全に機能する例を探しているなら、このデモプロジェクトをチェックしてください。