1.全面讲解Web性能工具和技术,让种种Web性能问题迎刃而解;
2.注重实战,结合丰富示例,助你创建快速灵活的网站,提升用户体验。
对于网站来说,精巧的功能、时尚的设计和良好的营销策略固然重要,但如果访问者认为网站速度慢,那么它依然是失败的。由于网络环境不可预测,而且现在的网站比以往任何时候都庞大,所以需要通过提升速度来在竞争中脱颖而出。
本书是创建快速网站的指南,指导你如何以正确的方式创建高性能网站。书中介绍了如何加快向用户交付站点资源的速度、提高渲染速度、减少网站占用空间;探讨了HTTP/2等能够大幅提升网站速度的技术;阐述了如何构建一个自动化的工作流以完成常见的优化任务,同时提高开发效率。
如果你是Web开发人员,想创建快速灵活的网站,或者提升已有网站的性能,打造更佳的用户体验,那么本书不失为一个理想的选择。
在Web 变得越来越复杂的时代,解决Web 性能问题正当时。本书旨在帮助读者创建更加快速的网站,内容涵盖Web 性能的基础知识、性能评估工具、CSS 优化、图像优化、字体优化、JavaScript 相关的内容、Brotli 压缩算法、资源提示、配置缓存策略、HTTP/2,等等。
杰里米·瓦格纳(Jeremy Wagner)
Web性能咨询师、Web前端开发者,在多家机构和大公司积累了十余年经验。撰写过大量Web性能方面的图书和文章,还经常在各种Web开发会议上发表演讲。
第 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 在