避免使用document.write
-
目的
尽可能避免使用document.write,因为可能会冲掉页面原有的内容,通过它来引入外链资源需要先执行JS,对性能有一定影响大部分使用
document.write都是外链的广告,这个检测的目的是为了减少这类广告调用方法 检测方法
目前直接通过字符串查找的方式来检测页面中的JS中是否含有document.write(,所以会误判注释中的内容,后续会对JS进行解析来优化优化建议
彻底避免使用这种方法,对于广告,最好能明确高宽,通过后续写入或 iframe 的方式来优化
避免重复的请求
目的
重复请求绝大部分是没有意义的,还很有可能是空标签导致的问题,所以检测检测方法
遍历所有请求,判断 url 是否完全相同,所以有可能出现误判post类请求的情况
避免跳转
目的
无必要的跳转会带来性能影响,可以去掉检测方法
通过判断是否有Location这样的header来检测
开启keep-alive
目的
开启keep-alive使得能够使用一个tcp链接来传输多个资源,从而提高性能-
检测方法
对于http 1.1默认会开启keep-alive,所以只需检测是否有Connection:close这样的header对于
http 1.0,需要手动开启,所以检测是否设置了Connection: Keep-Alive
指定正确的Vary头信息
目的
如果设置了Vary头,检测设置值是否正确,如果设置不正确,会导致一些代理不能正确的缓存静态资源检测方法
如果设置了值,检测是否是Accept-Encoding或者User-Agent或者是这2个的组合
合并外部资源
目的
将同一类型的外部资源尽量合并在一起,减少http请求数检测方法
检测同一类型的外部资源的数量是否大于某一阀值(可配)-
优化建议
将除了基础库外的JS合并在一起,将页面中独有的CSS合并在一起CSS中的图片可以通过FIS的工具来合并
开启Gzip
目的
压缩静态资源的下载数据量,减少网络传输时间检测方法
如果当前的请求资源是JS/CSS/HTML,并且文件大小大于10K,检测Content-Encoding值是否是gzip/deflat优化建议
对于JS/CSS/HTML静态资源,使用gzip进行压缩
将JS和CSS外链
目的
将静态的JS和CSS尽量外链,后续的访问就可以使用浏览器缓存检测方法
检测HTML里内连的JS/CSS数量以及大小
使用无cookie的域名
目的
对于静态资源,cookie是没有用的,可以去掉检测方法
检测静态资源是否有cookie优化建议
将静态资源放在一个单独的域名上
指定页面的编码
目的
如果没有指定页面编码,浏览器就需要通过查找meta和猜测的方式来决定页面的编码,对性能有一定影响检测方法
首先判断header中是否有charset的设置,如果没有就建议设置,如果甚至连meta标签中都没设置也会进行提示
减少URL的长度
目的
url太长会导致页面冗余,增加不必要的下载时间检测方法
通过检测所有请求url的大小和页面中a标签的href地址大小,目前的阀值是超过500直接就算太大了,后续将做成可配
减少Cookie的大小
目的
cookie太大会影响请求速度判断请求和返回header中的cookie大小,目前配置是大于500就认为较大
优化建议
cookie中应该只有uid,其中的各种状态信息由后端进行保存
优化图片
目的
通过减小图片大小来提升加载速度检测方法
通过使用多种图片压缩方法,对图片进行压缩,测试是否存在明显的可压缩空间,具体请参考图片压缩优化调研优化建议
使用FIS的图片压缩器来压缩
CSS样式表需置于头部
目的
样式表在头部中进行加载检测方法
检查body中是否有style和外链css样式表
启用资源缓存
目的
缓存静态文件,减少对服务器的请求检测方法
对于图像/js/falsh/css文件,要求设定Cache-Control的max-age以及Expires超过一周,同时要设定E-Tag对于其他文件则不需要设定优化建议
将图片迁移到CDN上,那里自动进行很多优化
减少同域名的请求
目的
浏览器同域名下并发请求数有限制检测方法
检测每个请求的HOST,进行累加计算优化建议
如果资源很多,考虑使用两种方法优化:
延迟加载,等用户滚屏时才去下载
建立多个域名,如pic1.xxx.com, pic2.xxx.com
检测Favicon
目的
网站需要设定Favicon,且需要设定缓存检测方法
检测Favicon是否存在,而后检测其Cache-Control, Expires, E-tag的设置是否合理
优化CSS和JS的位置
目的
让浏览器能够并行加载资源,不会因为JS脚本的加载而进行阻断检测方法
读取页面中所有的内联和外链的script和CSS节点,判断是否将CSS都放在一起且置于Script节点之前。
头部只放一个JS文件
目的
头部只放一个JS文件,其他的JS文件放在末尾或动态加载检测方法
头部只放一个JS文件,其他的JS只放到页面末尾或动态加载可以有效利用浏览器的并发下载特性(Event Faster Websites),通过解析页面的head标签来检测是否只有一个JS文件在页面头部
JS文件压缩检测
目的
压缩JS文件以加快浏览器加载速度,减少带宽占用,增强用户体验检测方法
对当前的所有JS文件使用YUI Compress进行压缩后,比较压缩前与压缩后文件的大小,若文件压缩后体积减小10%或以上,则认为当前文件没有进行压缩或存在大量注释(如果注释必须要保留,请参照YUI Compress手册添加!以确保注释不会被删除)优化建议
使用FIS中的工具来自动压缩
CSS文件压缩检测
目的
压缩CSS文件以加快浏览器加载速度,减少带宽占用,增强用户体验检测方法
对当前的所有CSS文件使用YUI Compress进行压缩后,比较压缩前与压缩后文件的大小,若文件压缩后体积减小10%或以上,则认为当前文件没有进行压缩或存在大量注释(如果注释必须要保留,请参照YUI Compress手册添加!以确保注释不会被删除)优化建议
使用FIS中的工具来自动压缩
CSS文件单行超长检测
目的
当CSS文件中单行长度超过8000字符时会被部分手机浏览器截断检测方法
逐行读入当前所有CSS文件并计算单行长度,发现超过8000字符的进行错误提示
Html压缩检测
目的
压缩html文件可以减少带宽占用,加快页面下载速度以及展现速度-
具体检测内容:
- 检测不需要对应闭合标签的元素并删除对应的闭合标签:
br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed- 两个块级元素之间的空格是可以删除的:
address,blockquote,center,dir,div,dl,fieldset,form,h1,h2,h3,h4,h5,h6,hr,menu,noframes,noscript,ol,p,pre,table,ul标签属性默认值: 当标签属性使用其默认值时,该属性可删除
只有属性名的属性:
disabled,selected,checked,readonly,multiple 优化建议
使用FIS中的压缩,可以用http://fe.baidu.com/welefen/compressor/来试试效果
IMG元素width与height属性值检测
-
目的
当img标签中没有设置width与height属性,导致加载后不断reflow或属性值与图片真实值不符,导致图片渲染前需要进行拉伸或压缩操作而影响性能
检测方法
检测页面中所有包含有效src属性的img元素中width与height的属性值
检测当前img中对应图片的宽高
这两个值要一致
检查Css文件时候包含未使用的规则
目的
减少页面中无用css来加快加载速度-
优化建议
使用fis的模块化开发来拆分CSS,而不是都放到一起导致没法删除可以使用
Dust-Me Selectors插件来方便查看哪些CSS selector没被用到
WebApp 检测
-
目的
用于检测webapp中的常见问题,目前比较简单,检测了4个- 检测
html标签中是否有manifest - 检测
meta标签中是否有app-mobile-web-app-capable - 检测
link标签中是否有apple-touch-icon-precomprosed - 检测是否有
iframe标签
- 检测
减少返回内容的大小
目的
避免大文件而导致的性能及流量问题,目前只在移动版本中会检测,阀值是25k这是yahoo很早在iphone中发现的限制,他们发现25k以上的html不会被缓存,不过现在这个现在已经放宽很多了,但对于移动平台来说,保证文件大小还是很重要的,因为用户每月的流量是有限的,所以加上了这个检测