YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Make landing page redirects cacheable

前端性能优化:Make landing page redirects cacheable

今天介绍 PageSpeed 的前端性能优化规则是:Make landing page redirects cacheable(使目标网页重定向可缓存)。

Make landing page redirects cacheable 规则简介

Make landing page redirects cacheable(使目标网页重定向可缓存)可以一在页面确实需要重定向的时候缓存重定向的URL地址,当用户再次访问时直接访问重定向的URL地址,优化前端性能。关于重定向问题的规则我们在《Avoid Redirects》规则中介绍过,重定向的性能问题在于初次访问时浏览器并不能直接就获取访问页面所需的资源,而只是得到一个302(或者301)状态码,然后重新定位到最终的目标URL地址,这时浏览器才会下载资源,才可以开始解析渲染页面。首先,重定向需要消耗时间。其次,重定向是发出2次HTTP请求的,而HTTP请求也是有消耗的。而今天介绍的缓存重定向就可以避免2次请求,也可以避免重定向的消耗,所以可以达到优化前端性能的效果。

PageSpeed 的文档里举例说明了确实需要重定向的一种情况:

Many pages, especially mobile pages, redirect users to a different URL, for instance from www.example.com to m.example.com. Making this redirect cacheable by the user’s browser can speed up page load times for repeat visitors to a site.

PageSpeed 所提到的用移动设备访问网站出现的重定向,定位到另外一个域名访问针对移动设备的网页就是我们确实需要重定向的情况。其实,还有一种常见的情况,就是当网站改版使用新的域名时,很典型的例子就是我们访问 www.360buy.com 这个京东网的旧域名,这时就会发生重定向到新的 www.jd.com 域名下。像这样的情况,我们就应该使用 Make landing page redirects cacheable(使目标网页重定向可缓存)这个策略,来优化前端性能。

上述情况是不得已而为之的,因为使用了不同的域名存放移动版或者新版本站点,但毕竟重定向都会带来性能损失,用户第一访问的时候会有能能损失。所以如果移动版本的站点和桌面版的网站在同一个服务器上,我们就应该避免使用重定向,让移动设备和桌面设备用户通过相同的URL(域名)来访问这个站点。而采用在服务器端分析用户客户端系统的方法,针对不用的浏览设备,给出不同版本的页面。PageSpeed 的原文是这么说的:

While the best practice with redirects is to remove them wherever possible, it can sometimes be difficult to eliminate landing page redirects, especially redirects to mobile-specific sites. For instance, the mobile version of a site may be served from a different web server, which can require redirecting to a different hostname. In these cases, it’s important to make the redirect to the mobile-specific site cacheable, to reduce page load times for repeat visitors. If the mobile version of your web site is served from the same web server as the desktop version of your site, you should instead eliminate mobile-specific redirects and serve from the same URL as your desktop page.

Make landing page redirects cacheable

既然有时候我们不得不使用重定向,那么现在我们就要针对这种情况使目标网页重定向可缓存。我们需要添加 Vary: User-Agent头,还需要添加 Cache-Control: private 头和 Expires 头。移动特定的重定向必须是私有(private)高速缓存,为了防止代理服务器将移动服务重定向到非移动用户。并且建议重定向的缓存时间为1天。Vary: User-Agent 和 Cache-Control: private作用一样,是为了防止将移动服务代理到了非移动的用户。Expires 则是我们之前就介绍过的,为了兼容不支持HTTP1.1的浏览器而做的缓存设置。

Mobile-specific redirects must be privately cacheable, in order to prevent proxies from serving the mobile redirect to non-mobile users. We recommend using a 302 redirect with a cache lifetime of one day. The redirect should include a Vary: User-Agent header as well as a Cache-Control: private header. These headers prevent proxies from serving mobile-specific redirects to non-mobile users. You may also want to include an Expires header in the past, to prevent old HTTP/1.0 proxies from caching these redirects and serving them to non-mobile users.

针对移动设配重定向的处理的具体做法大家可以看看 Google Developer 里的这篇文章《Redirects and User-Agent Detection》。而设置头信息我们前面已经介绍了,我这里就不再重复了。只是设置重定向缓存的位置在第一个域名(服务器)设置,例如从 www.360buy.com 转到 m.360buy.com,我们在 www.360buy.com 域名下使用 User-Agent Detection 技术判定为移动设备后,然后重定向并缓存重定向。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Make landing page redirects cacheable

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)