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:
- Using device-specific versions of your site: a mobile user navigating tohttp://example.com might be redirected to http://m.example.com/home);
- Hyperlinking inconsistently on your site: instead of consistently using URLs with the “www” prefix (such as http://www.example.com) or URLs without the “”www” prefix (such as http://example.com), you mix and match the two, leading to unnecessary redirects
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.
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.
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.
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.
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:
Users on an iPhone-sized device, however, see the site as follows:
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:
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;
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.
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.
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
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
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
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