frontend-performance-audit

name	frontend-performance-audit
description	Use when Codex needs to audit React/Vite frontend performance, bundle size, rendering, images, loading states, Core Web Vitals, large tables/lists, or UX speed in this repo.

Frontend Performance Audit

Goal

Evaluate frontend performance for React/Vite screens and produce prioritized, evidence-backed improvements for loading speed, runtime responsiveness, and user-perceived UX.

When to use

Use this skill when the user asks for frontend performance, bundle audit, Core Web Vitals, slow render, slow page load, heavy images, loading states, table/list performance, or React re-render issues.

Required steps

1. Load repo guidance and confirm frontend/ is the React source of truth.
2. Inspect:
   • frontend/package.json, vite.config.*, tailwind.config.*
   • frontend/src/app/routes.tsx
   • major pages under frontend/src/app/pages
   • shared components, hooks, API clients, query settings
   • public/static assets and image usage
3. Run safe static checks when relevant:
   • npm.cmd run typecheck
   • npm.cmd run build
   • inspect Vite output sizes and chunk warnings
4. If a local server is available or safe to start, inspect critical routes with Playwright. For Core Web Vitals, collect lab evidence only against local/dev URLs unless the user explicitly asks for a live-site check.
5. Audit for:
   • route-level code splitting opportunities
   • oversized bundles and shared chunks
   • expensive components and repeated derived work in render
   • non-virtualized large lists/tables
   • repeated API polling or duplicate queries
   • image format, dimensions, lazy/eager loading, LCP candidates
   • layout shift risks from unstable dimensions
   • loading/error/empty states that cause perceived slowness
   • unnecessary rerenders from unstable props/handlers or broad state
6. Classify all issues P0/P1/P2/P3.
7. Write the report in Vietnamese to docs/audits/frontend-performance-audit.md.

Output format

Write a Vietnamese Markdown report with:

1. Pham vi frontend da doc
2. Build va bundle evidence
3. Core Web Vitals va runtime evidence
4. Render va React performance
5. Image/static asset performance
6. Table/list/loading-state performance
7. Phat hien P0/P1/P2/P3
8. De xuat cai tien UX va toc do tai
9. Validation plan

Each finding must include path/component/route, evidence, impact, recommendation, and priority.

Quality checklist

• Do not report generic web advice without tying it to repo evidence.
• Separate bundle/load issues from runtime/render issues.
• Mention whether Core Web Vitals were measured or only statically assessed.
• Identify exact screens/routes most affected.
• Prefer low-risk lazy loading, memoization, virtualization, asset sizing, and query tuning before broad rewrites.

Safety rules

• Do not edit code during audit-only requests.
• Do not hand-edit backend/static/frontend.
• Do not run production Lighthouse or load testing unless explicitly requested.
• Do not install new dependencies just to measure unless the user approves.
• Do not expose secrets from runtime config or env files.