1. 把如何渐进式提升性能作为性能优化的指导思想
2. 将assets(资源)分成三种类型：Core(核心型)、Enhancement(增强型)、Extras(其它)
3. 页面加载时应首先载入Core，然后在DomContentLoaded事件触发时载入Enhancement，最后在Load事件触发时载入Extras
4. 在对js文件进行模块化、合并、压缩等操作的情况下使用HTTP/2
5. 在混合内容包含警告信息的情况下，实施监控
6. 使用CDN(需要支持HTTP2，需要核实，请点击这里)
7. 对消息头采用HPACK进行压缩传输
8. 采用Zopfli、Brotli等压缩算法对数据进行压缩
9. 使用Service Worker
10. 使用符合规范的CSS或者尽可能地使用HTTP2自带的服务器推送功能
11. 在页面中载入Web font系列的字体子集
12. 图片应做成响应式、(大尺寸图片建议)使用渐进式JPEG、使用mozJPEG，tinyPNG等工具对图片进行压缩
13. 针对React/Angular/Ember等框架的渲染机制来优化启动速度
14. 单独使用Progressive Web App、Accelerated Mobile Pages或者结合使用Progressive Web App、Accelerated Mobile Pages
15. 部署WebPageTest
16. 在适当的时候，在项目中使用Grunt、Gulp以及Webpack等工具构建
17. 针对资源优化的小技巧：
    • 使用dns-prefetch(<link rel="dns-prefetch" href="//fonts.googleapis.com")
    • 使用prefetch(<link rel="prefetch" href="http://daker.me/2013/05/hello-world.html"/>)
    • 使用prerender(<link rel="prerender" href="http://daker.me/2013/05/hello-world.html"/>)
    • 使用preload(<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">)
18. 提升对性能的感知能力(使用skeleton screen，使用懒加载的方式载入字体或者HTTP开销很大的JavaScript脚本。例如，视频、iframe、轮播图)
19. 目标：启动渲染所花费的时间应控制在1s以内
20. 目标：SpeedIndex ± 1000

如果你觉得还有一些比较重要的优化手段被我遗漏，请一定要告诉我，谢谢。

扫码关注w3ctech微信公众号