yahoo开发的网页评分插件YSlow的评分规则

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

时间: 2024-11-17 20:26:25

yahoo开发的网页评分插件YSlow的评分规则的相关文章

jQuery超赞的评分插件(8款)_jquery

本文跟大家分享了8款jQuery评分插件,相信总有一款是适合你的哦 抓紧先上图给大家挑选一下 ------------------------------------------效果查看      源码下载------------------------------------------ 小编挺喜欢第一款的,亲,你呐? 为大家再分享实现8款jQuery评分插件代码,抓紧试试吧 <head> <meta charset="gb2312"> <meta ht

网页图表插件 都是用什么工具开发的?

问题描述 网页图表插件 都是用什么工具开发的? 网页图表插件 都是用什么工具开发的?那个大神有开发手册或者教程给菜鸟我学习一下, 跪求赐教! 解决方案 http://www.cnblogs.com/lhb25/p/35-javascript-chart-and-graph-libraries.html

HTML5商城开发三 jquery 星星评分插件

展示:   实现方法: 1.html引用star-grade.js <script type="text/javascript" src="Scripts/star-grade.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".sstar").BindStars();//使用属性

一个非常棒的jQuery 评分插件--好东西要分享

  现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现.比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但那样不如用五个星星来得炫来得直观.     像这样的星星评分插件用得非常普遍,几乎要成为你随手捻来的小菜,任何一个不具备使用这样插件的前端程序员都是毫无战斗力的. 这里给大家介绍一个实现这样的评分效果的小插件jQuery Raty.它提供的API相当丰富真的是让人爱不释手.详细文档及下载插件请移

《阿里巴巴Java开发手册》IDEA插件与Eclipse插件使用指南

首先非常感谢大家对插件的支持与意见,这里详细介绍一下<阿里巴巴Java开发手册>IDEA插件与Eclipse插件的安装使用. 关于规约插件的背景介绍,可见上篇文章:提升团队研发效能利器,<阿里巴巴Java开发手册>插件全球首发(附插件下载地址) 一.阿里巴巴Java开发手册IDEA插件使用指南 通过Jetbrains官方仓库安装 1. 打开 Settings >> Plugins >> Browse repositories... 2. 在搜索框输入alib

jsp开发的网页在微信公众平台上显示的内容全在左边,右边是空的

问题描述 jsp开发的网页在微信公众平台上显示的内容全在左边,右边是空的 用myeclipse开发的微网页,其实也就是网页,使用jsp编写的页面,在内部是 这些元素:因为这个项目是要放在手机里访问的,所以在电脑上很正常,但是一放到手机上,打开网页链接,所有的内容都在手机屏幕的左侧,右边是空的,但是像 这些标题元素却能正常显示,求大神解答啊~~~ 解决方案 手机里面的商户html5,控件是js控制,自适应的

如何在VS.NET/C# Builder开发的网页中也能实现DOS下录入数据回车换行的功能

数据|网页 如何在VS.NET/C# Builder开发的网页中也能实现DOS下录入数据回车换行的功能北京煤炭科学研究总院经济与信息研究所 丁报圣 在DOS年代,录入数据时我们习惯了在录入完一行数据后敲一个回车转入下一行的数据录入.昔日DOS的辉煌已经成为过去,如今更加友好易用的GUI图形操作界面Windows已经进入了我们的日常生活. 1996年Windows95的出现是软件史上的一次伟大革命.Windows 是美国微软公司开发的一种图形方式的操作系统,它的出现克服了 DOS 中难记的一些命令

Eclipse开发J2ME程序之插件安装

引言 在上一篇文章中对Eclipse的运行环境作了配置,同时也对J2ME开发作了简要的介绍.通过上述介绍,读者应该理解:对手机应用程序的开发实际也就是进行J2ME项目的开发.虽然在上一篇文章对环境进行了配置,使其能够支持J2ME的开发,但是目前安装的Ecilpse作为一个Java应用的IDE,使用是非常方便,可是对于J2ME的开发支持还是远远不够的.为此,本文将为Eclipse安装一个开发J2ME程序的插件EclipseMe,以完成开发手机应用程序的最后一项准备工作. EclipseMe插件的获

使用JavaScript开发IE浏览器本地插件实例

 这篇文章主要介绍了使用JavaScript开发IE浏览器本地插件实例,本文讲解使用JS+注册表的方式开发一个IE浏览器本地插件,需要的朋友可以参考下     使用js开发的IE插件可以在当前浏览的页面中执行js代码,在此基础上实现任何用户可以想到的功能. 可以针对不用的网站做一些common处理(比如提取某类信息),也可以针对特定网站做特色处理(比如抢购火车票). 实现这种插件方法比较简单,只需拷贝几个文件,修改一个注册表值即可.所以比较适合快速实现一些浏览器或者网站辅助功能. 实现步骤: 1