避免使用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不会被缓存,不过现在这个现在已经放宽很多了,但对于移动平台来说,保证文件大小还是很重要的,因为用户每月的流量是有限的,所以加上了这个检测