対象の記事はこちら👉<a style="background-color:#ffffff" href="https://web.dev/priority-hints/" target="_blank" rel="noopener noreferrer">Optimizing resource loading with Priority Hints</a> Priority Hints について分かり易い記事が web.dev で投稿されていたので、和訳をしてみる。 コンテキストが抜けている部分は補って意訳していく。それではスタート！ <h2 id="h038d6117c5">導入</h2>Priority Hints によって、ブラウザはリソースの読み込み優先度を知ることができるようになり、リソースの読みこみが適切に制御可能となった。それによりCore Web Vitalsのスコアが以前よりも改善しやすくなった。 ブラウザがウェブサイトを解析し、画像・JS・CSSのようなリソースをダウンロードし始めるわけだが、その際最適な順番で読み込みの順番を制御している。ではどのように制御されているのかだが、各リソースに対して fetch priority が割り当てられている。この priority は次の2つによって決められている。<ul><li>リソースの種類</li><li>リソースの位置 in document</li></ul>例えば、ビューポート内の画像であれば「High」priority、レンダーブロッキングな <code>head</code> 内のCSSについては「Very High」な priority といったように、ブラウザがよしなに付与してくれる。このようにブラウザは priority の付与を自動的にしてくれるわけだが、全てのケースにおいて最適な priority を付与してくれるかといえば、そうとはいえない。 この記事では、Priority Hints と <code>fetchpriority</code> 属性についてまとめていく。 <h2 id="h9707d3a59a">概要</h2>Priority Hints によってできること、以下３つ。<ul><li><code>fetchpriority="high"</code> を画像要素に付与することで、 LCP (メインコンテンツの読み込み時間をはかる指標。ユーザーがページコンテンツとインタラクションをとれるようになるまでの時間と関連している)の最適化が可能になる</li><li><code>async</code> script の priority を上げることができる。現在は <code>&lt;link rel="preload"&gt;</code> を <code>async</code> script に付与する hack が使われている</li><li>即時に読み込まなくても良いリソースの priority を下げることで、画像の読み込み順序を最適化する</li></ul> これまでリソースの priority の投機的取得には <code>preload</code> や <code>preconnect</code> という制限された手法を使わざるを得なかった。 Priority Hints はこれらの「Resource Hint」を補完することができるのだが、ここで一旦 <code>preload</code> と<code>preconnect</code> について復習しておこう。 <code>preload</code> : 先読みしておきたいクリティカルなリソースを、ブラウザに対して通知する機能である。<code>preload</code> を設定しない場合、読み込み順序の遅くなるリソース、例えば、スタイルシートの中のフォントや背景画像、JSから読み込まれる画像に対して価値を発揮することができる。 <code>preconnect</code> : コネクションを温めておき (=DNS の解決 + TCP の接続まで確立しておくことで、リクエストをすぐに送ることができる)、 Time-to-first-byte を改善できる。完全なリソースのURIは把握していないが、origin を知っている場合に有効な方法。 Priority Hints は <code>fetchpriority</code> を使って利用することができる。HTMLだけではなく、JSの fetch メソッドの priority プロパティでも制御は可能だ <code>例: fetch('/api/articles.json', { priority: 'high' }).then(/.../)</code> 。 Priority Hints は <code>preload</code> も補完することもできる。LCPの画像は <code>preload</code> された場合でも優先度が低くなってしまうが (←コメント: 仕様なのかは不明)、Priority Hints を使うことで読み込み順を早めることが可能となる。 <h2 id="h4facf89b69">リソースの優先度 (priority)</h2>priority に影響する要素について以下のようなものが挙げられる。<ul><li>CSS、フォント、JS、画像、サードパーティリソースには別々の priority が付与される </li><li>documentのどこにリソース対象のコンテンツが位置しているかによって priority が付与される</li><li><code>preload</code> を使うことで、ブラウザに対象のリソースの検知を促進する</li><li>priority の順序は <code>async</code> や <code>defer</code> によって影響を受ける</li></ul>それぞれのリソースに対する priority については、<a href="https://web.dev/priority-hints/#:~:text=The%20following-,table,-considers%20such%20factors" target="_blank" rel="noopener noreferrer">こちら</a>の参照をおすすめする（個人的には、納得感のある priority で設定されていると感じた）。priority が同じリソースについては、検知された順に読み込まれていくようだ。ちなみにChrome の Devtool で priority は確認できる。 <img src="https://images.microcms-assets.io/assets/1e1129a92bc841ccad1a43c6a2977d50/316a56b5c2564a59b3945b74a9a82234/image.png" alt=""> <h2 id="h19da9587c3">どこで Priority Hints を使うのか？</h2>リソースの読み込みについて、下記のようなことはご存知かとおもう。<ul><li>ブラウザが検知しづらいリソースについては <code>preload</code> を使うことで priority を上げることができる</li><li><code>async</code> <code>defer</code> をつかうことで他リソースのブロッキングを防ぐことができる</li><li>below-the-fold content (ファーストビューより下に位置するコンテンツのこと) についてはLazy Loadを使うことで、重要な above-the-fold content (ファーストビューのコンテンツ) に帯域幅を優先的に割り当てることができる</li></ul> 一方で、上記では不十分なケースについて次のようなものがある(= Priority Hints が出番となる)<ul><li>above-the-fold content に priority の異なる画像が複数ある。例えば、カルーセルの画像では先頭の画像の priority を高くしたい</li><li>ビューポートの中のヒーロー画像が「Low」priorityである。レイアウトが完成したのち、Chromeは画像がビューポートにあることを検知し、priority を高くする（Devtoolは最終的な priority のみを出力する – WebPageTestは両方出力してくれる
）。これにより大きな読み込み遅延が発生してしまう。画像に対して 「High」priority を付与することで、解決することができる。補足だが、<code>preload</code> で priority を高くするためには、LCP画像の早期検知と <code>fetchpriority='high'</code>が必要になる。その２つが満たされない場合、「Low」priority となってしまう。補足: ビューポート外の画像は「Low」priority が付与されるが、レイアウトでビューポート内に入ることがわかると「High」にブーストされる。</li><li><code>&lt;script&gt;</code> に <code>async</code> <code>defer</code> を付与することで、非同期の読み込みができるが、これらはデフォルトでは「Low」priority が付与される。つまり非同期でも優先度を上げて読み込みをしたい場合は Priority Hints が必要となる。</li><li>JSの <code>fetch</code> メソッドで読みこまれるリソースは「High」priority である。しかし、優先度を落としたいときは Priority Hints を使う必要がある。</li><li>CSSとフォントには「High」 priority が付与されるが、場合によっては LCP 画像を優先的に読み込ませたいときがある。</li></ul> <h2 id="h53e30ccf13">fetchpriority属性</h2><code>img</code> <code>script</code> <code>link</code> <code>iframe</code> に使うことができる。<pre><code>&lt;!-- We don't want a high priority for this above-the-fold image --&gt;
&lt;img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!"&gt;

