网页前端优化-apache篇

以下配置内容放在 httpd.conf 配置文件最后即可,全局有效.

1.设置静态文件的有效期

ExpiresActive On

<FilesMatch “\.(gif|jpg|png|js|css)$”>
ExpiresDefault “access plus 10 years”
</FilesMatch>

参考:http://blog.haohtml.com/archives/3728

2.启用gzip压缩

DeflateBufferSize 8096
DeflateCompressionLevel 1
DeflateMemLevel 9
DeflateWindowSize 15

DeflateFilterNote Input instream
DeflateFilterNote Output outstream
DeflateFilterNote Ratio ratio
DeflateFilterNote ratio
LogFormat ‘”%r” %{outstream}n/%{instream}n (%{ratio}n%%)’ deflate
CustomLog logs/deflate.log deflate

<Location />
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/plain text/xml
</Location>

参考:http://blog.haohtml.com/archives/3327,注意上面的日志路径要正确

Continue reading

X-Cache 和 X-Cache-Lookup headers 的解释

X-Cache: 表示你的 http request 是由 proxy server 回的 .
MISS 表 proxy无资料,代理动作, HIT 表 proxy 直接回应

X-Pad: 這個是800 年前的 netscape  bug 的因素才用的

想象你在一个标准的透明代理80端口下,并且你正在访问一个运行了内部网络缓存(这样,又是一个代理)的站点。如果你查看HTTP headers查找某些信息,你能够找到像这样的2行,规定domain.tld 代表那个本地网站,proxy.local 代表你的内部的透明代理。 Continue reading

HTTP 1.1 中Transfer-Encoding chunked编码

大多数的站点相应用户请求时发送的HTTP Headers中包含Content-Length头.此头信息定义在HTTP1.0协议RFC 1945 10.4章节中.该信息是用来告知用户代理,通常意义上就是浏览器,服务端发送的文档内容长度.浏览器接受到此信息后,接收完Content-Length中定义的长度字节后开始解析页面.如果服务端有部分数据延迟发送,那么浏览器就会白屏.这样导致比较糟糕的用户体验.

解决方法在HTTP1.1协议.RFC2616中14.41章节中定义的Transfer-Encoding:chunked的头信息.chunked编码定义在3.6.1中.根据此定义浏览器不需要等到内容字节全部下载完成,只要接收到一个chunked块就可解析页面.并且可以下载html中定义的页面内容,包括js,css,image等.采用chunked编码有两种选择,一种是设定Server的IO buffer长度让Server自动flush buffer中的内容,另一种是手动调用IO中的flush函数。 Continue reading

cookie-free域名提高网页效率-优化网站性能(yslow)

YSlow给如何提高网页效率和优化网站性能提供了22条建议,其中有一条是关于域名的:Use cookie-free domains。

使用 cookie-free domains 有什么好处呢?当用户浏览器发送一个静态文件,如图片image、CSS样式表文件时会同时发送同一个域名(或二级域名)下的cookies,但是网站服 务器对发送过来的cookies完全不予理会,因此这些没用的cookies白白浪费了网站带宽,影响网站加载速度和网页性能表现。YSlow建议为了解 决这个问题,就可以通过使用 cookie-free domains 的方法来做优化,从而提高网页效率。

使用二级域名作为cookie-free domains

通俗地说,所谓的 cookie-free domains 就是在浏览器发送静态内容的请求时不会发送cookies 的域名。YSlow提示可以申请注册一个二级域名专门用来储存这些静态图片、JS、静态CSS文件。 Continue reading

网页优化-apache中文件有效期的设置-yslow

前面我用已经启用了网页压缩功能,见http://blog.haohtml.com/index.php/archives/3723,下面我们来对网页元素有效期进行设置。

首先,启用LoadModule expires_module modules/mod_expires.so,只要在httpd.conf中把前面的#号去掉就可以了。然后在httpd.conf最后添加以下几行

ExpiresActive On
<FilesMatch “\.(gif|jpg|png|js|css)$”>
ExpiresDefault “access plus 10 years”
</FilesMatch>

重启apache,可以用firefox浏览器中的yslow插件查看最终效果,此时”add expires haders”项应该为A。表示配置成功.

meta http-equiv=”Cache-Control” content=”max-age=0″

Cache-Control头域
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache- Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max- stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、 no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含 义如下

Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器 仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止 重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间(以秒为单 位)的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时 期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

HTTP头的Expires与Cache-control

Cache-control用于控制HTTP缓存(在HTTP/1.0中可能部分没实现,仅仅实现了 Pragma: no-cache)

数据包中的格式:

Cache-Control: cache-directive

cache-directive可以为以下:

request时用到:

| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"

Continue reading

创建方便 Google 处理的网址结构

内容来源:http://www.google.com/support/webmasters/bin/answer.py?answer=76329&hl=zh_CN

