第1 章 理解Web 性能 　　 1
1.1 理解Web 性能 　　 1
1.1.1 Web 性能和用户体验 　　 1
1.1.2 Web 浏览器如何与Web 服务器通信 　　 2
1.1.3 Web 页面如何加载 　　 4
1.2 上手准备 　　 5
1.2.1 安装Node.js 和Git 　　 6
1.2.2 下载并运行客户的网站 　　 6
1.2.3 模拟网络连接 　　 7
1.3 检查客户网站 　　 8
1.4 优化客户网站 　　 10
1.4.1 缩小资源 　　 11
1.4.2 使用服务器压缩 　　 13
1.4.3 压缩图像 　　 16
1.5 最终性能测试 　　 18
1.6 小结 　　 19
第2 章 使用评估工具 　　 20
2.1 使用Google PageSpeed Insights 进行评估　　 20
2.1.1 评估网站性能 　　 20
2.1.2 使用Google Analytics 进行批量报告 　　 23
2.2 使用基于浏览器的评估工具 　　 24
2.3 检查网络请求 　　 25
2.3.1 查看计时信息 　　 25
2.3.2 查看HTTP 请求和响应头 　　 27
2.4 渲染性能检查工具 　　 29
2.4.1 理解浏览器如何渲染网页 　　 29
2.4.2 使用Google Chrome 的Performance 面板 　　 30
2.4.3 识别问题事件：jank 是元凶 　　 32
2.4.4 用JavaScript 在时间线中标记点 　　 37
2.4.5 其他浏览器中的渲染分析器 　　 38
2.5 在Chrome 中对JavaScript 进行基准测试 　　 39
2.6 模拟和监控设备 　　 40
2.6.1 在桌面Web 浏览器中模拟设备 　　 41
2.6.2 在Android 设备上远程调试网站 　　 42
2.6.3 在iOS 设备上远程调试网站 　　 43
2.7 创建自定义网络节流配置 　　 44
2.8 小结 　　 45
第3 章 优化CSS 　　 47
3.1 直入主题，保持DRY 　　 47
3.1.1 简写CSS 　　 47
3.1.2 使用CSS 浅选择器 　　 50
3.1.3 挑选浅选择器 　　 51
3.1.4 LESS 和SASS 预编译器：简单就是美 　　 52
3.1.5 不要重复自己 　　 53
3.1.6 实现DRY 　　 53
3.1.7 使用csscss 查找冗余 　　 54
3.1.8 分割CSS 　　 56
3.1.9 自定义框架下载 　　 57
3.2 移动优先即用户优先 　　 58
3.2.1 移动优先与桌面优先 　　 58
3.2.2 Mobilegeddon 算法 　　 61
3.2.3 使用Google 的移动友好指南 　　 62
3.2.4 验证网站的移动友好性 　　 63
3.3 对CSS 进行性能调整 　　 63
3.3.1 避免使用 @import 声明 　　 63
3.3.2 @import 串行请求 　　 64
3.3.3 并行请求 　　 64
3.3.4 在中放置CSS 　　 65
3.3.5 防止无样式内容闪烁 　　 65
3.3.6 提高渲染速度 　　 66
3.3.7 使用更快的选择器 　　 66
3.3.8 构建和运行基准测试 　　 67
3.3.9 检查基准测试结果 　　 68
3.3.10 尽可能使用flexbox 　　 69
3.3.11 对比盒子模型和flexbox 样式 　　 69
3.3.12 检查基准测试结果 　　 70
3.4 使用CSS 过渡 　　 71
3.4.1 使用CSS 过渡 　　 71
3.4.2 观察CSS 过渡性能 　　 73
3.4.3 使用will-change 属性优化过渡 　　 74
3.5 小结 　　 75
第4 章 理解关键CSS 　　 76
4.1 关键CSS 及其解决的问题 　　 76
4.1.1 理解折叠 　　 76
4.1.2 理解渲染阻塞 　　 77
4.2 关键CSS 的原理 　　 78
4.2.1 加载首屏样式 　　 79
4.2.2 加载首屏以外内容的样式 　　 79
4.3 实现关键CSS 　　 80
4.3.1 配置并运行菜谱网站 　　 81
4.3.2 识别和分离首屏CSS 　　 82
4.3.3 加载首屏以外内容的CSS 　　 88
4.4 权衡收益 　　 89
4.5 提升可维护性 　　 91
4.6 多页网站的注意事项 　　 91
4.7 小结 　　 92
第5 章 响应式图像 　　 94
5.1 为什么要考虑图像传输 　　 94
5.2 理解图像类型及其应用 　　 96
5.2.1 使用光栅图像 　　 96
5.2.2 使用SVG 图像 　　 99
5.2.3 选择图像格式 　　 100
5.3 CSS 中的图像传输 　　 101
5.3.1 使用媒体查询在CSS 中适配显示器 　　 101
5.3.2 通过媒体查询适配高DPI 显示器 　　 104
5.3.3 在CSS 中使用SVG 背景图像 　　 106
5.4 在HTML 中传输图像 　　 106
5.4.1 图像的全局max-width规则 　　 107
5.4.2 使用srcset 　　 107
5.4.3 使用元素 　　 110
5.4.4 使用Picturefill 提供polyfill支持 　　 114
5.4.5 在HTML 中使用SVG 　　 116
5.5 小结 　　 117
第6 章 图像的进一步处理　　 118
6.1 使用图像雪碧图 　　 118
6.1.1 准备工作 　　 119
6.1.2 生成雪碧图 　　 119
6.1.3 使用生成的雪碧图 　　 121
6.1.4 使用雪碧图时的考量 　　 122
6.1.5 使用Grumpicon 回退到光栅图像雪碧图 　　 123
6.2 缩小图像 　　 124
6.2.1 使用imagemin 优化光栅图像 　　 125
6.2.2 优化SVG 图像 　　 129
6.3 使用WebP 编码图像 　　 131
6.3.1 使用imagemin 编码有损WebP 图像 　　 132
6.3.2 使用imagemin 编码无损WebP 图像 　　 133
6.3.3 支持不支持WebP 的浏览器 　　 134
6.4 懒加载图像 　　 136
6.4.1 配置标记 　　 137
6.4.2 编写懒加载程序 　　 138
6.4.3 考虑不支持JavaScript 的用户 　　 144
6.5 小结 　　 146
第7 章 更快的字体 　　 148
7.1 明智地使用字体 　　 149
7.1.1 选择字体和字体变体 　　 149
7.1.2 构建你自己的@font-face级联 　　 151
7.2 压缩EOT 和TTF 字体格式 　　 154
7.3 取字体子集 　　 156
7.3.1 手动生成字体子集 　　 156
7.3.2 使用unicode-range 属性传输字体子集 　　 160
7.4 优化字体加载 　　 166
7.4.1 理解字体加载的问题 　　 166
7.4.2 使用CSS font-display属性 　　 168
7.4.3 使用字体加载API 　　 169
7.4.4 使用Font Face Observer作为回退 　　 173
7.5 小结 　　 175
第8 章 保持JavaScript 的简洁与快速 　　 176
8.1 影响脚本加载行为 　　 176
8.1.1 合理放置