Resource Hintsの、「dns-prefetch」と「preconnect」ですがどう使ってますか？
どちらも外部ドメインのリソースを何かしらいい感じに事前解決してくれそうな感じですし、PreconnectはDNS-Prefetchのモダンブラウザ版に見えなくもないという感じです。
おさらい
- DNS-Prefetch
→ DNS lookup - Preconnect
→ DNS lookup + TCP +TLS
という仕事をしてくれます。
「じゃあ、全部のドメインをPreconnectに書いちゃえばOK。」ってなりそうですが、Stack OverflowとかRedditのログをみてると、
Preconnectはブラウザに負担かけるから、事前にやたら接続しておくのは逆に負担。多くても5個くらいまでだよね。
みたいなことらしいので、単純に全部書けばいいということではなさそうです。
Preconnectの負荷は多い？？？
処理が多いのでそりゃ負担は多いだろ。
って話なので理解はしているんですが、一応自分でも試してみました。
結果としては、言われているようにPreconnectのほうが負担が高くページロードも遅いというのがわかりました。ちなみにこんな感じで試しました。
※環境は、macOS Edge(Version 86.0.622.38 (Official build) (64-bit))
CPUの影響は？
- ブラウザのTask Manager開いて該当ページのタブIDを探してPIDを調べる
- ActivityMonitorで、先程のPIDを探して目視でCPUやメモリの変化を確認
ブラウザでの影響は？
- ブラウザの挙動変化も確認するため、該当ページでDevToolsから下記のスクリプトで計測。
じゃあどう使う？
- リソースの外部ドメインをなくす。もしくは減らす。
- Preconnectは、多くても5個程度にしておく
（リクエストするリソースは動的なもので、現在のページで確実に使用するものに限る） - 静的なファイルでキャッシュできそうなリソースをリクエストする場合は、DNS-Prefetchを使う
という感じがいいんじゃないでしょうか。
そもそもリソースのドメインをまとめることを優先して解決していくのがシンプルで良さそうです。
ちなみに、「どちらも併記しておく」といった記事を見かけましたがこれは絶対にやめてください。n回リクエストしますので負荷です。
あれ？前回の内容とほぼ同じ内容の記事になってしまった…
Web高速化の情報など知りたいです。記事についてもこちらからお問い合わせください。
