diff --git a/src/content/ja/2021/resource-hints.md b/src/content/ja/2021/resource-hints.md new file mode 100644 index 00000000000..0e57b4a9242 --- /dev/null +++ b/src/content/ja/2021/resource-hints.md @@ -0,0 +1,648 @@ +--- +#See https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Authors'-Guide#metadata-to-add-at-the-top-of-your-chapters +title: リソースヒント +description: 2021年版Web Almanacのリソースヒントの章では、リソースヒントの採用、その使い方、バッドプラクティス、パフォーマンスへの影響について説明しています。 +authors: [kevinfarrugia] +reviewers: [siakaramalegos, tunetheweb, andydavies, samarpanda, westonruter] +analysts: [Nithanaroy] +editors: [rviscomi] +translators: [ksakae1216] +results: https://docs.google.com/spreadsheets/d/1Mw6TjkIClRtlZPHbij5corOZbaSUp-vgTVq3Ig18IwQ/ +kevinfarrugia_bio: Kevin Farrugiaは、ウェブパフォーマンスとソフトウェアアーキテクチャのコンサルタントです。ブログはimkev.dev でご覧いただけます。 +featured_quote: 資源のヒントは、レーシングカーのエンジンを微調整するようなものです。遅いエンジンを速くすることはできないし、調整しすぎると壊れてしまう。でも、ちょっとした工夫で、その性能を最大限に引き出すことができる。 +featured_stat_1: 44.3% +featured_stat_label_1: 上位1,000サイトにおけるプリロードの採用状況 +featured_stat_2: 21.5% +featured_stat_label_2: 最初の3秒間の未使用のプリロードヒント +featured_stat_3: 423% +featured_stat_label_3: 画像へのネイティブ遅延ローディングの採用が拡大 +--- + +## 序章 + +リソースヒントは、ウェブサイトのパフォーマンスを向上させるために使用できる、ブラウザへの指示です。この指示によりブラウザが、取得および処理する必要があるオリジンまたはリソースの優先順位を決定するのを支援できます。 + +ここでは、リソースヒントの実装方法、よくある落とし穴、そしてリソースヒントをできるだけ効果的に使うためにできることを詳しく見ていきましょう。 + +### Linkディレクティブ + +もっとも広く採用されているリソースヒントは、Linkディレクティブの `rel` 属性で実装されています。それらは`dns-prefetch`、`preconnect`、`prefetch`、`prerender`と`preload`です。 + +これらは、次の2つの方法で実装できます。 + +#### HTML要素 + +```html + +``` + +#### HTTPヘッダー + +``` +Link: ; rel=dns-prefetch +``` + +また、JavaScriptを使用することで、HTML要素を動的に注入することも可能です。 + +```js +const link = document.createElement("link"); +link.rel="prefetch"; +link.href="https://example.com"; +document.head.appendChild(link); +``` + +HTTPヘッダーの採用率は、ドキュメントマークアップの一部としてリソースヒントを実装するよりも著しく低く、分析したページの1.5%未満しかHTTPヘッダーでリソースヒントを実装していません。これは、サーバ側でHTTPヘッダーを追加するのに比べ、HTMLソースから簡単に追加・変更できることに起因すると思われます。 + +{{ figure_markup( + image="http-headers-vs-html-markup.png", + caption='HTTPヘッダーやHTMLマークアップとしてのリソースヒントの普及。', + description='HTTPヘッダーとHTMLマークアップとしてのリソースヒントの人気を示す棒グラフです。HTMLマークアップは、デスクトップでは91.2%、モバイルで94.1% のインスタンスで使用されています。HTTPヘッダーは、デスクトップのインスタンスの8.8%、モバイルのインスタンスの5.9%で使用されています。', + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTgxCYoH2vDbhTky1qQKEeV034kReHF8JYYq0aDyoo6LG22XL6Tar3dNPsqU1_zyvR6vuFEdMGoF1oP/pubchart?oid=1056457221&format=interactive", + sheets_gid="1707816066", + sql_file="http_headers_hints_adoption.sql" + ) +}} + +私たちの現在の [方法論](./methodology) では、QuickLink を通じて追加されるような、ユーザー インタラクションに続いて追加されるリソース ヒントを確実に測定することは不可能ですが、この特定のライブラリは[コアウェブ・バイタル・テクノロジー・レポート](https://datastudio.google.com/s/uMbv5CQfW4Q)によると分析したページの0.1%以下でしか表示されませんでした。 + +HTTPヘッダーを用いたリソースヒントの採用は、`` HTML要素に対する採用よりも著しく少ないことを考慮し、本章の残りの部分では、HTML要素を用いたリソースヒントの使用状況の分析に焦点を当てることにする。 + +### リソースヒントの種類 + +現在、ほとんどのブラウザでサポートされているリソースヒントのリンク関係は5つあります。`dns-prefetch`, `preconnect`, `prefetch`, `prerender`, `preload` です。 + +#### `dns-prefetch` + +```html + +``` + +`dns-prefetch` ヒントは、ドメイン名を解決するための初期リクエストを開始します。これはクロスオリジンドメインのDNS検索にのみ有効で、 `preconnect` とペアで使用することができる。Chromeは現在、最大で64の同時実行中のDNS要求をサポートしていますが、昨年までの6から増加し、他のブラウザではまだ厳しい制限を受けています。たとえば、Firefoxでは 8 に制限されています。 + +#### `preconnect` + +```html + +``` + +`preconnect` ヒントは `dns-prefetch` と同様の動作をしますが、DNSルックアップに加えて、HTTPSで提供される場合はTLSハンドシェイクとともに接続を確立します。`dns-prefetch` の代わりに `preconnect` を使用すると、より高いパフォーマンスを得ることができます。しかし、証明書は通常3KB以上あり、他のリソースの帯域と競合してしまうため、控えめに使用する必要があります。また、重要なリソースに必要のないコネクションを開いてCPU時間を浪費することも避けたいものです。もしコネクションが短時間（たとえばChromeでは10秒）使用されない場合、ブラウザによって自動的に閉じられ、`preconnect`の努力がムダになることを覚えておいてください。 + +#### `prefetch` + +```html + +``` + +`prefetch` ヒントを使うと、次のナビゲーションでリソースが必要になるかもしれないことをブラウザに勧めることができます。ブラウザはリソースの優先順位の低いリクエストを開始し、必要なときにキャッシュから取得されるため、ユーザー体験を向上させることができるかもしれません。リソースは `prefetch` で事前に取得できますが、ユーザーがリソースを必要とするページに移動するまで、前処理や実行は行われません。 + +#### `prerender` + +```html + +``` + +`prerender` ヒントを使用すると、ページをバックグラウンドでレンダリングし、ユーザがそのページに移動した場合のロード時間を改善できます。リソースを要求するだけでなく、ブラウザは前処理を行い、サブリソースを取得・実行できます。`prerender` は、ユーザーがプリレンダリングされたページにナビゲートしない場合、ムダに終わる可能性があります。仕様に反して、Chromeは `prerender` ヒントを NoStateプリフェッチ として扱い、このリスクを軽減しています。完全なプリレンダーとは異なり、JavaScriptの実行やページの一部のレンダリングは事前に行わず、リソースを事前に取得するのみです。 + +#### `preload` + +ほとんどのモダンブラウザは `preload` ヒントもサポートしていますし、程度の差はありますが `modulepreload` というヒントもサポートしています。`preload` 命令は、ページの読み込みに必要なリソースの初期フェッチを開始し、フォントファイルやスタイルシートで参照される画像など、発見が遅れたリソースにもっともよく使用されます。リソースのプリロードは、リソースの優先順位を上げるために使われることがあり、開発者はHTMLの解析中に発見されたとしても、最大のコンテントフルペイント (LCP) 画像の読み込みを優先させることができます。 + +`modulepreload` は `preload` に特化した代替手段で、動作は似ていますが、使用できるのは モジュールスクリプト に限定されています。 + +## 採用実績と傾向 + +{{ figure_markup( + image="resource-hints-adoption.png", + caption='リンクのrel属性の採用。', + description='link rel属性の値を使用しているページの割合を示す棒グラフです。`dns-prefetch`はモバイルで36.4%、デスクトップでは35.7%の割合で採用されています。`preload` はモバイルで22.1%、デスクトップでは22.0%の採用率です。`preconnect` はモバイルで12.7%、デスクトップでは12.9%の採用率です。`prefetch` はモバイルで2.1%、デスクトップでは2.4%の採用率です。`prerender` はモバイルで0.1%、デスクトップでは0.1% の採用率です。`modulepreload` はモバイルで0.1%、デスクトップでは0.1% の採用率です。', + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTgxCYoH2vDbhTky1qQKEeV034kReHF8JYYq0aDyoo6LG22XL6Tar3dNPsqU1_zyvR6vuFEdMGoF1oP/pubchart?oid=1740212588&format=interactive", + sheets_gid="2077755325", + sql_file="hints_adoption.sql" + ) +}} + +もっとも多く利用されているリソースヒントは `dns-prefetch` (モバイルでは36.4%)です。というのは、2009年に導入されたことを考えると、当然といえば当然なのですが。HTTPSの普及に伴い、そのドメインに接続することが確実な場合は、多くの場合、`preconnect`に置き換える必要があります（モバイルでは12.7％）。`preload` ヒントは2016年 にChromeではじめて登場した比較的新しいものですが、2番目に広く採用されているリソースヒント（モバイルでは22.1%）で、前年比で一定の成長を見せていることが、この指示の重要性と柔軟性を裏付けています。 + +上のグラフにあるように、モバイルとデスクトップでの普及率はほぼ同じです。 + +### ランク別 + +{{ figure_markup( + image="rel-preload-adoption-by-rank.png", + caption='`rel="preload"`のCrUXランク別採用状況。', + description='`rel="preload"`の採用率をCrUXランクで区分した棒グラフです。モバイルの上位1,000サイトで44.2%、デスクトップでは44.3%となっています。上位10,000サイトでは、モバイルが43.3％、デスクトップが44.1％。モバイルの上位10万サイトで35.3%、デスクトップでは35.7%となっています。モバイルの上位100万サイトで27.2%、デスクトップでは27.3%。モバイルで全サイトの22.1%、デスクトップでは22.0%となっています。', + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTgxCYoH2vDbhTky1qQKEeV034kReHF8JYYq0aDyoo6LG22XL6Tar3dNPsqU1_zyvR6vuFEdMGoF1oP/pubchart?oid=291501434&format=interactive", + sheets_gid="1880502987", + sql_file="hints_adoption_by_rank.sql" + ) +}} + +[ランク](./methodology#chrome-ux-report)でデータを分割すると、採用率が顕著に変化し、`preload`ヒントはデータセット全体の22.1%から、上位1000サイトでは44.3%の採用率でトップに立っていることが観察されます。 + +{{ figure_markup( + image="rel-dns-prefetch-adoption-by-rank.png", + caption='`rel="dns-prefetch"`の採用状況をCrUXランクで区分したもの。', + description='`rel="dns-prefetch"`の採用率をCrUXランクで区分した棒グラフです。`rel="dns-prefetch"`は、モバイルの上位1,000サイトで28.6%、デスクトップでは28.2%となっています。上位10,000サイトは、モバイルが25.5%、デスクトップは25.3%となっています。上位10万サイトは、モバイルで22.9%、デスクトップでは22.7%となっています。上位100万サイトでは、モバイルでは27.0％、デスクトップでは27.1％となっています。モバイルの全サイトでは36.4%、デスクトップで35.7%となっています。', + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTgxCYoH2vDbhTky1qQKEeV034kReHF8JYYq0aDyoo6LG22XL6Tar3dNPsqU1_zyvR6vuFEdMGoF1oP/pubchart?oid=1340595902&format=interactive", + sheets_gid="1880502987", + sql_file="hints_adoption_by_rank.sql" + ) +}} + +上位1,000サイトと全体の導入状況を比較すると、`dns-prefetch`が唯一の導入減少を示すリソースヒントであることがわかります。 + +{{ figure_markup( + image="rel-preconnect-adoption-by-rank.png", + caption='`rel="preconnect"`のCrUXランク別採用状況。', + description='`rel="preconnect"`の採用率をCrUXランクで区分した棒グラフです。モバイルの上位1,000サイトでは29.7%、デスクトップは29.0%となっています。上位10,000サイトでは、モバイルが24.9%、デスクトップは24.9%となっています。上位10万サイトでは、モバイルが18.2%、デスクトップは18.4%となっています。上位100万サイトのモバイルでは13.6%、デスクトップは13.7%となっています。モバイルの全サイトでは12.7%、デスクトップは12.9%となっています。', + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTgxCYoH2vDbhTky1qQKEeV034kReHF8JYYq0aDyoo6LG22XL6Tar3dNPsqU1_zyvR6vuFEdMGoF1oP/pubchart?oid=1818271680&format=interactive", + sheets_gid="1880502987", + sql_file="hints_adoption_by_rank.sql" + ) +}} + +この減少に対抗するため、上位1,000ページでは `preconnect` ヒントの採用が増加し、その性能向上と幅広いサポートを活用しています。今後、他のインターネットサイトがこれに追随することで、`preconnect`の採用が増加し続けるものと思われます。 + +### 使用方法 + +リソースヒントは、正しく使用すれば非常に効果的です。ブラウザから開発者に責任を移すことで、重要なレンダリングパスに必要なリソースを優先し、ロード時間やユーザー体験を向上させることができます。 + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ランク`pre`­`load``pre`­`fetch``pre`­`connect``pre`­`render``dns-prefetch``module`­`preload`
1,000324041
10,000314131
100,000223131
1,000,000222121
all221121
+
{{ figure_link(caption='1ページあたりのリソースヒントの数のランク別中央値。', sheets_gid="528380369", sql_file="resource_hints_distribution_by_rank.sql") }}
+
+ +リソースヒントを使用しているサイトのうち、上位1,000サイトの中央値をコーパス全体と比較すると、上位のサイトほどページあたりのリソースヒントの数が、多いことがわかる。上位1,000サイトで合計0回しか出現していない`prerender`は、異なるパターンを観察する唯一のヒントです。 + +## コアウェブバイタルとの相関 + +{{ figure_markup( + image="correlation-of-good-cwv-and-preload.png", + caption='良好なCWVスコアと`rel="preload"`ヒントの数との相関関係', + description='良いCWVスコアを持つページ数と、そのページ上の `rel="preload"` ヒントの数を示す、傾向線のある散布図。デスクトップページの30.8%、モバイルページの23.0%はプリロードヒントが0個で、良いCWVスコアを持っています。プリロード・ヒントが20個あるデスクトップ・ページの25.1%とモバイル・ページの18.2%が、良いCWVスコアを持っています。', + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTgxCYoH2vDbhTky1qQKEeV034kReHF8JYYq0aDyoo6LG22XL6Tar3dNPsqU1_zyvR6vuFEdMGoF1oP/pubchart?oid=450137807&format=interactive", + sheets_gid="2032682744", + sql_file="correlation_cwv_preload.sql" + ) +}} + +CrUXデータセットにおけるページの コアウェブ・バイタル のスコアとプリロード リソースヒントの使用を組み合わせることにより、リンク要素の数とCWVで良い評価を得たページの割合の間に負の相関関係を観察することができました。プリロードヒントが少ないページは、良い評価を受けやすいと言えます。 + +{{ figure_markup( + image="correlation-of-good-lcp-and-preload.png", + caption='良いLCPスコアと`rel="preload"`ヒントの数との相関関係', + description='LCPスコアが高いページの数と、そのページの `rel="preload"` ヒントの数を示す、傾向線付きの散布図です。プリロード・ヒントが0個のデスクトップ・ページの49.0%、モバイル・ページの37.2%が良いLCPスコアを持っています。プリロード・ヒントが20個あるデスクトップ・ページの42.8%、モバイル・ページの31.1%が、良いLCPスコアを持っています。', + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTgxCYoH2vDbhTky1qQKEeV034kReHF8JYYq0aDyoo6LG22XL6Tar3dNPsqU1_zyvR6vuFEdMGoF1oP/pubchart?oid=1720796384&format=interactive", + sheets_gid="2032682744", + sql_file="correlation_cwv_preload.sql" + ) +}} + +この現象は、ページのLCPにも見られ、多くの場合、開発者はLCP要素のレンダリングに必要のないリソースを優先させ、その結果、ユーザー体験を低下させていることがわかります。 + +これは、プリロードヒントがあるとページが遅くなることを証明するものではありませんが、多くのヒントを持つことは、パフォーマンスが低下することと相関しています。しかし、多くの場合、プリロードされるリソースの数は少なくし、リソースの優先順位付けは可能な限りブラウザに委ねるべきです。 + +

