前一阵子一直在忙碌一个小型公司网站,说实话这个网站并不大也没有什么特色,就是一般的企业门户网站,但是架设到虚拟主机上以后访问发现还是有很多需要优化的地方,主要参照Yahoo!开发的YSlow来实现网站的优化,浏览器选择FireFox。
先贴上开始的YSlow分数,只有七十几分,评级为C,显然不能达到我的要求。查看YSlow的优化建议,发现几个分数比较低的选项,我们来分别罗列并且分析:
1. Make fewer HTTP requests
该意见是指“使用更少的HTTP请求”,众所周知,HTTP请求是客户端向浏览器端发起的,目的是告诉服务器端浏览器所需的文件,包括页面,图片,js文件,css文件等。但是如果请求太多自然会影响到浏览器的响应时间,从而带来不够友好的用户体验。
优化这个选项的方法可以有CSS Sprites整合图片(将多张图片组合在一张图片中,通过定位进行图片的截取)、合并CSS文件、合并JS文件。数据表明,4个25kb文件的传输速度绝对慢于1个100kb文件的传输速度的,所以尽量减少文件数量是优化的行之有效的方法。
2. Use a Content Delivery Network (CDN)
该意见是指“使用内容分发网络”,简而言之就是使用专门的域名来存储图片、js文件、css文件等静态数据。也可以启用智能解析,根据用户的网络来为用户提供传输服务,比如电信和网通用户分别使用各自的CDN。对于该项的优化暂时没有意见,只是点了插件后面显示的(Add as CDN)来自动优化。
3. Add Expires headers
该意见是指“添加过期标志”,目的是缓存重复利用的文件,在下次访问该页面的时候直接从缓存中读取相应文件,而不需要再次通过请求服务器获取,这样做会大大加快网页的加载速度。
步骤如下:
a) 开启mod_expires模块
在httpd.conf文件中找到#LoadModule expires_module modules/mod_expires.so,去除最
前面的#
b) 写入过期内容
在httpd.conf中写入
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 12 month"
ExpiresByType text/html "access plus 12 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 12 months"
ExpiresByType image/ico "access plus 12 months"
ExpiresByType image/jpeg "access plus 12 months"
ExpiresByType image/jpg "access plus 12 months"
ExpiresByType image/png "access plus 12 months"
ExpiresByType application/x-shockwave-flash "access plus 12 months"
ExpiresByType application/x-javascript "access plus 12 months"
ExpiresByType video/x-flv "access plus 12 months"
</IfModule>
每一行都应的都是各个元素的过期时间设定,access plus 12months表示该元素12个月后过期,也可以通过A+xxxx秒来表示时间,比如A3600就表示一个小时之后过期。除此之外,也可以遵循“永不过期优化原则”,将过期日期设得尽量长,可以通过一句话搞定:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 10 years"
</IfModule>
这是很多优化团队都推荐的方式,我也采取了这个方式,如果你觉得有自己定制的必要,可以通过修改不同的时间参数来设定属于你自己的过期设定。
4. Compress components with gzip
该意见是指“使用Gzip压缩组件”:
什么是Gzip?
Gzip是GNU zip的缩写,它是一个GNU自由软件的文件压缩程序。现今已经成为Internet上使用非常普遍的一种数据压缩格式,或者说一种文件格式。HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用Gzip压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%。开启Gzip后会在网页数据传输之前,先使用Gzip压缩后再传输给客户端,客户端接收之后由浏览器解压显示。这样就会减小通过网络传输的数据量,提高浏览的速度。
简而言之,就是压缩再传输。
如何开启Gzip?
a) 开启LoadModule headers_module modules/mod_headers.so 模块,方法同上面的expires模块
b) 开启LoadModule headers_module modules/mod_deflate.so 模块
c) 在httpd.conf中添加如下代码
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css image/gif image/jpeg image/png application/xjavascript
</IfModule>
//表示筛选这些文档元素在传输的时候进行gzip压缩
d) 完成
5. Configure entity tags (ETags)
ETags是指“实体标签”,是一种告诉浏览器缓存内容是否变化的机制,如果变化就要重新缓存,否则缓存内容不变。但是使用了CDN后会对其检测产生影响,我选择不深入研究ETags,而是禁用了它,禁用方法很简单,在httpd.conf中添加FileETag None
6. 另外的几个优化意见
除了上面罗列的优化意见外,还有几个比较容易出问题的,比如:
a) Put CSS at top
b) Put JavaScript at bottom
c) Avoid CSS expressions
d) Minify JavaScript and CSS等
具体优化建议就是:把css样式放在页面上方,防止先读取html页面再渲染的情况出现;将js脚本内容以及引入都写在页面下方</body>之前,在页面完整读取后再进行js的载入和编译执行;避免css 表达式的使用;还有就是通过工具来压缩js和css代码,具体的工具可以使用YUI Compressor,工具地址:http://refresh-sf.com/yui/
7. 关于服务器和虚拟主机的区别
上面所述的情况都是针对自己搭建的服务器而言的,如果你是搭建在虚拟主机上(大多数个人网站博客都是搭建在虚拟主机上的,因为自己要买个服务器确实也不是笔小数目)那么就要看这个虚拟主机提供商是否是apache服务器,并且是否开启相应模块,如果满足这两个要求的话,可以在你的网站根目录下建立.htaccess文件并且将上面需要写入httpd.conf的内容都写在这个文件中,就可以实现上面的优化功能了,当然,如果没有开启对应模块的话这些都是无法实现的。iis也会有自己的优化设置,具体可以咨询你的主机服务供应商。
8. 贴上最后优化完毕的分数:97分,A,还是很给力的哈。话说第一项我实在是懒得去改了,就这样吧。
——————————————————————
以上意见仅供参考,若转载请注明出处,谢谢。
发表评论
-
HTML中超出文本使用省略号替代的CSS编写方式
2013-04-02 15:03 34有一种在HTML结构中经常会使用到的效果:按照限定宽度 ... -
真正能够吸引用户再次进入你网站的原因分析
2013-03-05 10:39 716现在互联网上的网站多如牛毛,随便搜一个主题,都能出现一大推的网 ... -
图片轮播特效
2013-02-26 11:07 134有不少客户喜欢我们公 ... -
CSS3超级大转盘
2013-02-25 11:42 1166众所周知,现在各大 ... -
fixed应用
2013-02-08 12:00 955今天在逛人人网时,发现人人网首页左侧的“应用动态”,随着我页 ... -
简单的图片切换
2013-02-04 14:27 907今天写了一个jquery图片切换效果。 实现效果的 ... -
无尽旋转木马
2013-02-01 12:37 1673今天在逛论坛时,发现很多新人在问用jquery如何编 ... -
CSS如何对文本内容进行换行
2011-11-11 11:55 789CSS换行用省略号代替 ... -
CSS参考手册v3.1.0 web前端开发参考手册系列发布
2011-10-14 00:59 914新增了动画CSS Animations Properties参 ...
相关推荐
YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。 YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。YSLOW ...
YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。yslow3.18支持firefox30版本
YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。 YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见
YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug 又是一款基于FireFox的插件。...如果要想使用YSlow,那么你必须先安装FireFox。 如果要想使用YSlow,那么你就要安装FireFox上的Firebug插件。
网站性能工具Yslow
YSlow 是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
yslow for firefox v18
最新的firebug和yslow,web页面调试利器
yslow,用于检测网站性能,帮助开发人员进行性能调优的优秀工具
YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。我搜索一下”Yslow使用说明“,发现都是旧版本Yslow的使用介绍。于是翻译了一下yahoo官方关于新版Yslow的的使用帮助,希望给初次使用Yslow的朋友...
最近使用yslow+showslow做导购搜索页面性能评估测试,yslow是firefox一个插件,在firefox浏览网页时,会对网面性能进行评估(根据yahoo的14条规则,进行打分)。Showslow是收集yslow评测结果的web程序。 刚开始手动...
yahoo性能中心总结的高性能网站设计的14条规则,这个工具就是用来根据这些规则对你的网站进行测试评分的,下载后直接拖到firefox里就可以自动安装了,但是先要装另外一个插件firebug,在我上传的资源列表里可以找到
[优]Yslow网站前端性能测试工具安装与使用简介
yslow对前端的请求的响应时间,缓存,数据包大小,协议等进行评分,默认规则23条。
本文档主要介绍了Showslow和Yslow的部署、使用方法,为需要进行页面性能测试的同僚提供入门帮助,希望能对各位有所帮助。
YSlow.3.1.2.crx for Chrome : yahoo性能中心总结的高性能网站设计的14条规则,这个工具就是用来根据这些规则对你的网站进行测试评分的,下载后直接拖到chrome里就可以自动安装了
亲测可用firefox插件yslow-3.1.0-fx.xpi。需先安装firebug。
文件里面有yslow最新插件和firebug插件 两个一起配合才可以使用,提醒必须是低版本的火狐才可以使用比如Firefox Setup 37.0.1
基于yslow 源码打包的, 已经修改过 manifest 了。 The 'manifest_version' key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details. 在...
firebug+YSlow,Web开发调试工具