网站的网址结构应尽可能简单些。 请考虑 组织您的内容,让网址的构建合乎逻辑并易于理解 (尽可能采用易读字词而非长的 ID 数字) 。 例如,如果您要搜索有关航空 (aviation) 的信息,http://en.wikipedia.org/wiki/Aviation 一类的网址将会有助于您决定是否点击该链接。 http://www.example.com/index.php?id_sezione=360&sid=3a5ebc944f41daa6f849f730f1 一类的网址对用户的吸引力大大降低。

建议您在网址中使用标点符号。 网址 http://www.example.com/green-dress.html 比网址 http://www.example.com/greendress.html 对我们帮助大得多。 我们建议您在网址中使用连字符 (-) 而尽量避免使用下划线 (_)。

过于复杂的网址,特别是那些包含多个参数的网址,可能会给抓取工具带来麻烦,因为它们可能会产生大量不必要的网址,全都指向您网站上相同或相似的内容。 Googlebot 可能会因此而消耗大量不必要的带宽,也可能无法为您网站的所有内容编制完整索引。

此问题的常见原因

导致网址过多可能有多种原因, 其中包括:

  • 一组项目的累加过滤。很多网站对同一组项目或搜索结果提供不同的视图,这样一般可以让用户使用定义的标准对其 进行过滤(例如:显示海景酒店)。 当以累加模式组合过滤器时(例如:带健身中心的海景酒店),网站中网址(数据视图)的数量就会急剧增加。 因为 Googlebot 只需查看少量能用来访问各个酒店网页的列表即可,所以没有必要创建大量区别不大的酒店列表。 例如:
    • 特价酒店:
      http://www.example.com/hotel-search-results.jsp?Ne=292&N=461
    • 特价海景酒店:
      http://www.example.com/hotel-search-results.jsp?Ne=292&N=461+4294967240
    • 带健身中心的特价海景酒店:
      http://www.example.com/hotel-search-results.jsp?Ne=292&N=461+4294967240+4294967270
  • 动态生成文档。 由于计数器、时间戳或广告影响,这可能会产生少量变化。
  • 网址中有问题的参数。例如,会话 ID 可以产生大量的重复项目和更多的网址。
  • 排序参数。某些大型购物网站会提供多种方式来排序相同的项目,因此造成网址数量急剧增大。 例如:
    http://www.example.com/results?search_type=search_videos&search_query=tpb&search_sort=relevance&search_category=25
  • 网址中不相关的参数,例如推介参数。例如:
    http://www.example.com/search/noheaders?click=6EE2BF1AF6A3D705D5561B7C3564D9C2&clickPage=OPD+Product+Page&cat=79
    http://www.example.com/discuss/showthread.php?referrerid=249406&threadid=535913
    http://www.example.com/products/products.asp?N=200063&Ne=500955&ref=foo%2Cbar&Cn=Accessories
  • 日历问题。动态生成的日历可能会生成指向未来及过去日期的链接,而这些日期没有开始日期和结束日期。 例如:
    http://www.example.com/calendar.php?d=13&m=8&y=2011
    http://www.example.com/calendar/cgi?2008&month=jan
  • 损坏的相对链接。损坏的相对链接往往会造成死循环。 这个问题通常是由路径元素重复造成的。 例如:
    http://www.example.com/index.shtml/discuss/category/school/061121/html/interview/category/health/070223/html/category/business/070302/html/category/community/070413/html/FAQ.htm

解决此问题的方法

为避免网址结构发生潜在的问题,谨建议如下:

  • 建议您使用 robots.txt 文件阻止 Googlebot 访问有问题的网址。 通常情况下,建议您拦截动态网址,例如生成搜索结果的网址或产生死循环的网址(如日历)。 在 robots.txt 文件中使用正则表达式可以很容易地拦截数量较大的网址。
  • 尽可能避免在网址中使用会话 ID, 建议您使用 Cookie 代替。 请参阅我们的网站管理员指南了解更多信息。
  • 通过截掉不必要的参数尽量缩短网址。
  • 如果您的网站具有未设置期限的日历,请为指向自动创建的未来日历页的链接添加 nofollow 属性。
  • 检查网站是否有损坏的相对链接。

如何提高网页的效率(下篇)——Use YSlow to know why your web Slow

网站最重要的东西是什么?
——内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度!
内容再丰富的网站,如果慢到无法访问也是毫无意义的; SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭(页面效率和搜索蜘蛛之间的关系,需要进一步的确认,此为和上篇保持统一); UE设计的再人性化的网站,如果用户连看都看不到也是空谈。

