| name | obbo-page-load-optimization |
| description | Use when optimizing page load speed, hydration cost, bundle size, render blocking, or preserving component behavior while reducing time to first paint. |
OBBO Page Load Optimization
Use this skill when improving load speed without changing visible behavior.
Inputs to Check First
Workflow
- Preserve behavior first; optimize implementation, not product decisions.
- Prefer server components and route-level data loading over client hydration when the UI does not need client state.
- Keep client islands small; move non-interactive content out of
"use client" files when possible.
- Defer non-critical visuals and animation-heavy sections until after above-the-fold content is ready.
- Prefer
next/image, next/font, and static assets already in public/ over new runtime work.
- Split large pages into route-local components only when it reduces the client bundle or hydration cost.
- Avoid adding new dependencies or memoization unless the slowed path justifies it.
- Keep skeletons, placeholders, and lazy loading behavior visually equivalent to the original UI.
Done Criteria
- Visible behavior stays the same.
- Initial load work is smaller or deferred.
- Client-side JavaScript is reduced where possible.
- Validation uses
npm run lint and npm run build when the change could affect production rendering.
