`
wbj0110
  • 浏览: 1611046 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

网站性能分析工具 YSlow(转)

阅读更多

YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。

 

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前端工程师有义务杜绝这些不合理的产品逻辑破坏我们的页 面结果及页面加载速度,不能为了实现而实现。

项目主页:http://www.open-open.com/lib/view/home/1330174403562

分享到:
评论

相关推荐

    yslow前端性能测试工具

    yslow作为一款强大的前端性能分析工具,为优化网站速度提供了科学的依据和实用的建议。通过深入理解并应用yslow的评估规则,开发者可以显著提升网页的加载速度,提高用户体验,同时降低服务器负载。对于任何致力于...

    [优]Yslow网站前端性能测试工具安装与使用简介

    ### Yslow网站前端性能测试工具安装与使用...通过使用Yslow这样的工具,开发者可以有效地监测并改善网站性能,提高用户体验。掌握Yslow的安装与使用方法,对于任何希望提升网站性能的开发者来说都是非常有用的技能。

    web前端性能分析工具导引

    正如标题"Web前端性能分析工具导引"所暗示的,关注这一领域的核心在于优化用户对页面加载速度和响应时间的感知。根据Yahoo的高性能网页最佳实践,前端性能优化能够显著提升网站的性能,减少用户流失,提高销售转化率...

    使用YSlow工具提高网页的效率

    因此,YSlow是建立在Firebug之上的,专门用于评估网页性能的工具。遗憾的是,由于它依赖于Firebug,所以YSlow无法在Microsoft的Internet Explorer(IE)浏览器上使用,只支持Firefox。 要使用YSlow,首先需要确保你...

    Selenium IDE + YSlow +Showslow 实现页面性能评估自动化

    Showslow是一个开源的Web性能分析系统,可以收集并展示YSlow的评估结果。通过设置`extensions.firebug.yslow.beaconUrl`和`extensions.firebug.yslow.optinBeacon`,用户可以将数据发送到本地或远程的Showslow服务器...

    YSlow使用指南最新2

    YSlow是一款强大的网页性能分析工具,能够帮助开发者识别并解决网页加载速度慢的问题。通过详细的等级视图、组件视图和统计信息视图,开发者可以清楚地了解到哪些方面需要优化,并根据YSlow提供的建议进行相应的调整...

    firefox-firebug-yslow.zip

    开发的一款性能分析工具,它基于一系列前端性能最佳实践,能够评估网页加载速度,并提供改进建议。YSlow可以分析页面的各个组成部分,包括图片、脚本、样式表等,根据预设的规则给出评分,帮助开发者识别性能瓶颈,...

    yslow-3.1.0-fx

    《yslow-3.1.0-fx:优化网页性能的专业工具》...对于任何关心网站性能和用户体验的人来说,yslow都是不可或缺的工具。通过遵循yslow的建议,我们可以有效地减少页面加载时间,提高用户满意度,最终提升网站的整体质量。

    31 个用来测试网站各项性能的免费在线工具

    网站性能是决定用户体验和搜索引擎排名的重要因素。为了确保网站的质量,开发者和网站管理员需要定期进行各种测试。以下是一些关键的测试领域以及相应的免费在线工具: 1. **网站代码验证**: - **WDG ...

    yslow3_1_2

    总结来说,yslow3_1_2是一个强大的Web前端性能分析工具,它基于YSlow规则,提供了一整套评估和改进网页加载速度的方法,对于任何关注网站性能的开发者或测试人员来说,都是一个不可或缺的助手。通过使用这个工具,...

    YSlow 2.0.0b6

    **正文** 《YSlow 2.0.0b6:Firefox浏览器优化利器》 YSlow是Yahoo!开发的一款网页性能优化工具,它...无论你是网页设计师还是开发者,都应该掌握YSlow这样的工具,以便在日常工作中持续优化网页性能,提升网站质量。

    yslow3.1.2.zip

    YSLOW是雅虎公司推出的一款强大的前端性能分析工具,版本号为3.1.2。这款工具旨在帮助前端开发者和测试人员遵循最佳实践,提升网页加载速度和用户体验。YSLOW的核心理念是基于雅虎的前端性能最佳实践规则,这些规则...

    网站性能及客户体验分析.pptx

    本报告主要探讨了网站性能的意义、常用的外部性能分析工具、知名互联网网站的当前状态以及改进建议。 首先,网站性能的重要性不言而喻。一个快速响应的网站能够提升用户体验,增加用户停留时间,从而提高转化率。...

    网站性能及客户体验分析.ppt

    在优化网站性能方面,外部性能分析工具如基调网络提供了一种有效的方法。基调网络是中国最大的互联网用户体验监测服务商,它能监测不同时间、地区和运营商下用户访问网站的速度和可用性,并生成个性化报告,为决策者...

    大型网站性能优化实战从前端网络CDN到后端大促的全链路性能优化 带书签完整版

    网站性能分析是持续改进网站性能的基础。有效的工具可以帮助我们更好地理解性能瓶颈所在,并采取相应的优化措施。 **3.1 快速了解网站性能** - **3.1.1 使用YSlow进行性能分析**:YSlow是一款由Yahoo开发的Firefox...

    学习网站性能及客户体验分析.ppt

    网站性能和客户体验是互联网行业中至关...因此,持续进行网站性能分析、使用专业工具监测和优化,是每个网站运营者必须重视的工作内容。通过不断的迭代和改进,可以确保网站始终保持最佳状态,吸引并留住更多的用户。

Global site tag (gtag.js) - Google Analytics