上线前检查：20 项网站速度

vibe coding 做完的网站，上线前让 Opus 5.5 派 4 个 subagent 分头把这 20 件拖慢它的事查一遍，再一次修好：

图片和字体
- 所有图片转成 WebP 或 AVIF，尺寸按它在页面上实际显示的大小来
- 大图放 Supabase Storage，通过 next/image 按合适尺寸输出。用 Pro 套餐的话，Supabase 自带的图片转换也行
- 首屏以下的图片和视频懒加载，页面顶部的大图优先加载
- 字体按框架的方式加载（Next.js 里用 next/font），只用一到两种字体
- 删掉用不到的第三方脚本，统计和客服聊天组件等页面加载完再运行

前端代码
- 跑一遍 bundle analyzer 找出最大的包，整个库引进来的地方只引用到的部分，比如单个 lodash 函数
- 首屏用不到的重组件，比如图表、编辑器和地图，用 dynamic import 在需要时再加载
- 首页数据在服务端取好，页面打开时就带着内容
- AI 的回答边生成边流式输出
- 数据还在加载时显示骨架屏

数据库和接口
- 给用来筛选和排序的列加索引，包括 RLS 策略里用到的列，比如 user_id
- RLS 策略里把 auth.uid() 写成 (select auth.uid())，这样每次查询只跑一次
- 找出 N+1 查询，合并成一条
- 长列表分页
- 对所有人都一样的接口响应加缓存，和登录用户相关的一律不缓存
- 发邮件、处理图片、生成报表这类重活挪到后台任务

服务器和网络
- 服务端函数和数据库放在同一个区域。新建的 Vercel 项目默认在 US East 跑函数
- 内容很少变的页面改成静态页面或 ISR
- 一个页面接连调用好几个接口时，改成并行，或者合并成一个
- 在 Chrome 里模拟低端 Android 手机和慢速 4G，把主要流程点一遍

默认的 medium 推理强度就够了。数据库那组要读查询、决定加哪些索引，单独调到 high。

把这整条发给 Claude Code，需要的话，最后再加上这句 👇
「每一组派一个 subagent 去查，只查不改，每个问题写清在哪个文件、影响哪个页面。数据库那组的 subagent 调到 high effort。改动之前，先跑一次生产构建（Next.js 里是 next build && next start）或者用预览链接，在首页和最慢的两三个页面上用手机模式各跑三次 Lighthouse，记下中位数。然后照它们的清单统一修，修完用同样的方法再测一遍，给我修改前后的数字。别为了速度删功能。删依赖、改部署区域、改数据库之前先问我。」