Remove WWW & HTTPS Redirect Chain With Nginx / Cloudflare

Redirect chains are one of the easily overlooked components in site performance. Redirect chains can be harmful to your website SEO and the site performance.

Websites commonly have 4 common variations in URL:

http://example.com
https://example.com
https://example.com
https://www.example.com

Search engines like Google see them as different sites, and the standard practice is to use only one of them and have the rest of it redirect to the one you chose to use.

The ideal setup is to ensure every other variation only has a single redirection to your canonical URL. If you have everything setup correctly, it should look like this:

How Redirect Chain Slow Down Sites

So what are redirect chains? Last week we got a new client who told us that whenever their visitors type their website directly in the browser, they experience almost a second of blank screen before it starts showing content, and this is what we found:

When people type your brandname.com into their browser address bar without typing the https or the www, the browser actually goes to the http non-www first, which our client’s visitors are welcomed by this redirect chain.

And this is where they experience the “blank” page, even when they have Cloudflare setup because the redirect is happening at our client’s previous origin server and ended up taking more than 1 second because they were using a slow shared hosting server at that time.

In the next section, we’ll show you how to prevent this with Nginx and Cloudflare.

Configuring Nginx to Remove Redirect Chain

First, we should look at the part of the Nginx configuration of your site block listening to port 80, which is the port for all HTTP traffic. (Depends on your setup, the config file are usually located in /etc/nginx/sites-available)

server {
        listen 80;
        listen [::]:80;
        server_name example.com www.example.com;
        return 301 https://www.example.com$request_uri;
}

The important part is the line with return 301 that directly sends traffic to your canonical version. In the above example, it means our canonical URL is https://www.example.com (If you use non-www version, just remove the www in the above config)

Next, we also add another server block for the HTTPS variation we want to redirect:

server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /srv/www/example.com/keys/ssl.crt;
    ssl_certificate_key /srv/www/example.com/keys/www.example.com.key;
    return 301 https://www.example.com$request_uri;
}

This block redirects traffic from https://example.com to https://www.example.com, but if you use the non-www version, just change the server_name and return 301 lines.

If you are using WordPress, you will notice you probably don’t need this block. That is because WordPress will do the redirection for you. If you check the developer console of the request, you will find x-redirect-by: WordPress

Using Cloudflare for Faster Redirect

Now that our origin server actually knows where to redirect, but our visitors request still has to reach our origin server to get the redirect instruction for their browser, then request again to the canonical URL.

Even if your website is fully cached on Cloudflare, that redirection request still has to proxy through the Cloudflare server to your origin server, so why not save the hassle and just let the redirection happen on Cloudflare’s edge server that is closest to your visitors?

There are 2 way we can set up the redirection at Cloudflare:

• Using one page rule and enable Always Use HTTPS
• Using the new bulk redirect feature

We have tested both, and their performance is similar. We recommend using the page rule if you still have a limit for it, but if not, use the bulk redirect feature.

For the first option, let’s create a page rule under your domain to redirect non-www to www, or vice versa, as shown in the image below.

Then enable Always Use HTTPS at SSL/TLS > Edge Certificates

Now, if you look at your network tab when trying the non-www version, you can see this redirection only take less than 100ms, and you shouldn’t see “x-redirect-by: WordPress” because the redirection is now happening on Cloudflare edge server instead of your origin server.

If you choose not to use the page rule, you can use the bulk redirect feature, which we will skip in this post because that is pretty much self-explanatory. Just add a redirect rule of non-www to www or vice versa, enable Always use HTTPS, and you’re done!

We hope this post help you to improve your website performance and solve your redirect chain issue. If you have any questions feel free to comment below.

If this is too hard for you and you just want a fast-performing website, you can look at our optimized WordPress hosting services, where we implement all the best practices and help you optimize your existing WordPress website while you focus on what matters most to your business.