快和慢是人们的主观感受，而且每个人的标准是不同的，在我们要撸起袖子去优化之前必须要明确什么是快，什么是慢。我们可以通过诸如 Google Analytics 和 Site24*7 等工具来采集网站的各种数据并量化指标，例如首次内容绘制时间 FCP（First Contentful Paint），首次可交互时间 TTI（time to interactive）等等。这样做目的主要有两点：

世间大部分事物都符合边际效益递减规律，性能优化也是如此。最求极致的性能效果是不符合公司以营利为目的的策略的。花最少的钱，提升最大的效果，把 ROI 做到极致，这才是正确的思考方向。量化指标可以帮助我们清楚的知道当前在哪里，目标要做到什么程度。明确目标对于团队如何选择解决方案有着非常重要的作用。

提升系统透明度，掌握各个页面的性能指标，根据每个页面的重要程度和  FCP 指标来排列优先级。重要程度可以参考如下几个问题来思考：

这个页面每日访问量如何？如：用户登录后 landing 页面。

这个页面是否是主要业务流程中的一环？如：用户下单页面。

这个页面是否是重要相关方需要访问的页面？如：公司首页或大客户经常需要使用的页面。

优秀的网站千篇一律，糟糕的网站那是各有千秋。不同业务场景可能会遇到的技术挑战自然是不同的，只有找到病因才能对症下药。如下列举几种常见场景以及解决思路：

传统服务端渲染的架构中，往往因为服务端数据处理时间过长而导致前端响应很慢，体验的感觉就是系统很重。可以考虑把数据和页面响应拆分开，用异步请求的方式来填充部分页面，整体体验会提升很多。

现在流行的单页应用 SPA（Single Page Application）架构，其弊端在于首次加载时要加载大量资源，在带宽受限的情况下，FCP 会很差，这种情况可以考虑懒加载资源，提升带宽，使用 CDN 服务等等。

请求密集型页面，例如相册或数据看板等。在 Http1.x 的协议下浏览器对同一域名下的 TCP 连接数量是有限制的，不同浏览器的值会不同，但普遍为6-8个。当 Http 请求数量过多时，TCP 连接数量便成了瓶颈。可以考虑升级至 Http2.0 或将使用域名切片策略。

我们再提炼一下思路，按照如下方式来归因问题并对应地制定解决方案。

在明确性能瓶颈后即可从“武器库”中挑选趁手的兵刃，对网站开刀了。优化方法将会在后面的章节中介绍。优化过程中，团队应时刻关注目标并设置好 Timeboxing，避免钻入牛角尖或过度优化。

实现了性能优化的目标之后，当然要想办法守住胜利果实。可以借助如 Sentry 或 Site24*7 等工具来设置监控和告警，定期复盘各种指标变化。

压缩资源体积

无论是 Javascript，css 还是图片等，尽可能将内容压缩后再传输给客户端，可以通过服务器配置开启 gzip 压缩功能。代码层面，及时清理掉无用的组件和依赖，尽可能压缩资源大小。另外 gzip 同样可以应用于服务端返回的 JSON 数据，提升下载性能。

大文件拆解

当 main.js 体积过大时，可以考虑按需加载或捆绑拆分的策略，将大文件拆解成若干小文件同时下载以缩短下载时间。

开启 Nginx 的缓存功能，可以免去服务器对静态资源从本地磁盘加载的 I/O 开销。后端的数据服务器也是同样道理，可以将热点数据和不经常变动的数据进行缓存，以降低对数据库访问压力，同时提高相应性能。

研究数据（Ubounce，2019）表明，有50%的用户愿意为了更快的加载时间而放弃动画和视频。视觉体验和流畅体验之间需要进行平衡。

过多的元素内容会使网页变得臃肿和眼花缭乱。根据谷歌2018年的研究数据，最佳平均请求数–完整显示整个页面所需所有独立内容的数量–小于50。页面内过多的元素内容不但拖慢了性能，还会降低转化率。

尽量简化 API 的响应内容，不需要的字段尽量不要给到前端，这样可以节省下载时间。尽量避免一个API种包含多个领域的信息。可以考虑使用 GraphQL 框架。

当 response 中数据量过大时，应考虑分页显示的策略，每次返回的数量应控制在50条以内。

当服务器吞吐量达到瓶颈时，在当前流行的微服务框架下，可以通过增加实例数量来缩短服务器响应时间。

当数据库成为性能瓶颈时，可以考虑优化查询语句，增加索引，拆表拆库，读写分离等手段来提升性能。

域名解析其实是一个不断递归查询的过程，查询的层数越深，解析的时间自然越长。可以考虑采用很多云厂商的 DNS 加速服务，不但可以降低时耗，还可以避免 DDos 和域名劫持等攻击。

使用 CloudFlare，Akamai 等 CDN 加速服务，其本质是提供一组分布在全球不同地理位置的服务器来存储 Web 资源的副本，这样可以极大缩短用户与服务器之间的物理距离。对于需要跨境，跨大洲的业务场景非常有帮助。

域名切片是指一组域名全部指向同一台资源服务器，前端应用请求资源时会轮训请求这些域名，借此绕开浏览器对同一域名 TCP 连接数量限制的问题。