性能测量：Lighthouse 与核心网页指标

Lighthouse 是衡量网页性能的标准工具。您可以在 Chrome DevTools 的 Lighthouse 标签页中运行它，也可以通过 CLI 运行（npx lighthouse https://yoursite.com）。评估岛屿架构时，请在迁移前后对具有代表性的页面运行 Lighthouse，以客观量化收益。

LCP 衡量最大的可见内容元素完成渲染的时间。岛屿架构能够改善 LCP，因为服务器会立即发送已完成渲染的 HTML，浏览器无需等待 JavaScript 来渲染内容。原本会成为 LCP 的主视觉图或标题，会直接从初始 HTML 响应中绘制出来。

在 React SPA 中，LCP 往往会延迟，因为浏览器必须先下载并执行 JavaScript，React 才能渲染 LCP 元素。使用岛屿架构时，LCP 内容已经包含在初始 HTML 中，因此执行 JavaScript 不会阻塞 LCP。这是该架构最重要、最容易衡量的优势之一。

总阻塞时间用于衡量主线程被执行时间超过 50 毫秒的 JavaScript 任务阻塞了多久。为大型 React SPA 进行水合可能产生数百毫秒的 TBT。岛屿架构会大幅降低 TBT，因为执行的 JavaScript 量与岛屿数量成正比，而不是与页面大小成正比。

累积布局偏移用于衡量视觉稳定性——页面加载时元素四处移动的程度。由 JavaScript 渲染的内容可能在 React 渲染并改变尺寸时造成布局偏移。岛屿架构生成的服务器渲染 HTML 避免了与水合相关的布局偏移，因为初始布局来自静态 HTML，而这些 HTML 在水合时不会发生变化。

首次输入延迟（现已由交互到下一次绘制（INP）取代）用于衡量页面响应用户交互的速度。岛屿架构能改善 INP，因为每个岛屿都只有一个小型且专用的 JavaScript 包。岛屿内的交互执行速度很快，因为不需要让大型 React 树来调度工作。

以博客页面为例，完整 React SPA 在移动版 Lighthouse 上可能得分 45–65 分（TBT：800 毫秒，LCP：3.2 秒）。相同内容若采用带有一个 React 岛屿的 Astro 网站，得分可能为 90–98 分（TBT：80 毫秒，LCP：1.1 秒）。对于交互有限的内容密集型页面，提升最为显著。

岛屿架构并不适合仪表盘、代码编辑器或协作工具等高交互应用。这些应用中的组件会持续共享状态并一起重新渲染，而跨岛通信的开销会抵消性能收益，并增加架构复杂度。

岛屿架构非常适合交互功能分散的内容密集型网站：博客（阅读内容，偶尔点赞或评论）、文档网站（阅读文档，偶尔搜索或点击复制代码按钮）、落地页（大部分内容是静态的，仅将新闻订阅表单作为岛屿）以及电子商务产品页（图片和描述是静态的，仅将加入购物车功能作为岛屿）。

Google 使用核心网页指标（LCP、INP、CLS）作为排名信号。借助岛屿架构改善这些指标，会直接提升搜索排名。网站采用岛屿架构后，如果移动版 Lighthouse 得分从 55 提升到 92，就能同时获得用户体验和搜索引擎优化方面的好处。

从 Next.js React SPA 迁移到 Astro、用于营销和文档网站的团队报告了相似的结果：JavaScript 负载下降 70%–90%，移动端性能得分提高 20–40 分，服务器托管成本降低，因为静态文件可从 CDN 提供，无需为每个请求承担服务器端渲染开销。

为什么岛屿架构能大幅减少总阻塞时间（TBT）？

岛屿架构可以改善所有核心网页指标：服务器渲染的 HTML 有利于提升 LCP，JavaScript 量与交互程度成正比，因此 TBT 会降低；稳定的服务器渲染布局可以减少 CLS；小型且专用的岛屿包则能改善 INP。内容密集型页面的 Lighthouse 得分会大幅提升。这种模式不适合高交互应用，但非常适合博客、文档网站、落地页和电子商务网站。