×

Redirection occurs anytime your user attempts to load a page with a given URL, but is sent instead to a site that uses a slightly different address. There are many reasons why you might consider redirection:

  • The original site has moved, and you want to send the user to where the site is now located;
  • You want to track clicks and log pages that refer users to your site/sites to which you refer your users;
  • You want to reserve multiple domains;
  • You want to secure the information your are sending and receiving, so you switch your users over from using HTTP to HTTPs.

However, there may be cases where you have unnecessary redirection on your site:

In the best-case scenario, redirection triggers one additional HTTP request-response cycle, which delays page rendering. In the worst-case scenario, it may result in multiple, round-trip request-response cycles including, but not just limited to, DNS lookup, TCP handshake, and TLS negotiation.

Either way, redirection increases the amount of time it takes for your site to render, and you should minimize its use to optimize page performance. If, however, your site requires redirection, you should take care to implement this so that your users see as little delay as possible.

Impact of HTTP Redirection

As an example, we see that the preferred address to access the online edition of the New York Times is http://www.nytimes.com (we received an HTTP response code of 200 when requesting the site). Rigor’s waterfall chart shows that our request took 365 ms to complete.

redirects

However, suppose we attempt to load the same site using a slightly different URL:http://nytimes.com. Rigor’s waterfall chart indicates that this address has been permanently moved (given that we received an HTTP response code of 301).

Our request for the initial HTML required two steps. The first call was for the resource that we thought was located at http://nytimes.com. This step required 156 ms. We are then redirected tohttp://www.nytimes.com, which took 365 ms. Because of the redirection, our total HTML request, download, and render time took an additional 156 ms for a total of 521 ms. Additionally, notice how, on the waterfall chart, all of the site’s resources further down on the list are pushed to the right, indicating that the browser handled them at a point of time later than it otherwise would have.

redirects

Lastly, supposed we used the http://nytimes.com URL from a mobile device. We see, from rows one through four, three redirections that took a total of 266 ms.

redirects

Compare this to loading http://mobile.nytimes.com directly, which took a mere 29 ms. This is 11% of the time required when the multiple redirects are executed.

redirects

Reducing the Use of Redirection

Time spent on redirect is most noticeable on mobile devices, especially since they tend to use slower networks. As such, the following changes will impact mobile users the most, even though all users will benefit, regardless of device type.

Use Responsive Layouts

Once common use of redirection is to send mobile users from a site’s desktop-version to one optimized for users with smaller screens. In this case, the user has to wait through at least one additional HTTP request-response cycle to receive the appropriate HTML file. This results in additional rendering time, since nothing can happen until the HTML is received and parsed by the mobile browser.

To eliminate the need for redirection, consider using a flexible layout built around responsive page principles for your site that works for any device, regardless of size.

For example, the homepage of Wired appears as such to someone using a desktop or laptop:

redirects

Users on an iPhone-sized device, however, see the site as follows:

redirects

Notice, however, that the URLs for both sites are identical, indicating that no redirection has occurred.

Identify Redirects to Access Non-HTML Resources

HTML isn’t the only thing that’s required to load your page–if your site requires external files, such as images and CSS, ensure that your HTML calls these resources directly and that there aren’t any redirects occurring to download these files.

Check Your Use of Slashes

Conventionally, URLs with a trailing slash indicate a directory, while those without indicate a file:

        Directory:         http://example.com/foo/

        File:                 http://example.com/foo

Even so, many sites do not distinguish between the two (whereas search engines do see the sites as distinct entities), since users would find it confusing for such similar URLs to lead to different content. However, for the URLs to direct users to the same content, some type of redirection must occur. To identify which URL is redirecting to which, check to see which is returning an HTTP response code of 200, and which is return an HTTP response code of 30X.

Generally, you do not want to tamper with such redirection, but when configuring links on your webpage, you will want to know which site is the primary and which one causes a redirection. By linking directly to the site, you can reduce the use of redirection on your webpages.

Optimizing the Use of Redirection

When implementing site redirection, you can do so using one of two implementations:

  • HTTP redirects;
  • JavaScript redirects.

We will cover optimization strategies for both implementations.

Using HTTP Redirection

HTTP redirection is typically used to send users to device-specific sites, and this is done by setting the user-agent in the HTTP request headers. The response code for this redirection is either 301 (indicating the redirection is permanent, such as moving users from the address prefixed with “www” to the one that isn’t) or 302 (indicating the redirection is temporary), though you should generally use the latter if it is at all possible.

Optimize URLs

In addition to the “m dot” redirects (mentioned in the section above on using responsive layouts), you should identify any other uses of URL redirection on your pages. For example, one type of redirect sends users from the “www” version of the URL to the one without (that is,http://www.example.com redirects to http://example.com). This is similar to the type of redirect used if you’ve registered multiple domains, and you want to direct all of your traffic to your primary URL.

In all of these instances, you should identify which URL garners the most traffic and then configure an HTTP 301-type redirect for all of the lesser-used URLs to the most-trafficked. Implementing this requires access to your server’s .htaccess file. You can find more information about modifying this file within your server’s documentation.

Notes and Caveats

  • When setting up server-side redirection, be sure to keep the redirect URL consistent with the alternate URL specified in the page’s link rel=”alternate” tag or in the Sitemap.
  • Because HTTP redirection is handled server-side, it is typically faster than client-side redirection, especially if the browser can cache the new location of the requested file.

Using JavaScript Redirection

When HTTP redirection is difficult or impossible to do, you can use JavaScript redirection. There are many approaches to implement this, including sending users to the link indicated by therel=”alternate” tag or setting any of the properties associated with window.location.

Keep in mind, however, that all of these methods add time to your page loads. By adding the need for additional JavaScript resources to your page, you increase the latency caused by the need to first download the webpage, then the need to parse and execute the JavaScript before the browser can execute the redirect.

However, prior to implementing JavaScript redirection, carefully consider whether this is necessary. Google sometimes refers to such practices as sneaky redirects, and if your page engages in what search engines deem inappropriate, your page will be penalized in the results rankings. In addition, such redirections can be a frustrating occurrence for your users, especially if it is unexpected or leads to a page different from the one requested.

Suggested Blog Posts

The Perception Gap for Poor Web Performance

E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online.  However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...

Read More

Using Browser Trends to Maintain a Better Site

Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design for an...

Read More

Finding Causes of Intermittent Errors from Google Webmaster Tools

Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...

Read More

Optimization Options not Always Optimal

Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...

Read More