head内のリンクタグ最適化について【パフォーマンス】

12/21のブログの内容にて。メモしておいたほうがいいかなと思ったので。

Loadingフェーズ最適化 - リソース事前読み込み

• DNSプリフェッチ
  <link rel="dns-prefetch" href="...com">
  ドメインの名前解決をバックグラウンドで処理。
• リソース事前読み込み
  <link rel="prefetch" href="" >
  次のページの画像等を「暇だったら取っといて」。という感じに
• プリレンダリング
  <link rel="prerender" href="...html" >
  次のページを裏で完成させておく。
  hrefのHTML内のいろんなリソースを読み込むので注意。
• 通信レイヤ最適化
  <link rel="preconnect" href="...com" >
  DNS解決、TCP接続、TLSハンドシェイクまでを先に完了させる。
  外部ドメインで効果大
• ファイル圧縮
  vercelは自動でBrotli(br),gzipで最適な方を自動選択する。
• CDN
  こちらもvercelは自動...おんぶに抱っこ。
  自分でやる場合選択肢はcloudflare

リダイレクト

HTTPリクエストの余計なやり取り。
特に違うドメインへのリダイレクトはKeep-Aliveも有効にならないため、必ず避ける。

URLのパスでディレクトリ名を指定した場合、
末尾 / を付けないとリダイレクトが発生することがある。

/about/index.html というページのリンクを貼るために

<a href="domain/about">

としてしまうと、/aboutをファイルと解釈してしまい、正しいURL/about/にリダイレクトする。

これだけでパフォーマンスが悪くなるので注意。