Preconnect のオリジン

Silktide は、ブラウザーにまもなく必要となる他のサーバーをあらかじめ伝えることで、ページの読み込みが速くなる可能性があるかどうかをチェックします。接続を早い段階で確立すると、サードパーティーのファイルのダウンロードをより早く開始できます。

ブラウザーが新しいサーバー（フォントサービス、、アナリティクスプロバイダーなど）から何かをダウンロードするには、まずサーバーのアドレスを調べ、接続を開き、暗号化のネゴシエーションを行う必要があります。この準備にはネットワーク上での往復が何度か必要です。通常、ブラウザーはそのサーバーから必要なファイルを最初に見つけた時点でこの処理を開始するため、ページの読み込みがかなり進んでからになることがあります。

重要な理由

1台のサーバーへの接続確立には、モバイル接続では数百ミリ秒かかることがあります。また、一般的なページはいくつものサードパーティーサーバーと通信します。接続の確立が遅れると（必要なファイルがスタイルシートやスクリプトの深い階層で参照されている場合など）、フォントや画像といった目に見えるコンテンツに直接遅延が生じます。

preconnect ヒントを使うと、この処理を読み込みのごく初期に移し、ブラウザーがもともと行っていた処理と並行して実行できます。サーバーごとにを1行追加するだけで、ページの見た目は変わりません。

修正方法

チェックで報告された重要なサーバーごとに、ページの <head> に preconnect ヒントを追加します。

<!-- ブラウザーが接続の必要性を検出する前に接続を開く -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

必要なサーバーには crossorigin 属性を含めます。フォントでは必ず必要です。
フォント、画像、重要なスクリプトなど、表示されるページに影響するサーバーだけに preconnect を使用します。接続を開くたびに訪問者のデバイスのリソースを消費するため、少数のヒントは役立ちますが、多すぎると逆効果です。
重要度の低いサーバーには、アドレスの検索だけを事前に行う、より負荷の小さい rel="dns-prefetch" ヒントを使用できます。

Silktide によるテスト方法

速度テストで設定されているデバイスの種類、接続速度、テスト場所を使用し、実際のブラウザーでページを読み込みます。
ページがダウンロードしたサーバーのうち、接続の確立によってダウンロードが遅延し、早期接続のヒントが設定されていなかったサーバーを特定します。
各サーバーについて、preconnect ヒントによって短縮できる推定時間とともに報告します。
推定短縮時間の合計に基づいてページを評価します。約100ミリ秒で評価が下がり、200ミリ秒以上では低い評価になります。

トラブルシューティング

ヒントを追加しましたが、検出結果が残っています

アドレスが正確か確認してください。ヒントは、プロトコルやサブドメインを含め、ファイルが実際に取得されるサーバーと一致している必要があります（https://fonts.gstatic.com は https://fonts.googleapis.com とは異なります）。フォントではヒントに crossorigin も必要です。これがないと、ブラウザーは誤った種類の接続を開き、その後その接続を破棄します。

すべてのサードパーティーサーバーに preconnect を設定すべきですか？

いいえ。ブラウザーが受け入れる早期接続の数には上限があり、接続ごとに訪問者のデバイスのリソースを消費します。訪問者が最初に目にする内容を左右するファイルを提供する、少数のサーバーにのみ preconnect を使用してください。