&lt;!-- We want to initiate an early fetch for a resource, but also deprioritize it --&gt;
&lt;link rel="preload" href="/js/script.js" as="script" fetchpriority="low"&gt;

&lt;script&gt;
 fetch('https://example.com/', {priority: 'low'})
 .then(data =&gt; {
 // Trigger a low priority fetch
 });
&lt;/script&gt;

&lt;!-- The third-party contents of this iframe can load with a low priority --&gt;
&lt;iframe src="https://example.com" width="600" height="400" fetchpriority="low"&gt;&lt;/iframe&gt;</code></pre> <code>fetchpriority</code> を適用した場合のユースケースについては<a href="https://web.dev/priority-hints/#use-cases" target="_blank" rel="noopener noreferrer">元記事</a>を参照 <h2 id="h90281063e8">Priority Hints利用時の留意点</h2><ul><li><code>fetchpriority</code> はヒントであり、ディレクティブではない。ブラウザはディベロッパーの設定を尊重はするが、かならずしもそれに従うわけではない</li><li>Priority Hints と preload の違いを理解しよう。<ul><li>preload は強制的な fetch であり、ヒントではない</li><li>preload はブラウザにリソースの早期検知を促すものの、fetch についてはデフォルトの priority に従う。Priority Hints についてはリソースの検知は促さないが、priority を調整できる。</li><li>preload のほうが検証しやすい</li></ul></li><li>Priority Hints を使うことで priority を調整し preload を補完することができる。すでにLCPの画像を <code>&lt;head&gt;</code> で preload 指定している場合、「High」priority は大きな効果をもたらさないだろう。しかしもし、preload 対象のリソースがdocumentの下部に記載されている場合 (ビューポートの外)、「High」priorityは効果を発揮する。</li></ul>

Optimizing resource loading with Priority Hints の和訳

GoogleのCore Web VitalsがSEO評価の指標となって数年経ちましたが、CLS (Cumulative Layout Shift)の調整でハマったところを解決策を書きます。(WordPressを使ったサイトの話です) <h2 id="hc69c85bcf9">背景</h2><code>img</code> タグに高さが指定されていない場合、画像が読み込まれた時点で下のコンテンツの位置に変更が発生し、CLSが加算されてしまいます。そのため画像の高さを指定する必要があります。 あらかじめ <code>img</code> タグに<code>height</code>が指定されていたり、CMSの投稿画像のサイズルールが定められていればこの問題は簡単に回避できます。しかし、長年運用されているサイトで、投稿画像のサイズがばらばらだったりすると「困った！」となるわけです。さらに添付画像のように画像が100%幅のときは、 ウィンドウサイズを変更するたびに画像の高さが変わるため「高さ指定無理じゃね？」となりました。 <img src="https://images.microcms-assets.io/assets/1e1129a92bc841ccad1a43c6a2977d50/683b45d34e0447468e845dc1433c5b4e/27cd46af-b52f-e9e7-1b93-77218146c099.png" alt=""> <h2 id="hc4c05c18f9">解決策</h2>結論から言えば、CSSの <code>100vw</code> を使います。 WordPressの <code>wp_get_attachment_image_src</code>では、画像の幅、高さを取得できます。 <pre><code>$featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ) , 'thumbnail' );

// $featured_image[0]: 画像のURL
// $featured_image[1]: 画像の幅
// $featured_image[2]: 画像の高さ</code></pre> そこで画像の縦横比を取得します。 <pre><code>$ratio = $featured_image[2] / $featured_image[1];</code></pre> あとは <code>img</code> タグに指定するだけです。 <pre><code>&lt;img
&nbsp;&nbsp;&nbsp;src="&lt;?php echo $featured_image[0]; ?&gt;"
&nbsp;&nbsp;&nbsp;style="
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: calc(100vw * &lt;?php echo $ratio ;?&gt;);
&nbsp;&nbsp;&nbsp;"
/&gt;</code></pre> 以上。 追記: DevToolで確かめた限りだと、CLSに関しては <code>img</code> への<code>height</code>指定ではなく、CSS側の対応でもCLS加算は発生しませんでした。

記憶に残ったことを忘れないために色々メモとしてのこしていきます