20180912追記
Chrome71で動作確認しました。
仕様的にも変更が入ってるので、下記記事参照
asnokaze.hatenablog.com
HTTP/2ではリクエストは並列的に行われますが、クライアントは各リクエストに優先度を設定できます。サーバはこの優先度によって、レスポンスの順番(正確にはレスポンスを返すのに使用するリソース)を、制御しています。
この優先度の設定はブラウザが自動で行っており、Webエンジニアは意識する必要はありません。例えばレンダリングを開始するのに必要なCSSなどは優先度が高く、画像などは優先度が低く設定されるのが一般的です。
しかし、Webエンジニアが明示的にHTML要素にどの優先度でリクエストするか指示したい場合でも現状は出来ません。例えば、ユーザの閲覧目的が特定の画像である場合や、特定のJavaScriptがコンテンツに重要ということもあるかもしれません。
同様にFetch APIにも同じことが言えるかと思います。
そこで、それらを可能にするためにW3CのWICGで「Priority Hints」という、仕組みの議論がされています。
まだCommunity Groupでの議論であり、仕組みが有用か？スコープは？仕組みはどのようにスべきか？などである。たたき台として、例は出てきているが、まだまだ変わる可能性は高い。
Priority Hints
Priority Hintsの仕組みを用いることで、Webデベロッパーは、HTML要素にgroup属性でcritical, fonts, functional, visual, lateを指定することで、優先度を指示できます。
HTTP/2の優先度は、具体的にはWeightとDpendencyからなる。Dependencyを用いることでリソースAをレスポンスしてから、リソースBをレスポンスするように指示できる。上記のgroupはそのまま、HTTP/2のDependencyの関係を指示できるものだと思われる。
現在、たたき台として上がっている分かりやすい例を幾つか示す。
Fetch APIに関してはスコープ内だが、まだ未定。
例1
<img src=foo group=visual>
画像が最初の表示に影響を与えるので比較的高い優先順位でロードされることを意味する。
例2
<img src=foo before=visual>
他の表示に影響を与えるリソースよりも高い優先順位で画像をロードすることを意味する(本当に重要な画像など)。
例4
<iframe src=foo group=late>
iframeとそのすべてのサブリソースの重要度を下げることを意味します。
Open questions
幾つかの課題がOpen questionsと挙げられているが
上記とは別にHTML要素間のDependencyを明示できるようにする仕組みも検討されている。
<img fetch-class="shop-branding" src="logo.png" higher-priority-than="shop-scripts" lower-priority-than="shop-item"> <script fetch-class="shop-scripts" src="lazy-loader.js"> <img fetch-class="shop-item" src="product-01.png"> <img fetch-class="shop-item" src="product-02.png">
