- 浏览: 305841 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
完善自我:
支持一下!
揭秘IT人才特点:中美印日四国程序员比较 -
悲剧了:
好文,看玩thinking in java的提到的异常处理,看 ...
高效的Java异常处理框架(转) -
yin_bp:
开源框架bbossgroups页支持组件异步方法调用哦,详情请 ...
Spring 3中异步方法调用 -
flyjava:
sun的悲哀
Apache怒了,威胁说要离开JCP
Yahoo!曾经针对网站速度体验提出了34条宝贵的准则《Best Practices for Speeding Up Your Web Site 》,而Yslow 正是按照这些准则,评测一个网站在速度体验上的优化程度的Firefox插件,将34条精简为更加直观的13条,并针对每一条给出从F~A的评分以及最终的总分。
当然从评测得到的只能是一个分数以及建议,如何改进还是要靠自己,这里要谈的就是实实在在的如何针对每一条进行优化:
1. Make fewer HTTP requests / 减少Http请求数
一个网页不可避免的要引入大量的外部文件:Javascript、css、背景图片……由于Http协议的无状态性,用户的每一次访问,都会重新向服务器请求所有文件,而大量Http请求的累加,正是影响网站速度的最主要原因。
所以这里的解决方法只有一个:合并。最理想的情况莫过于一个网页只包含一个css,一个js,一张背景图。
合并Js和Css文件很好理解,背景图片要怎么合并?这里采用的主要方法是CSS Sprites,简单说就是把所有的图片拼接成一张大图,在不同的Css里指定背景图坐标来显示不同图片。具体可以参考Dave Shea的Image Slicing’s Kiss of Death 一文,还有网站提供了在线的CSS Sprites服务 ,只需要上传小图片,就可以获得拼接后的大图以及相应坐标。
不过在当前越来越多动辄包含10余个文件的开发框架面前,减少Http请求数也变得越来越难。一直都认为所谓框架,给出的应该是一整套完善的开发思 想,从服务器配置到数据库设计甚至是到UI体验乃至SEO,但现在很多Framework总是各自为战,后台与前端脱节,只在自己的一片领域里提供一定程 度上的方便,没有考虑到最终产品的统合,甚至连基本的代码侵入性问题没有处理好(这里点名批评dojo,恨不得在所有的html标签上印上dojo的章 子),不能不说是一种遗憾。
所以如果网站中采用框架的话,在框架的选择面前,建议多采用轻量级,侵入性低的框架,也是为了日后产品的优化维护着想。
2. Use a CDN / 使用CDN
CDN(Content delivery network)内容分发网络,能够智能根据网络节点情况选择服务节点,大型网站部署时尤为重要。不过这属于硬件级别的解决方案,我们没有条件配置CDN的时候,可以自行设置忽略这一项评测。
在Firefox地址栏键入about:config,然后新建一个字符串,名称为 extensions.firebug.yslow.cdnHostnames,值为所要评测网站的域名,多个设置用逗号分隔。例如我的设置就是 allo.ave7.net,localhost
3. Add an Expires header / 为文件头指定Expires
Expires是浏览器Cache机制的一部分,浏览器的缓存取决于Header中的四个值: Cache-Control, Expires, Last-Modified, ETag。这个项目的考评主要针对Cache-Control和Expires。
具体的Cache原理不是本文所涉及的,有兴趣的同学可以看看Caching Tutorial 一文。为了优化这个选项,我们所要做的是对站内所有的文件有针对性的设置Cache-Control和Expires,这里基于Apache主机举例:
首先开启mod_header 模块,在httpd.conf中取消
LoadModule headers_module modules/mod_headers.so
一行的注释。然后对于图片,文件等不会经常更新的文件设置一个比较长的过期时间
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" </FilesMatch>
对于Cache-Control可以设置的更加细致一些,这里我对图片,文件设置了1周,对XML,TXT设置了5小时,对html和php文件只设置了1小时。
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch> <FilesMatch "\.(xml|txt)$"> Header set Cache-Control "max-age=18000, public, must-revalidate" </FilesMatch> <FilesMatch "\.(html|htm|php)$"> Header set Cache-Control "max-age=3600, must-revalidate" </FilesMatch>
另外Expires也可以通过开启mod_expires 来实现,这里不再举例。
4. Gzip components / 启用Gzip压缩
HTTP/1.1支持接收服务器端经过Gzip 压缩的数据,在Apache2中,可以开启mod_deflate 实现。
同样去掉注释
LoadModule deflate_module modules/mod_deflate.so
然后对所有文本类文件添加Gzip处理
DeflateCompressionLevel 3 <FilesMatch "\.(php|htm|html|js|css)$"> SetOutputFilter DEFLATE </FilesMatch>
5. Put CSS at the top / 将Css文件放在头部
很好理解的一条,主要是为了避免最后加载Css引起的浏览器白屏,改善用户体验。
6. Put JS at the bottom / 将Js文件放在底部
同样很容易理解,为了让DOM先行加载。
7. Avoid CSS expressions / 避免CSS expressions
CSS expressions可以轻易的引起浏览器假死,也不在W3C规范内,不只是避免,最好完全不要用。
8. Make JS and CSS external / 将Js和Css文件独立
将Js和Css文件单独做成外部文件加载,一则可以功能复用,二则可以生成缓存,当然这一条和第一条要互相参照找出最好的解决方案才是。
9. Reduce DNS lookups / 减少DNS查询
外部文件分散于多个服务器,连接每台服务器都会做一次DNS查询,这一条是针对多服务器的部署。
10. Minify JS / 压缩Js文件
压缩Js文件,Yahoo!官方推荐的工具是JSMin 和YUI Compressor 。
11. Avoid redirects / 避免重定向
每一次的重定向都会重新发送Header请求。所以在Apache下,无比强大的mod_rewrite 是必须要学的。
12. Remove duplicate scripts / 移除重复的脚本
开发中没有规划好,会出现页面中重复引用一个文件的情况,IE中即便是重复引用也会重新向服务器发送一次请求。
13. Configure ETags / 配置ETags
在第三条中已经对浏览器缓存机制中的Cache-Control和Expires进行了配置,这一条评测的是另外两个:Last-Modified和ETag
简单的说,即使设置了文件的期限,浏览器在访问资源时往往会因为Last-Modified和ETag而重新下载整个资源,所以简单的做法是关闭Last-Modified和ETag
在Apache中做如下配置
FileETag None <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$"> Header unset Last-Modified </FilesMatch>
最后看看优化后的成果
原文:http://avnpc.com/posts/view/speed_up_website_with_yslow
发表评论
-
Web编程是函数式编程
2010-11-30 13:44 1031任何一位在两个领域里 ... -
如何开发Web应用程序
2010-11-30 13:41 1068这是一个经常被问到的 ... -
设计Web应用程序时要注意可伸缩性
2010-11-26 09:19 882Max Indelicato是一位软件 ... -
Web 2.0应用客户端性能问题十大根源
2010-11-25 20:19 995Web 2.0应用的推广为用户带来了全新的体验,同时也让开 ... -
HTML压缩(JSP的GZIP实现)
2010-11-24 22:31 4903HTTP 压缩可以大大提高浏览网站的速度,它的 ... -
浏览器加载和渲染html的顺序
2010-11-22 09:45 25111.浏览器加载和渲染html的顺序 1、IE下载的顺序是从上到 ... -
在服务端合并和压缩JavaScript和CSS文件
2010-11-22 09:16 1094Web性能优化最佳实践中最重要的一条是减少HTTP请求 ... -
用 YUI Compressor 压缩和混淆 JS 和 CSS
2010-11-22 09:05 2304一、简介: 目前开发Web应用Javas ... -
如何缓存DWR生成的JS文件
2010-11-18 17:37 1936DWR provides a convenient mec ... -
HTTP状态一览
2010-11-17 22:43 743在网站建设的实际应用中,容易出现很多小小的失误,就像m ... -
两款HTTP流量分析工具的比较:HTTP Watch,Fiddler
2010-11-17 17:26 0做Web开发或者Web分析经常需要查看Http通讯的过程, ... -
了解CSS的查找匹配原理,让CSS更简洁、高效
2010-11-17 16:49 0用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知 ... -
高性能WEB开发 - flush让页面分块,逐步呈现
2010-11-17 16:47 0在处理比较耗时的请求的时候,我们总希望先让用户先 ... -
WEB高性能开发 - 疯狂的HTML压缩
2010-11-17 16:46 0前言: ... -
该如何加载google-analytics(或其他第三方)的JS
2010-11-17 16:44 0很多网站为了获取用户访问网站的统计信息,使用了go ... -
高性能WEB开发 - 页面呈现、重绘、回流。
2010-11-17 15:57 0页面呈现流程 在讨论页面重绘、回流之前。需要 ... -
高性能WEB开发 - JS、CSS的合并、压缩、缓存管理
2010-11-17 15:54 0本篇文章主要讨论下目前JS,CSS 合并、压缩、缓存 ... -
高性能WEB开发- 减少请求,响应的数据量
2010-11-17 15:49 0上一篇中我们说 ... -
高性能WEB开发 - 为什么要减少请求数,如何减少请求数!
2010-11-17 15:42 0http请求头的数据量 我们先分析下 ... -
高性能web开发 - 如何加载JS,JS应该放在什么位置?
2010-11-17 15:39 0外部JS的阻塞下载 所有浏览器在下载JS的时候, ...
相关推荐
YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。 YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。YSLOW ...
[优]Yslow网站前端性能测试工具安装与使用简介
YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。yslow3.18支持firefox30版本
网站性能工具Yslow
yslow for firefox v18
YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug 又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。虽然有点绕,但是最终说明的问题是: 很遗憾,微软的IE系列浏览器不能使用...
YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。 YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见
yslow,用于检测网站性能,帮助开发人员进行性能调优的优秀工具
YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。我搜索一下”Yslow使用说明“,发现都是旧版本Yslow的使用介绍。于是翻译了一下yahoo官方关于新版Yslow的的使用帮助,希望给初次使用Yslow的朋友...
YSlow 是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
本文档主要介绍了Showslow和Yslow的部署、使用方法,为需要进行页面性能测试的同僚提供入门帮助,希望能对各位有所帮助。
YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。
最近使用yslow+showslow做导购搜索页面性能评估测试,yslow是firefox一个插件,在firefox浏览网页时,会对网面性能进行评估(根据yahoo的14条规则,进行打分)。Showslow是收集yslow评测结果的web程序。 刚开始手动...
yahoo性能中心总结的高性能网站设计的14条规则,这个工具就是用来根据这些规则对你的网站进行测试评分的,下载后直接拖到firefox里就可以自动安装了,但是先要装另外一个插件firebug,在我上传的资源列表里可以找到
yslow对前端的请求的响应时间,缓存,数据包大小,协议等进行评分,默认规则23条。
亲测可用firefox插件yslow-3.1.0-fx.xpi。需先安装firebug。
最新的firebug和yslow,web页面调试利器
YSlow.3.1.2.crx for Chrome : yahoo性能中心总结的高性能网站设计的14条规则,这个工具就是用来根据这些规则对你的网站进行测试评分的,下载后直接拖到chrome里就可以自动安装了
文件里面有yslow最新插件和firebug插件 两个一起配合才可以使用,提醒必须是低版本的火狐才可以使用比如Firefox Setup 37.0.1
firebug+YSlow,Web开发调试工具