リンクのプリフェッチはサブドメイン間で機能しますか？

10

私はこのようなものを使用して、単純なランディングページから重量のある単一ページアプリをクリックするときのパフォーマンスを向上させようと試みてきました。

<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />

ランディングページがサブドメイン上にある場合、パフォーマンスはそれほど向上しないようです。と言いhttps://subdomain.example.comます。

リンクをクリックしてにアクセスhttps://example.comしても、Chromeネットワークタブに長い遅延が表示されapp.js、app.cssロードされます。

プリフェッチされたリソース プリフェッチを使用したリソースのダウンロード時間

以下は、プリフェッチを無効にした同じリソースです。

プリフェッチなしのリソースダウンロード時間

合計でほぼ同じ時間がかかります。

プリフェッチキャッシュで読み込まれたアセットの1つのリクエストヘッダー：

一般：

Request URL: https://example.com/css/app.bffe365a.css
Request Method: GET
Status Code: 200  (from prefetch cache)
Remote Address: 13.226.219.19:443
Referrer Policy: no-referrer-when-downgrade

応答：

accept-ranges: bytes
cache-control: max-age=31536000
content-encoding: gzip
content-length: 39682
content-type: text/css
date: Mon, 06 Jan 2020 21:42:53 GMT
etag: "d6f5135674904979a2dfa9dab1d2c440"
last-modified: Mon, 06 Jan 2020 20:46:46 GMT
server: AmazonS3
status: 200
via: 1.1 example.cloudfront.net (CloudFront)
x-amz-cf-id: dO3yiCoPErExrE2BLYbUJaVye32FIJXXxMdI4neDGzGX9a6gcCDumg==
x-amz-cf-pop: LAX50-C1
x-amz-id-2: 1O0LmihxpHIywEaMQWX7G3FDAzxtH9tZq1T/jeVLMzifFSJSIIJSS6+175H61kKdAq6iEbwfs2I=
x-amz-request-id: AF35C178092B65D4
x-cache: Hit from cloudfront

リクエスト：

DNT: 1
Referer: https://example.com/auth/join
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36

私の質問は、プリフェッチキャッシュが使用されていることをChromeが示している場合、なぜコンテンツのダウンロードに時間がかかるのですか？

Chromeには、プリフェッチキャッシュ、ディスクキャッシュ、メモリキャッシュなど、さまざまな種類のキャッシュがあるようです。ディスクキャッシュとメモリキャッシュは非常に高速です（ロード時間は5ミリ秒と0ミリ秒）。ただし、プリフェッチキャッシュは、300msのダウンロード時間でかなり役に立たない場合があります。これが発生する理由の技術的な説明を入手できますか？Chromeのバグですか？Chrome 79.0.3945.117を使用しています。

html  link-prefetch 
— マロス
ソース
プリフェッチは、将来のナビゲーションを高速化するために使用されます。（web.dev/link-prefetch）の簡単な説明を参照してください
— Mohammad Yaseer
はい、プリフェッチは将来のナビゲーションをスピードアップするはずです。それなら、なぜ私の場合それをスピードアップしなかったのですか？タイミンググラフをご覧ください。
— マロス
サブドメインのコンテンツを別のドメインに配置して、ロードにも同じ時間がかかるかどうかを確認できますか？サブドメイン以外のドメイン（つまり、他のドメイン）のケースがどのように機能するかを示すことにより、サブドメインが問題ではない可能性があることを示しました。サブドメインに問題がある場合、次のステップは、これを行うための微調整を行うChrome構成設定があるかどうかを調べることです。または
— Martin
または、Firefox InspectorやOperaなどの同様のツールセットを備えた他のブラウザーでも、サブドメインとインディードメインの両方またはどちらかで同じ読み込み時間が表示されますか？異なるエンジンを使用する他のブラウザーで同じタイミングの問題が発生している場合（どちらを実行するかわからない）、参照していると、バグである可能性があります-Chromeのバグである可能性があると確信できますこれらの時間の値が他のブラウザで著しく異なる場合。
— マーティン

回答:

0

<link rel=prefetch>Webページに追加すると、ページ全体または一部のリソース（スクリプトやCSSファイルなど）をダウンロードするようにブラウザに指示され、ユーザーは将来必要になる可能性があります。これにより、First Contentful PaintやTime to Interactiveなどのメトリックが改善され、後続のナビゲーションが即座に読み込まれたように見えることがよくあります。

ここに画像の説明を入力してください

プリフェッチヒントは、すぐには必要とされないリソースのために追加のバイトを消費するため、この手法は慎重に適用する必要があります。ユーザーがそれらを必要とすると確信している場合にのみ、リソースをプリフェッチしてください。ユーザーの接続が遅い場合はプリフェッチしないことを検討してください。Network Information APIでそれを検出できます。

