Leon . Kang
Back to articles
Performance 2/3/2026 7 min read

一次围绕“可靠个人工具”的个人站点优化记录

为什么做

作为一个取悦自己的个人记录网站
我希望它看起来更像一个“长期可用的工具入口”,而不是临时拼出来的展示页。
因此这次优化的核心,是让它更稳定、更干净、更符合我对“可靠个人工具”的审美和标准。

做了什么

性能层面:更轻、更稳、更可控

1) 路由级懒加载

Resume / Bio / BlogList / BlogDetail 改为懒加载,减少首屏包体与无关页面的加载成本。

2) Blog 高亮库延迟加载

react-syntax-highlighter 体积较大,改为按需加载:只有当文章出现代码块时才加载高亮与样式,避免普通文章拖慢首屏。

3) 动效降级策略

针对 prefers-reduced-motion

  • 粒子背景:直接关闭
  • 打字机动效:保持静态文本

这样既尊重系统偏好,也降低低端设备的渲染负担。

4) 图片默认 lazy/async

统一 RTImage 默认 loading="lazy"decoding="async",头像等首屏资源再手动设置 eager

UI 结构:更清晰的定位与信息层级

1) 首屏信息结构重排

  • 新增一句定位型 tagline
  • 增加 3 条“原则/偏好”式信息块
  • typewriter 的内容从“技能标签”转向“可靠性定位”

2) Experience 增补成果线索

在时间轴中补充 2–3 条“长期维护/可靠性”相关的工作重点,让经历不只是年限和职位。

  • 构建并持续维护产品级应用,以长期稳定性为核心考量。
  • 通过校验与边界情况处理,提升面向用户流程中的数据可靠性。
  • 与设计和后端协作,在规模化场景下交付可维护的功能。

3) Services 文案重新对齐

从“技术类别”走向“解决问题方式”,强调数据可靠性与长期维护能力。

文案与定位统一(三语同步)

所有核心文案在 EN / zh-CN / ja 三语中同步调整,关键点:

  • 统一强调 “reliable personal tools”
  • 重新定义服务描述的语气(从“能做什么”到“如何解决问题”)
  • 联系区从“随便聊聊”变成“建立可靠工具的合作语气”

现在的状态

这次优化的结果是更轻、更稳、更清晰,也更贴近“取悦自己”的初衷:

  • 首屏更少的同步加载
  • 动效对低性能和偏好更加友好
  • 文案对齐新定位,信息层级更清楚