速度与激情 以网站性能提升用户体验pdf

Web设计师在权衡外观设计与网站性能时总是要作出艰难的选择。良好的内容、布局、图片和交互对于吸引用户来说至关重要，这其中的每一个元素都会对页面加载时间和网站的感知性能造成巨大影响。本书会帮助你在项目过程中将页面速度放在首位，向你展示如何验证关键的设计决策，从而提升页面加载速度，打造优质用户体验。

如果你是Web设计师或开发人员，想提升网站性能，本书非常适合你。

页面加载时间对网站和用户的影响

页面速度的基础知识：浏览器是如何获取和渲染内容的

优化和加载图片的实战

如何清理HTML和CSS，优化网络字体

以性能为目标的移动优先设计

随着网站的演进，利用工具度量性能

改变组织性能文化的方法

速度与激情 以网站性能提升用户体验 内容简介

本书探讨如何提升网站性能，分8章详细介绍性能提升所需的工具、软件、方法，主要内容包括：页面加载速度的基础知识，图片的格式和优化方法，HTML标记和样式的优化，如何用好响应式Web设计，网站性能的评估方法，以及如何打造组织的性能文化。

速度与激情 以网站性能提升用户体验 目录

第1章 性能即用户体验

1.1 对品牌的影响

1.1.1 回访用户

1.1.2 搜索引擎排名

1.2 对移动用户的影响

1.2.1 移动网络

1.2.2 移动行为模式

1.2.3 移动硬件

1.3 设计师对性能的影响

第2章 页面速度初探

2.1 浏览器如何渲染内容

2.1.1 请求

2.1.2 连接

2.2 页面大小

2.3 感知性能

2.3.1 关键渲染路径

2.3.2 卡顿

2.4 影响页面速度的其他因素

2.4.1 地理位置

2.4.2 网络

2.4.3 浏览器

第3章 优化图片

3.1 图片格式的选择

3.1.1 JPEG

3.1.2 GIF

3.1.3 PNG

3.1.4 额外的压缩

3.2 替换图片请求

3.2.1 精灵图

3.2.2 CSS3

3.2.3 data URI和Base64编码图像

3.2.4 SVG

3.3 图片使用规划和改进

3.3.1 建立日常检查机制

3.3.2 创建样式指南

3.3.3 指导其他的图片创作者

第4章 优化HTML标记和样式

4.1 简化HTML

4.1.1 过度嵌套

4.1.2 语义化

4.1.3 可访问性

4.1.4 框架和网格系统

4.2 简化CSS

4.2.1 未使用的样式

4.2.2 合并及精简样式

4.2.3 精简样式图片

4.2.4 去除特殊性

4.3 优化网络字体

4.4 创建可复用的HTML标记

4.5 关于HTML标记的进一步思考

4.5.1 CSS和JavaScript加载

4.5.2 压缩和gzip

4.5.3 资源缓存

第5章 响应式Web设计

5.1 谨慎加载内容

5.1.1 图片

5.1.2 字体

5.2 方案

5.2.1 项目文档

5.2.2 移动优先

5.2.3 衡量一切

第6章 性能评估与迭代

6.1 浏览器工具

6.1.1 YSlow

6.1.2 Chrome开发者工具

6.2 综合测试

6.3 真实用户监控

6.4 持续改变

第7章 权衡美感与性能

7.1 找到平衡点

7.2 将性能作为工作流程的一部分

7.3 基于性能预算尝试新设计

7.4 结合性能试验设计

第8章 改变组织文化

8.1 性能卫士

8.2 向上管理

8.2.1 对业务指标的影响

8.2.2 体验网站速度

8.3 与其他设计者和开发者工作

8.3.1 培训

8.3.2 认可

作者介绍

封面介绍

速度与激情 以网站性能提升用户体验 精彩文摘

第 2 章　页面速度初探

了解有关页面速度的基础知识对于网站设计是非常重要的，只有这样才能更好地理解需要优化什么。浏览器获取和显示内容的方式是非常稳定且可靠的，理解网页是如何渲染的将有助于你准确地判断设计决策会对网站的页面速度产生什么影响。我们的目标是优化：

页面中加载的资源数量（例如图片、字体、HTML 和 CSS）

这些资源的文件大小

用户对网站的感知性能

除了用户能够在浏览器中看见的渲染内容外，在后端也可以做进一步的优化，包括优化服务器在向客户端返回第一个字节之前所做的工作。还有很多因素会影响页面的加载速度，但这些因素并不在网站的前端，例如数据库请求，或者将模板编译成 HTML 等。然而正如 Steve Souders 所说：“终端用户的响应时间中有 80% 到 90% 都耗费在了前端。”在这里我们关注网页在前端的加载时间，因为前端对用户体验的影响最大。