YSlow的使用,以及Yahoo军规的几条定律

转载 2016年05月31日 11:25:29

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。

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

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

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

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

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

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

相关文章推荐

YSLOW法则中,为什么yahoo推荐用GET代替POST?

原文:http://www.cnxct.com/use-get-for-ajax-requests-why/背景:上上周五,公司前端工程师培训,提到前端优化的一些技巧,当然不能少了yahoo yslo...

浅谈yahoo前端性能团队总结的35条黄金定律

一、网页内容 1、减少http请求次数 80%的响应时间花在下载网页内容(图片,CSS样式表,JS脚本,flash等),因此减少http请求次数是缩短响应时间的关键! 将多个JS脚本文件捆绑成一个文件...

前端性能优化----yahoo前端性能团队总结的35条黄金定律

除了自己总结:1. 减少http请求,2.压缩并优化js/css/image 3.尽量静态页面,从简原则 4.代码规范(详见:个人知识体系思维导图) 从yahoo 新学到的: ...

YSlow使用指南最新2

  • 2012年07月27日 15:06
  • 856KB
  • 下载

性能工具Yslow的使用技巧

网站性能工具Yslow的使用方法 Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开速度,这款插件还帮...

Firebug及YSlow简介与使用图文详解

转载自:http://www.huluboke.com/firebug-yslow/ Firebug本是Firefox浏览器下一个出色的网页设计插件,随着浏览器的发展,Firebug...
  • yuxq100
  • yuxq100
  • 2012年08月06日 23:54
  • 668

yslow:使用ajax缓存

====================================================== 注:本文源代码点此下载 =============================...

网站性能工具Yslow的使用方法

Yslow是雅虎开发的基于网页性能分析浏览器插件,从年初我使用了YSlow后,改变了博客模板大量冗余代码,不仅提升了网页的打开速度,这款插件还帮助我分析了不少其他网站的代码,之前我还特意写了提高网站速...

HTML优化工具Page Speed和YSlow插件的安装及使用

目前,HTML优化已经越来越引起Web前端开发的重视。页面优化是SEO优化工作中必不可少的一项任务,这里我向大家推荐我目前用的谷歌Page Speed插件和YSlow插件。         Page...

网站性能评测工具YSlow的使用

在前端开发中,常常需要评估页面内容大小,请求数量,以及JS,CSS,图片等各类型文件所占的大小,以及有没有可优化的空间。那么YSlow是您必不可少的选择。 YSlow简介:         YSl...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:YSlow的使用,以及Yahoo军规的几条定律
举报原因:
原因补充:

(最多只允许输入30个字)