前一阵子一直在忙碌一个小型公司网站,说实话这个网站并不大也没有什么特色,就是一般的企业门户网站,但是架设到虚拟主机上以后访问发现还是有很多需要优化的地方,主要参照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 755现在互联网上的网站多如牛毛,随便搜一个主题,都能出现一大推的网 ... -
图片轮播特效
2013-02-26 11:07 134有不少客户喜欢我们公 ... -
CSS3超级大转盘
2013-02-25 11:42 1205众所周知,现在各大 ... -
fixed应用
2013-02-08 12:00 1012今天在逛人人网时,发现人人网首页左侧的“应用动态”,随着我页 ... -
简单的图片切换
2013-02-04 14:27 952今天写了一个jquery图片切换效果。 实现效果的 ... -
无尽旋转木马
2013-02-01 12:37 1717今天在逛论坛时,发现很多新人在问用jquery如何编 ... -
CSS如何对文本内容进行换行
2011-11-11 11:55 821CSS换行用省略号代替 ... -
CSS参考手册v3.1.0 web前端开发参考手册系列发布
2011-10-14 00:59 954新增了动画CSS Animations Properties参 ...
相关推荐
网站前端的性能优化与测试是提升用户体验的关键环节,其中“内容过期”是一个重要的策略,旨在减少HTTP请求次数,提高页面加载速度。YSlow for Firebug是一个常用的开源工具,它根据Yahoo!的网站性能最佳实践提供...
《YSLOW 3.1.8与Firebug的黄金搭档:优化网页性能的利器》 YSLOW和Firebug,这两个工具在Web开发和优化领域中堪称经典组合,尤其对于Firefox浏览器用户来说,它们是提升网页性能不可或缺的工具。yslow-3.1.8-fx最新...
总结来说,yslow-3.1.0-fx是Firefox用户优化网页性能的利器,结合Firebug的使用,能够为开发者提供宝贵的性能提升指导。对于任何关心网站性能和用户体验的人来说,yslow都是不可或缺的工具。通过遵循yslow的建议,...
**正文** 《YSlow 2.0.0b6:Firefox浏览器优化利器》 YSlow是Yahoo!开发的一款网页性能优化工具,它...无论你是网页设计师还是开发者,都应该掌握YSlow这样的工具,以便在日常工作中持续优化网页性能,提升网站质量。
yslow作为一款强大的前端性能分析工具,为优化网站速度提供了科学的依据和实用的建议。通过深入理解并应用yslow的评估规则,开发者可以显著提升网页的加载速度,提高用户体验,同时降低服务器负载。对于任何致力于...
通过详细的等级视图、组件视图和统计信息视图,开发者可以清楚地了解到哪些方面需要优化,并根据YSlow提供的建议进行相应的调整。此外,YSlow还提供了灵活的规则集管理和多种实用工具,使得优化工作更加高效。对于...
通过分析网页的各项指标,Yslow能够给出具体的优化建议,从而提升网站的整体性能。 #### 二、Yslow工具介绍 Yslow是一款基于Firefox浏览器的扩展程序,它可以集成到Firebug中使用。它通过分析网页的各项性能指标来...
要使用YSlow,首先需要确保你已安装Firefox浏览器。接着,你需要安装Firebug插件,之后再安装YSlow。安装过程相对简单,只需前往Mozilla的官方网站下载并安装相应的插件即可。安装完成后,在Firefox的【工具】菜单中...
**yslow3_1_2** 是一个针对Web前端性能优化的浏览器插件,它为开发者和测试人员提供了一个方便的工具,以便于评估和改进网页加载速度。这个插件基于YSlow规则,由Yahoo!开发,旨在帮助用户遵循最佳实践来提升网页的...
### 大型网站性能优化实战从前端网络CDN到后端大促的全链路性能优化 #### 一、基于用户体验的性能优化要素 在现代互联网应用中,用户体验是衡量一个网站成功与否的重要标准之一。良好的用户体验不仅仅体现在美观的...
本资源包"firefox-firebug-yslow.zip"正是为这些开发者量身打造的利器集合,包括Firefox 35.0.1版本的安装包、经典的Firebug插件以及用于性能分析的YSlow插件。 首先,我们来详细了解一下Firefox 35.0.1。作为...
YSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。yslow3.18支持firefox30版本
在讨论网站优化时,需要准备相应的开发环境和工具,如 Google Chrome 或者 Firefox,并且安装 Yslow 这个扩展组件。同时,需要对 ASP.NET 的开发基本流程和核心技术有相当的了解。 减少请求数是一个很重要的原则。...
YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。 YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见
FireBug和YSlow是Web开发和优化领域中的两个重要工具,尤其对于前端开发者而言,它们是不可或缺的利器。本文将详细介绍这两个工具的功能、用途以及如何使用它们来提升网页性能。 **FireBug** FireBug是一款集成在...
Firebug和YSlow是Web开发和优化领域中的两个重要工具,它们在前端性能分析和调试方面发挥着关键作用。火狐浏览器的扩展Firebug是一款强大的HTML、CSS、JavaScript调试工具,而YSlow则是Yahoo!开发的一款性能分析插件...
网站性能工具Yslow
YSlow 是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。