注: ヒントの数だけでなく、プリロードされる各リソースのサイズもウェブサイトのパフォーマンスに影響を及ぼします。上図では、プリロードされた各リソースのサイズは考慮されていません。

+ +## `rel="preload"` + +とはいえ、より多くのウェブサイトが `preload` を採用することが予想されるため、preloadリソースヒントをよりよく見て、なぜそれが効果的でありながら同時に誤用されやすいのかを理解しましょう。 + +### `as` 属性 + +`as` 属性は、 `rel="preload"` (または `rel="prefetch"`) を使用して、ダウンロードするリソースの種類を指定するときに指定する必要があります。正しい `as` 属性を適用することで、ブラウザはより正確にリソースの優先順位を決定できます。たとえば、`preload as="script"` は低または中の優先順位になり、`preload as="style"` は内部リクエストの優先順位が _最高_ になります。`as` 属性は、今後のリクエストに備えてリソースをキャッシュし、正しい コンテンツセキュリティポリシー を適用するために必要です。 + +{{ figure_markup( + image="preload-as-attribute-values.png", + caption='`rel="preload" as` の属性値です。', + description='rel="preload "の値の使用状況を示す棒グラフ。scriptはモバイルで54.6%、デスクトップでは54.5%の割合で使用されています。フォントはモバイルで21.9%、デスクトップでは23.5%、スタイルはモバイルで10.9%、デスクトップでは11.3%が使用されています。fetchはモバイルで9.4%、デスクトップでは7.5%使用され、imageはモバイルで2.8%、デスクトップでは2.8%使用されています。', + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTgxCYoH2vDbhTky1qQKEeV034kReHF8JYYq0aDyoo6LG22XL6Tar3dNPsqU1_zyvR6vuFEdMGoF1oP/pubchart?oid=1844544440&format=interactive", + sheets_gid="1246058294", + sql_file="hint_attribute_usage.sql" + ) +}} + +#### `script` + +`script` はかなりの差をつけてもっとも一般的な値です。`