性能最適化シリーズはこの図を出発点に全リンク分析を行います。ゆっくり展開していきましょう～
リダイレクトを理解する#
ページリダイレクトとは、A リンクのページにアクセスすると、ブラウザが自動的にリンク A をリンク B のページにリダイレクトし、B リンクに新しいリクエストを送信することを指します。このプロセスはユーザーには一般的に無感知です。
正しくリダイレクトを設定することで、旧サイトのSEO価値を新しいアドレスのサイトに引き継ぎ、サイトのメンテナンス / アップグレード期間中にスムーズに移行し、ユーザー体験を損なうことがありません。
どのような場合にリダイレクトが必要か#
- ページが移動した場合、つまり URL が変更された場合、ドメイン、パスなど。
- ページのメンテナンス、アップグレード / 削除時に旧リンクの可用性を確保し、新しいページまたはフレンドリーな 404 ページにリダイレクトし、ユーザー体験を損なわない。
- URL を正規化する、つまり複数の URL の書き方を単一の URL に統一し、SEO に役立てる。
リダイレクトの種類#
- HTTP リダイレクト、302 一時リダイレクト、301 永久リダイレクトなど；
- HTML meta タグリダイレクト、
<meta http-equiv="refresh" content="3;url=https://alifeiliu.xlog.app/" />、3 秒後に指定された URL にリダイレクト； - JS リダイレクト、
window.location = "https://alifeiliu.xlog.app/"、location.href = "https://alifeiliu.xlog.app/"；
リダイレクトの時間計算#
ああ、301 の URL を見つけるのは本当に難しい。コンソールを開いて、アドレスバーにhttps://w3c.github.io/navigation-timingを入力します：
コンソールに以下のコードを入力します：
const pnt = window.performance.getEntries()[0] // PerformanceNavigationTimingエントリを取得
console.log(pnt.redirectEnd - pnt.redirectStart) // リダイレクト時間の計算
337.5msのリダイレクト時間が表示されました：
この時間はネットワーク速度に関連しています。サーバーの応答に含まれる 301、302 などのリダイレクト関連のステータスコードを待つ必要があり、応答ヘッダーの Location パラメータから新しい URL を取得してリダイレクトを行うためには、少なくとも 1 回の RTT が必要です。したがって、サーバーから遠い場所にいるユーザーやネットワーク状況が悪いユーザーは、リダイレクト時間が相応に悪化します。