所以网页的效率绝对是最值得关注的方面。虽然我们在 《如何提高网页的效率(上篇)——提高网页效率的14条准则》提 到了如何提高网页效率的14条准则,但是如何知道我们现在的网页的效率到底如何?到底处于怎样一个级别?又有哪些方面做的不够好,需要改进呢?也许,你会 说,问一下用户不就知道了吗?但是相比感性比例占据太大的用户感受而言,理性的工具和数据更具有说服力。本篇就将向你介绍一款评测网页效率的工具—— YSlow(why slow,这个名字起的太好了)。

yslow,yslow Logo
yslow

YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug 又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。虽然有点绕,但是最终说明的问题是:

  • 很遗憾,微软的IE系列浏览器不能使用YSlow。
  • YSlow只能使用在FireFox浏览器上。
  • 如果要想使用YSlow,那么你必须先安装FireFox。
  • 如果要想使用YSlow,那么你就要安装FireFox上的Firebug插件。

这看上去好像有点令人沮丧,但是事实上它并不像想象中的那么麻烦,只要按照下面的步骤你将能很快的使用YSlow:

  1. http://www.mozilla.net.cn/firefox/在新窗口打开此链接 下载最新版的FireFox,并安装它。当然如果你已经安装了FireFox可以跳过此步。
  2. https://addons.mozilla.org/en-US/firefox/addon/1843/在新窗口打开此链接 下载最新版的Firebug,并安装它。当然如果你已经安装了Firebug可以跳过此步。
  3. https://addons.mozilla.org/en-US/firefox/addon/5369/在新窗口打开此链接 下载最新版的YSlow,并安装它。当然如果你已经安装了YSlow可以跳过此步。
firefox,firebug,yslow
图2:在菜单中先打开Firebug插件

这时候打开FireFox,你将在【工具】菜单中看到【firebug】(如图2)。打开firebug,然后在firebug中点击YSlow菜单,便看进入YSlow的主界面(如图3)。

点击小图查看完整大图
图3:在菜单中先打开Firebug插件(点击小图查看完整大图)

点击【Performace】菜单

YSlow便开始分析此页的效率,并从13个最影响网页效率的方面给出评估(如图4)。

firefox,firebug,yslow
图4:YSlow给出的本页面效率评估

可以看出来,YSlow评估的依据就是我们在 《如何提高网页的效率(上篇)——提高网页效率的14条准则》中提到的前面13条。前面蓝色的字母表示这一条准则的得分。A最高。点击右面的三角形可以得到更多的信息和建议,有些信息里面还有“放大镜” 图标,点击也将展示更为详细的信息和建议。(如图5所示)

firefox,firebug,yslow
图5:YSlow可以给出每条准则的详细评估信息和建议

点击【Stats】菜单

这个视图会告诉你页面的总体统计信息。包括页面大小、css样式表大小、脚本文件大小、总体图片大小、flash文件大小和css中用到的图片文件大小。还会告诉你,哪些东西被缓存了,缓存了多少等等。

firefox,firebug,yslow
图6:【Stats】视图信息

点击【Components】菜单

这个视图是一个页面所有部件的信息列表。从中我们可以得知每个部件的各种详细信息。如:类型、URL、Expires数据、状态、大小、读取时间、ETag信息等等。通过对这个列表的分析,我们就可以知道到底是什么东西最耗费我们的资源,从而有针对性的进行优化。

firefox,firebug,yslow
图7:【Components】视图信息,点击“放大镜”图标我们可以知道更详细的信息(点击小图查看完整大图)

点击【Tools】菜单

【Tools】菜单包含4个子菜单,就是4个实用工具。【JSLine】工具会生成JSLine报表,报表是对本网页中JS脚本的分析报告,包含错 误和建议。【ALL JS】工具,将生成本页面所有脚本代码便于阅读和打印的报表页面。【ALL CSS】工具,将生成本页面 所有CSS样式表代码便于阅读和打印的报表页面。【Printable View】将【Performance】和【Stats】视图中的信息生成一份更适合阅读和打印的报表页面。

firefox,firebug,yslow
图8:【Tools】菜单,包含了4个子菜单

点击【Help】菜单

【Help】主要是些常用的帮助途径的入口。从这里你可以很方面的访问YSlow的官方网络和博客。如果你还对YSlow的使用有什么疑惑的话,那么在这里你将获得满意的解答。

firefox,firebug,yslow
图8:【Help】菜单是些常用的帮助入口

后记

“工欲善其事,必先厉其器!”好的工具的确能很大的提高我们的工作效率。但是“阿斗”就算手里拿着“方天画戟”,估计也没有几个人怕他。好的工具是一方面,但是更重要的还是提高我们自身的知识水平。就如同这款YSlow,如果没有 《如何提高网页的效率(上篇)——提高网页效率的14条准则》中的理论知识,工具提供的信息我们看到的可能只是表面,就算看懂了数据,我们也很难知道对应的手段和措施。壮汉拿厉斧,这样伐木才能又快又轻松。

关于本文的讨论

博客园【web标准设计小组】关于本文的讨论