一)Make fewer HTTP requests
尽可能少的http请求。合并图片、CSS、JS,改进首次访问用户等待时间。
二)Use a CDN
使用CDN,就近缓存==>智能路由==>负载均衡==>WSA全站动态加速
CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络”边缘”,使用户可 以就近取得所需的内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均 等原因所造成的用户访问网站响应速度慢的问题。
三)Avoid empty src or href
避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。
四)Add an Expires headers
为文件头指定Expires
使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求。
设置过期的HTTP Header.设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中。
五)Compress components with Gzip
使用gzip压缩内容
压缩任何一个文本类型的响应,包括XML和JSON,都是值得的。
对我们的页面内容进行Gzip格式的压缩,Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常 大,一般压缩率为85%,就是说服务器端100K的页面可以压缩到25K左右的Gzip格式的数据发给客户端,客户端收到Gzip格式的数据后自动解压缩 后显示页面。
Put CSS at the top 把CSS外部链接放到页面的顶部。其实这个原则我们一般都遵守的,如果把CSS外部链接作为逻辑的一部分出现在页面头部以下,我个人觉得这个本身就 是个错误。
六)Put CSS at top
把CSS放到顶部
七)Put JS at bottom
把JS放到底部
防止js加载对之后资源造成阻塞。
把Javascript脚本尽量放到页面底部加载。 一开始为以为Javascript脚本尽量放到页面底部加载,是指所有的JS脚本都要放到底部,后来才发现,并不 完全是这样,这里所指的脚本是指那些在加载过程中要执行的脚本,所以一般的处理办法还是页面头部引入JS链接,页面底部执行JS脚本程序。为什么要这么做 呢?呵呵,其实很简单,为了实现最大的下载并行,页面加载初期做的事,最好只有下载,HTML的下载,CSS的下载,JS的下载,等下载完成后再去实现页 面渲染,JS脚本运行。
八)Avoid CSS expressions
避免使用CSS表达式
避免CSS表达式 其实在CSS中运行表达式和页面加载中运行大量的JS脚本差不多,或许还更慢,而且还不兼容,虽然可以使我们在页面逻辑简单不少,但是我们完全可以抛弃之。
九)Make JS and CSS external
将CSS和JS放到外部文件中
目的是缓存,但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。
十)Reduce DNS lookups
尽可能少的DNS查找。
权衡DNS查找次数
减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。
IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。
十一)Minify JS and CSS
精简CSS和JS
对Javascript 代码进行压缩。压缩工具,yuicompressor,雅虎美国开发的JAVA 压缩包yuicompressor.jar。压缩的相当完美,不仅把代码间的空格换行给去除掉了,而且对变量名,北部方法名都进行的简化,无意中实现了混 淆脚本的作用。
十二)Avoid URL redirects
避免重定向。
避免跳转
同域:注意避免反斜杠 “/” 的跳转;
跨域:使用Alias或者mod_rewirte建立CNAME(保存域名与域名之间关系的DNS记录)
十三)Remove duplicate JS and CSS
scripts 去除重复的脚本。
删除重复的JS和CSS
重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。
十四)Configure entity ETags
这个好像是服务器端配置的问题。
配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载。
十五)make AJAX cacheable
(AJAX 缓存)。
可缓存的AJAX
“异步”并不意味着“即时”:Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。
十六)Use GET for AJEX requests
使用GET来完成AJAX请求
当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。
十七)Reduce the number of DOM elements
减少DOM元素数量
是否存在一个是更贴切的标签可以使用?人生不仅仅是DIV+CSS
十八)Avoid HTTP 404(Not Found )error
避免404
有些站点把404错误响应页面改为“你是不是要找***”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先,这种加载会破坏并行加载;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。
十九)Reduce cookie size
减少Cookie的大小
二十)Use cookie-free domains
使用无cookie的域
比如图片 CSS 等,Yahoo! 的静态文件都在 yimg.com 上,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名 (yahoo.com) 的影响。
二一)Avoid AlphaImageLoader filter
不要使用滤镜
png24的在IE6半透明那种东西,别乱使,淡定的切成PNG8+jpg
二二)Do not scale images in HTML
不要在HTML中缩放图片
二三)Make favicon small and cacheable
缩小favicon.ico并缓存