为什么做
作为一个取悦自己的个人记录网站。
我希望它看起来更像一个“长期可用的工具入口”,而不是临时拼出来的展示页。
因此这次优化的核心,是让它更稳定、更干净、更符合我对“可靠个人工具”的审美和标准。
做了什么
性能层面:更轻、更稳、更可控
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”
- 重新定义服务描述的语气(从“能做什么”到“如何解决问题”)
- 联系区从“随便聊聊”变成“建立可靠工具的合作语气”
现在的状态
这次优化的结果是更轻、更稳、更清晰,也更贴近“取悦自己”的初衷:
- 首屏更少的同步加载
- 动效对低性能和偏好更加友好
- 文案对齐新定位,信息层级更清楚