プリフェッチするリンクを決定する方法はいくつかあります。最も簡単な方法は、現在のページの最初のリンクまたは最初のいくつかのリンクをプリフェッチすることです。このポストhttps://web.dev/link-prefetch/で後で説明する、より洗練されたアプローチを使用するライブラリもあります。

— モハマドヤシール
ソース
私の場合、リンクのプリフェッチがスピードアップしない理由を説明するために探していました。それは、サブドメイン、サービスワーカーなどの理由によるものですか？私のスクリーンショットを見ると、プリフェッチにもかかわらず、ブラウザーがコンテンツを再ダウンロードしていることがわかります。
— マロス
0

推測しかできません。自信に満ちた答えは、おそらくあなただけが実験によって見つけることができます。変数が多すぎて説明できません。しかし、ここにいくつかのアイデアがあります：

  1. prefetchあるヒントブラウザ用。ブラウザは、任意の理由でそれを無視できます。それよりも優先順位が最も低くなっています。
  2. たとえば、念のため、ブラウザの設定を確認してください：（
    Menu/Settings/Advanced/Privacy and security/Preload pages for faster browsing and searching
    またはそのようなもの）。
  3. 万が一モバイルインターネットを使用している場合も問題になる可能性があります。
    https://www.technipages.com/google-chrome-prefetch
  4. ランディングページからにどれくらい速く移動しますexample.comか？
  5. サーバーのログをチェックして、prefetchリクエストを受信したかどうかを確認します。

  6. サーバーがprefetchリクエストに応答して奇妙なヘッダーを設定していないか確認してください。例えばCache-Control: no-cache。いや、私はあなたが持っていることがわかりcache-control: max-age=31536000サーバが同じ要求（も...に対して異なるヘッダを送信する場合、それは、本当に奇妙だろうので、ほぼ同じ少なくとも、あなたは少なくとも缶であり、彼らがしていることを言った、としませんでした、それがprefetch要求であることを示すいくつかのヘッダーである）が、奇妙なことが起こります。

  7. おそらくcrossorigin属性を追加してみてください。例えば

    <link rel="prefetch" href="https://example.com/app.css" as="style" crossorigin />

    ここhttps://www.w3.org/TR/resource-hints/この例を見つけることができます

    <link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

    あなたのケースにかなり関連していますが、残念ながら説明はありません。

  8. あなたの質問の元のバージョンでは、Service Workerについて言及していました...彼らが何かをダウンロードしたり、自分で手動でダウンロードしたりする場合も、問題である可能性があります。優先度が最も低いためprefetch

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ#What_if_I.27m_downloading_something_in_the_background.3F_Will_link_prefetching_compete_for_bandwidth.3F

    Mozillaを使用して何かをダウンロードしている場合、リンクのプリフェッチはバックグラウンドダウンロードが完了するまで遅延されます

    Chromeについても同様です。

  9. ランディングページをルートドメインに移動しようとしましたか？はい、prefetch期待どおりに機能する場合は、はい-サブドメインが問題の原因です。そして、GUIメッセージStatus Code: 200 (from prefetch cache)はおそらくグリッチです。つい最近prefetch、Chrome の動作にいくつかの変更がありました。そして、私は物事が解決したかどうかまだ知りません。基本的に、はい、prefetch同じ起源からしかできない可能性があります。

    https://docs.google.com/document/d/1bKGDIePAuF6YXmmrwM33LeLvtuCsla3vTspsxsNp-f8/edit

— x00
ソース
回答を読んだ後のランダムなメモ：ランディングページからexample.comへの移動が非常に遅いため、すべてのリソースを読み込むのに十分な時間を確保できます。上記のテストは、Chromeでサービスワーカーを無効にして行いました。crossorigin属性は他のもののためのものだと思います。私はそれを使ってみましたが運はありませんでした。最悪の場合、ランディングページをルートドメインに移動することで、あなたが提案するテストを行います。ここで答えが私を救ってくれることを願っていました。
— Maros
1
FFを試しましたか？上記のMDNリンクから：「Mozillaは別のホストからドキュメントをプリフェッチしますか？はい。リンクのプリフェッチに同一生成元の制限はありません。同じサーバーからのURLのみにプリフェッチを制限しても、ブラウザのセキュリティは向上しません。」この一節は古くなっているかもしれませんが、それでもまだです。Chromeでの動作が異なるかどうかを確認するとよいでしょう。
— x00
試しましたが、プリフェッチキャッシュよりも優先されていると思われるService Workerを無効にすることができませんでした。私はそれをもう一度試すことができます。
— Maros
@マロス、どういうわけかあなたはコードを所有していない、またはいくつかの技術的な問題がありましたか？
— x00
-1

サブドメインでドメインのリソースが必要な場合は、以下のコードを追加する必要があります

<link rel="preconnect" href="https://example.com">
— divyang4481
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.