Mahiro-Blog 新手教程（八）：图片与性能优化基础

性能优化很容易被神化，其实新手只要做好几件事，体验就会明显提升。

这一篇专注“性价比最高”的优化动作。

1. 图片是性能第一大头

建议优先做：

1. 控制首屏图尺寸
2. 优先使用 WebP
3. 避免一次塞入太多大图

在内容站里，图片通常决定了首屏速度上限。

2. 构建链中的图片处理

当前项目有图片相关脚本（例如水印、格式处理）并集成在构建流程里。

你要做的是：

• 改图后跑一次 pnpm build
• 检查页面实际加载的资源体积

不要只看源码图片大小，要看浏览器真实下载大小。

3. 常见性能问题与处理

3.1 首屏加载慢

优先检查：

• Banner 是否用超大图
• 首页是否一次渲染过多卡片
• 是否存在阻塞型第三方脚本

3.2 页面滚动掉帧

优先检查：

• 同屏动画是否过多
• 是否重复绑定滚动事件
• 是否有高频重排样式

3.3 移动端卡顿

优先处理：

• 减少阴影/模糊等重绘开销
• 缩短动画时长
• 保留必要交互，减少炫技动效

4. 一个新手可执行的优化清单

每次发布前，你可以快速看这 8 项：

1. 首屏主图是否过大
2. 是否出现无意义大 GIF
3. 动画是否对移动端过重
4. 关键页面在弱网下是否可读
5. 页面切换是否平滑
6. 搜索是否可用
7. 评论组件是否阻塞首屏
8. 构建产物是否正常

5. 优化顺序建议

按收益排序，建议这样做：

1. 先优化图片
2. 再优化脚本加载顺序
3. 最后优化动效细节

因为图片优化往往是“立竿见影”。

6. 系列收官建议

到这里，新手教程链路就完整了：

• 理解项目
• 跑通开发
• 改配置
• 写内容
• 改主题
• 学部署
• 会自动化
• 做性能

你已经具备独立维护一套博客系统的基本能力。

系列导航

新手专栏目录入口