Performance Optimization Link: Redirection

The performance optimization series will start with this diagram for a full-link analysis, let's unfold it slowly～

Understanding Redirection#

Page redirection refers to when we access a page with link A, the browser automatically redirects link A to link B's page, initiating a new request to link B. This process is generally imperceptible to the user.
Correctly configuring redirection can pass the old website's SEO value to the new address and also ensure a smooth transition during website maintenance/upgrade without harming the user experience.

When is Redirection Needed?#

When a page has moved, i.e., the URL has changed, such as the domain, path, etc.
To ensure the availability of old links during page maintenance, upgrades, or deletions, redirecting to a new page or a friendly 404 page without harming user experience.
To standardize URLs, unifying various URL formats into a single URL for better SEO.

Types of Redirection#

HTTP redirection, including 302 temporary redirection, 301 permanent redirection, etc.;
HTML meta tag redirection, <meta http-equiv="refresh" content="3;url=https://alifeiliu.xlog.app/" />, redirecting to the specified URL after 3 seconds;
JS redirection, window.location = "https://alifeiliu.xlog.app/", location.href = "https://alifeiliu.xlog.app/";

Calculating Redirection Time#

Ah, finding a 301 URL is really hard. Open the console, then enter https://w3c.github.io/navigation-timing in the address bar:

Enter the following code in the console:

const pnt = window.performance.getEntries()[0] // Get PerformanceNavigationTiming Entry
console.log(pnt.redirectEnd - pnt.redirectStart) // Calculate redirection time

It printed a redirection time of 337.5ms:

This time is related to network speed. Because it has to wait for the 301, 302, and other redirection-related status codes in the Server Response, and then obtain the new URL from the Location parameter in the response header to proceed with the redirection, it requires at least one RTT. Therefore, users who are far from the server or have poor network conditions will experience longer redirection times.