技巧

避免坏请求

有时页面中的HTML或CSS会向服务器请求一个不存在的资源，比如图片或HTML文件，这会造成浏览器与服务器之间过多的往返请求。

前端时间google被墙，而wordpress在加载的时候会加载google的字体文件，导致博客一直没有加载出来。

避免CSS @import

使用 @import方法引用CSS文件可以能会带来一些影响页面加载速度的问题，比如导致文件按顺序加载（一个加载完后才会加载另一个），而无法并行加载。

@import url("style.css")

可以通过下面这种方式来代替

<link rel="style.css" href="style.css" type="text/css">

避免使用CSS表达式，CSS表达式在执行时候的运算量非常大，会对页面性能产生大的影响；

合并多个CSS、JavaScript文件

网站中一般都包含有多有的CSS、JavaScript文件，将多个文件进行合以减少网络访问次数，提高加载速度；

同时可以对CSS、JavaScript文件进行压缩，减小文件大小；

小图标合并

将网站中的多个小图片文件合并在同一个文件中，然后通过css position进行控制，减少页面加载时间；

例如：bootstrap中的所有小图标都仅存在一个文件中；

启用Keep-Alive

HTTP协议采用“请求-应答”模式，当使用普通模式（非KeepAlive模式）时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）；当使用 Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。

在HTTP 1.0中Keep-Alive默认是关闭的，需要在HTTP头中加入“Connection: Keep-Alive”，才能启用Keep-Alive；在 HTTP1.1中Keep-Alive默认启用，加入“Connection: close”可关闭。目前大部分浏览器都是用HTTP 1.1协议，也就是说默认都会发起Keep-Alive的连接请求了，所以是否能完成一个完整的Keep- Alive连接就看Web服务器的设置情况。

内嵌

短小的CSS、JavaScript直接嵌入到Html文件中；小图片也可以直接嵌入html中，通过内联图象（使用 data: URL scheme 在实际的页面嵌入图像数据）;

避免Javascript阻塞渲染

浏览器在遇到一个引入外部JS文件的<script>标签时，会停下所有工作来下载并解析执行它，在这个过程中，页面渲染和用户交互完全被阻塞了。这时页面加载就会停止。

可以删除干扰页面中第一屏内容加载的JavaScript，第一屏是指用户在屏幕中最初看到的页面，无论是桌面浏览器、手机，还是平板电脑。

最简单可依赖的方法就是将javascript脚本尽可能的往后挪；

css放在页面最上面

相反的，css一般放在页面最上方，因为 ie，firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。

Cookie优化

减小cookie大小：去除不必要的coockie，并使coockie体积尽量小以减少对用户响应的影响；

针对Web组件使用域名无关的Cookie：对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放静态组件是一个好方法，或者也可以在Cookie中只存放带www的域名；

设置缓存

图片等静态资源可以直接通过HTTP Header中的Expires设置一个很长的过期头；

减少不必要的HTTP跳转

对于以目录形式访问的HTTP链接，在末尾加上“/”。很多人都会忽略链接最后是否带’/’，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了301跳转，增加了多余请求;

 避免使用eval()

eval函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码;

减少DNS查询

yahoo的建议一个页面所包含的域 名数尽量控制在2-4个;

工具

1、google的PageSpeed工具来检测坏链接；

2、CSS delivery工具检测页面代码中的CSS文件；

3、resource check工具检测页面中所引用的JavaScript文件数；

4、 Gzip压缩工具来检测页面是否已经经过Gzip压缩；

其他参考

1、https://developer.yahoo.com/performance/rules.html

2、https://developers.google.com/speed/docs/insights/rules

3、http://dbanotes.net/web-performance.html