您的位置: 首页 > 技术文档 > 网页制作 > 用YSlow分析我们页面
CSS 浏览器的等宽空格 回到列表 跨浏览器实现float:center
 用YSlow分析我们页面

作者:aliued.cn 时间: 2008-08-26 文档类型:转载 来自:aliued.cn

第 1 页 用YSlow分析我们页面 [1]
第 2 页 用YSlow分析我们页面 [2]

YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。

仔细研究了下YSlow跌评分规则。

主要有12条:

1. Make fewer HTTP requests 尽可能少的http请求。。我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可怕。思考了下,为什么把这个三种请求过多列为对页面加载的重要不利因素呢,而过多的IMG请求并没有列为不利因素呢?

发现原来这些请求都是可以避免的。

15个JS和3个CSS完全可以通过特殊的办法进行合并(这个技术部已经帮我们解决了,实在是太感谢了,嘿嘿。),这样合并以后,一般情况下页面上只会出现一个JS和一个CSS(对JS的封装得有一定的要求)。

但是47个CSS background images请求改怎么解决呢?为什么页面上的纯IMG请求时合理的,而CSS background images请求过多就是不利因素了呢。这个我想了很久,总算明白,原来是这样的:

一般页面上的ICON,栏目背景啊,图片按钮啊,我们都会用图片CSS背景来实现,而一般这个图片CSS背景用到的图片都是比较小的,所以完全可以把这些图片合并成一个相对比较大的图片,这样页面上只会出现一个CSS background images请求,最多也就2-3个。后来仔细看了下雅虎美国的页面,他们的确也是这样做的,虽然这样做需要花一定的时间来有规则的合并这些ICON,栏目背景,图片按钮,以方便CSS调用,但是这样做绝对是合算的,而且是有必要的,YSlow也是极力推荐的。

2.Use a CDN 这项我们的评分是F级,最低。说实在的,我刚开始什么是CDN都不知道。后来查了GOODLE才知道。CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络”边缘”,使用户可以就近取得所需的内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因所造成的用户访问网站响应速度慢的问题。

看来上述的解释后,基本上明白了CDN是怎么回事,后来咨询了下中文站点SA,得知我们网站目前的确还没有做CDN的优化,但是据说我们有更加先进的技术来解决类似的问题(具体什么技术那就保密了),但是毕竟CDN也是个相当不错的技术,所以在我们先进技术的基础上在做CDN优化,肯定比现在更好,嘿嘿。据说SA明年会做几个点的CND。

3. Add an Expires header置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中.

其实我们网站也做了这个优化,至少图片在这个上做过优化,但是没有做完全。我们的CSS和JS都还没有做过优化,倒是外部引入的一个广告JS做了,呵呵。其实设置过期的HTTP Header 更应该做在脚本, 样式表, Flash上.不过据说这个SA也是没有做的,但是有一定的风险,因为JS和CSS是有一定的逻辑,如果服务器端和客户端都存在缓存的话,万一出了什么问题,对我们以后查找问题的所在和增加难度,不过我想两者中是可以权衡和并存的。

4. Gzip components 对我们的页面内容进行Gzip格式的压缩,Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%,就是说服务器端100K的页面可以压缩到25K左右的Gzip格式的数据发给客户端,客户端收到Gzip格式的数据后自动解压缩后显示页面。

这点我们网站基本上是100%做到了,但是我们这项的评分并没有达到想象中的A级,原因是出在我们的外部链接,比如我们首页,有外部的广告投放JS,这个JS说拥有的网站是没有做过GZIP优化,连累了我们网站,所以我们也只有B,或者C级。

5. Put CSS at the top 把CSS外部链接放到页面的顶部。

其实这个原则我们一般都遵守的,如果把CSS外部链接作为逻辑的一部分出现在页面头部以下,我个人觉得这个本身就是个错误。还好,我们的页面基本上都做到了,可是有些页面比如LIST页面,还是出现了和逻辑挂钩的CSS链接,原因是为了解决一些本来就不合理的产品逻辑。所以,我们WEB前端工程师有义务杜绝这些不合理的产品逻辑破坏我们的页面结果及页面加载速度,不能为了实现而实现。

出处:aliued.cn
责任编辑:bluehearts

上一页 下一页 用YSlow分析我们页面 [2]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:1/21个记录/页 转到 页 共2个记录 分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2