适合优化的网站

最近，我们将 Universe.com 主页的性能提升了十倍以上。在本文中，我们将解析实现这一重大改进的具体技术手段。但在开始之前，让我们先对网络性能的重要意义进行一番论证（博文末尾提供相关案例研究链接）：    用户体验: 糟糕的性能可能导致响应失败，从 UI 与 UX 的角度来看，这可能会引发用户的沮丧情绪。    客户转化与收入: 网站速度缓慢通常会导致客户流失，并对转化率与收入产生负面影响。    SEO: 从 2019 年 7 月 1 日开始，谷歌公司开始在全部新网站上默认启用移动优先索引。如果网站在移动设备上运行缓慢，且没有针对移动设备进行内容格式调整，那么网站的搜索排名将会降低。在本篇文章中，我们将简要介绍以下几大有助于我们提高页面性能的主要领域：    性能测量: 实验室与现场工具测量。    渲染: 客户端与服务器端渲染、预渲染以及混合渲染方法。    网络: CDN、缓存、GraphQL 缓存、编码、HTTP/2 以及 Server Push。    浏览器中的 JavaScript: 数据包大小预算、代码拆分、async 与 defer 脚本、图像优化（WebP、延迟加载、渐进式设计）以及资源提示（preload、prefetch 与 preconnect）。这里再介绍一点我们的情况：我们的主页由 React（TypeScript）、Phoenix（Elixir）、Puppeteer（headless Chrome）以及 GraphQL API（Ruby on Rails）构建而成。