让网页安静下来：从减少一次等待开始

最近重新整理个人网站时，我给自己定了一个很小的目标：打开一篇文章之后，读者应当可以直接开始阅读，而不是先等待页面准备好。

这听起来理所当然，但我们很容易把“功能已经能用”误认为“体验已经完成”。导航能点、图片能显示、动画能播放，并不意味着页面适合阅读。

先观察，再动手

我通常先打开浏览器的网络面板，模拟较慢的网络，然后刷新页面。此时不要急着关注某个分数，而是观察：标题何时出现？正文出现后是否跳动？必须等哪些请求完成，读者才能开始读？

这些观察会把抽象的“网站有点慢”，变成具体的问题。

观察到的现象	可能的原因	第一步尝试
标题迟迟不出现	字体或脚本阻塞	使用系统字体，减少首屏脚本
图片加载后正文下移	没有预留尺寸	明确图片宽高
点击后没有反馈	客户端工作过重	减少不必要的交互代码

让静态内容保持简单

对于博客，标题、日期和正文在发布时就已经确定。把这些工作放在构建阶段，通常比每次访问时重新计算更合适。

左侧多张网页与脚本、图片交织，经过一条简化的路径，右侧只留下清晰的阅读页面。 — 把复杂留在构建时，让阅读从一张清晰的页面开始。

app/posts/page.tsx

export default function PostsPage() {
  const posts = getPublishedPosts();
 
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>{post.title}</li>
      ))}
    </ul>
  );
}