1.Minimize HTTP Requests 减少HTTP请求
图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。
2.Use a Content Delivery Network 利用CDN技术
CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。
3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存
浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果 页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。
4.Gzip Components Gzip压缩
Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到 这里 做下测试。
5.Put Stylesheets at the Top 把CSS放顶部
让浏览者能尽早的看到网站的完整样式。
6.Put Scripts at the Bottom 把JS放底部
网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。
7.Avoid CSS Expressions 避免CSS Expressions
CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！~
8.Make JavaScript and CSS External 将JS和CSS外链
前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的Jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！~
9.Reduce DNS Lookups 减少DNS查找
减少DNS查询次数需要减少来自不同domain的请求的数量，如尽量将外部域的对象下载到本地服务器上等。
10.Minify JavaScript and CSS 减小JS和CSS的体积
写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。
11. Avoid Redirects 避免重定向
再写入链接时，虽然”http://www. today-s-ooxx. com”和”http://www. today-s-ooxx. com/” 仅有一个最后的”/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。
12. Remove Duplicate Scripts 删除重复脚本
重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。
13. Configure ETags 配置ETags
搞不清楚咋回事，总之我是在. htaccess里把它删除了。
14. Make Ajax Cacheable 缓存Ajax
Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率。
15. Flush the Buffer Early 尽早的释放缓冲
当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合HTML，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。
16. Use GET for AJAX Requests 用GET方式进行AJAX请求
Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。
17. Post-load Components 延迟加载组件
最先加载必须的组件进行页面初始化，然后再加载其他，YUI Image Loader 是很好的例子。
18. Preload components 预加载组件
提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见Google首页上的CSS sprites应用。
19. Reduce the Number of DOM Elements 减少DOM元素数量
复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件。
20. Split Components Across Domains 跨域分离组件
页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面说到的DNS查找浪费。
21. Minimize the Number of iframes 减少iframe数量
需要更有效的利用 ifames。
iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本
iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义
22. No 404s 不要出现404页面
站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。
23. Reduce Cookie Size 减小Cookie
Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。
24. Use Cookie-free Domains for Components 对组件使用无Cookie的域名
对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名。
25. Minimize DOM Access 减少DOM的访问次数
JS访问DOM是很慢的，尽量不要用JS来设置页面布局。
26. Develop Smart Event Handlers 开发灵活的事件处理句柄
DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄
27. Choose over @import 使用而非 @import
在IE中使用@import就和在页面底部用一样，我们前面说要把放顶部的。
28. Avoid Filters 避免过滤器的使用
如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下的版本适用，用PNG8图片。如果你非要使用，加上_filter以免影响IE7+用户。
29. Optimize Images 优化图片
将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果。
30. Optimize CSS Sprites 优化CSS Sprites
在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度。
31. Don’t Scale Images in HTML 不要在HTML中缩放图片
图片要用多大的就用多大的，1000X1000的图片被width=”100″ height=”100″以后，本身的KB数是不会减少的。
32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它
站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。
33. Keep Components under 25K 保证组件在25K以下
iPhone不能缓存25K以上的组件，并且这还是要在被压缩前。
34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中
35. 使用base64编码代替图片
适用于图片小于2KB，页面引用图片不多的情况。将图片转换为base64编码字符串inline到CSS或页面中，减少http的请求次数。
36. 合并图片sprite（雪碧图）
任何用到页面图片的场景。将多个页面用到的背景图片合并成一个大的图片在页面中引用，可以有效地减少请求个数。
37. 使用canvas代替图片
需要高性能的图片或动画，使用HTML5的canvas元素绘制图片，页面渲染性能较高。
38. 响应式图片
不同终端对同一图片的需求不一样，根据终端加载不同的图片来节省不必要的流量。通过picture元素，picturefill或平台判断来为不同终端平台输出不同的图片。减少没必要的图片加载，灵活控制。
39. 图片压缩
在不得不加载图片的前提下，进一步提高优化效果，通过有损或无损压缩所见图片的大小。减少图片加载流量，效果明显。
40. 更好的图片格式
webp、bpg、sharpP等新图片格式具有更好的压缩比
webp能让图片平均大小减小70%
41. 使用矢量图代替位图
对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
42. 使用支持SPDY的服务器
SPDY可认为是未来的HTTP 2.0的早期实现，Chrome、Firefox 13+、Opera 12+、IE 11+均已支持SPDY。SPDY和HTTP2可参考此中文演讲：http://www.youtube.com/watch?v=r74RAcrc1ZA（请自备梯子），这里就不展开了。
43.最好不用图片，去掉无意义的修饰
原文地址：https://www.cnblogs.com/wuguanglin/p/front-end-optimization.html