近期,我们将 Universe.com 主页的性能提升了十倍以上。本文将解析实现这一重大改进的具体技术手段。但在开始之前,让我们先对网络性能的重要意义进行一番论证:用户体验、客户转化与收入、搜索引擎优化(SEO)等方面都会受到显著影响。

本文将简要介绍以下几大有助于提高页面性能的主要领域:性能测量、渲染、网络、浏览器中的JavaScript。我们的主页由React(TypeScript)、Phoenix(Elixir)、Puppeteer(headless Chrome)以及GraphQL API(Ruby on Rails)构建而成。

性能测量

没有数据作为支持,一切意见都将毫无意义。我们利用实验室工具(Lighthouse)和现场工具(WebPageTest、Test My Site、PageSpeed Insights)对网站性能进行全面测试。

渲染

内容的渲染可通过服务器端渲染(SSR)、客户端渲染、预渲染等多种方式实现。我们尝试了混合方法,利用Puppeteer在构建时进行预渲染,Phoenix负责在服务器端渲染动态内容,React则在客户端实现hydration。

网络

我们选择Fastly.com作为CDN,利用VCL进行缓存与路由优化。同时,我们也探索了利用HTTP/2 Server Push以及GraphQL缓存等方法。

浏览器中的JavaScript

我们设定了JavaScript包大小预算,并采取了代码拆分、async/defer脚本加载等优化手段。图像方面,我们使用了WebP格式、延迟加载、渐进式呈现等技术。此外,资源提示(preload、prefetch、preconnect等)也发挥了重要作用。

总之,网站性能的优化是一个永无止境的过程,需要在整个技术栈中持续进行改进。希望本文提供的思路和案例能为大家带来启发和帮助。