Avoid Multiple Page Redirects: Eliminate Redirect Chains

Redirects are invisible delays. Every hop in a redirect chain is another full round-trip where the user stares at a blank screen. Eliminate the middlemen.

Why Redirects Hurt Performance

User types: example.com
  → 301 to https://example.com        (200ms)
  → 301 to https://www.example.com    (200ms)
  → 302 to https://www.example.com/en (200ms)
  → 200 OK: page starts loading       (finally, after 600ms wasted)

Each redirect requires:

1. DNS lookup for the new domain (if different)
2. TCP connection
3. TLS negotiation (for HTTPS)
4. Server processing time
5. Response transfer

Common Redirect Patterns

Pattern	Example	Fix
HTTP → HTTPS	http:// → https://	HSTS header, update all links
Non-www → www	example.com → www.example.com	Pick one, stick with it
Trailing slash	/about → /about/	Configure server consistently
Old URLs	/old-page → /new-page	Update internal links
Short URLs	bit.ly/xyz → final URL	Use direct links on your site
Country redirect	/ → /en/	Use Accept-Language header instead

How to Fix

1. Find Your Redirect Chains

# Check redirect chain for a URL
curl -I -L https://example.com 2>&1 | grep -E "HTTP/|Location:"

# Example output:
# HTTP/2 301
# location: https://www.example.com/
# HTTP/2 302
# location: https://www.example.com/en/
# HTTP/2 200

2. Update Internal Links

The easiest fix — update all links to point to the final URL:

<!-- ❌ BAD — triggers redirect -->
<a href="http://example.com/about">About</a>

<!-- ✅ GOOD — points to final URL directly -->
<a href="https://www.example.com/about">About</a>

Audit your entire site:

# Find all internal links that might redirect
grep -r "http://example.com" src/ content/ --include="*.{tsx,jsx,html,md}"
grep -r "href=\"/" src/ --include="*.{tsx,jsx}" | head -20

3. Enforce HTTPS with HSTS

Instead of a 301 redirect from HTTP to HTTPS, tell browsers to always use HTTPS:

# Nginx — HSTS header
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

After HSTS is cached, browsers automatically upgrade http:// to https:// — no redirect needed.

4. Pick www or Non-www (Not Both)

Configure at the DNS/server level and redirect only once:

# Nginx — redirect non-www to www (single redirect)
server {
    listen 443 ssl;
    server_name example.com;
    return 301 https://www.example.com$request_uri;
}

5. Be Consistent with Trailing Slashes

// Next.js — next.config.js
module.exports = {
  trailingSlash: false, // or true — just be consistent
};

6. Collapse Redirect Chains

If you must redirect, go directly to the final destination:

# ❌ BAD — chain of redirects
# /old-page → /renamed-page → /final-page

# ✅ GOOD — single hop to final destination
location = /old-page {
    return 301 /final-page;
}
location = /renamed-page {
    return 301 /final-page;
}

7. Handle Language/Region Without Redirects

Instead of redirecting / to /en/, serve the right content directly:

// Next.js middleware — set locale without redirect
import { NextResponse } from "next/server";

export function middleware(request) {
  const locale = request.headers.get("accept-language")?.split(",")[0] || "en";
  // Rewrite (not redirect) to the locale version
  return NextResponse.rewrite(new URL(`/${locale}${request.nextUrl.pathname}`, request.url));
}

Measuring Redirect Impact

DevTools

1. Open Network tab
2. Load the page
3. Look for 301 or 302 status codes
4. Check the Timing for "Waiting (TTFB)" on redirect responses

Lighthouse

The "Avoid multiple page redirects" audit shows the redirect chain and estimated time added.

Quick Wins Checklist

• Run curl -I -L yoursite.com to check for redirect chains
• Update all internal links to use final URLs (https, correct domain)
• Enable HSTS to eliminate HTTP→HTTPS redirects
• Pick www or non-www and redirect the other (single hop)
• Be consistent with trailing slashes
• Collapse multi-step redirect chains to single hops
• Use rewrites instead of redirects for locale handling