ReactKhi trang web load chậm, cần debug có hệ thống từ tổng quan đến chi tiết. Bước đầu tiên mở Chrome DevTools tab Network để xem waterfall — tìm các file quá lớn, requests bị blocking, hoặc API response chậm.
Tiếp theo chạy Lighthouse audit để nhận danh sách cụ thể các vấn đề cần khắc phục kèm mức độ ưu tiên. Sau đó dùng tab Performance để record và tìm long tasks (>50ms) gây block main thread, layout thrashing, hoặc excessive reflows. Cuối cùng chạy bundle analyzer để phát hiện dependencies nặng có thể thay thế hoặc lazy load.
Thứ tự fix nên theo impact: tối ưu critical rendering path trước, rồi code splitting, image optimization bằng format WebP/AVIF, và cuối cùng là caching strategy.
Debug systematically from high-level to detail.
- First, open Chrome DevTools Network tab to see the waterfall — find oversized files, blocking requests, or slow API responses.
- Next, run a Lighthouse audit for a prioritized list of specific issues.
- Then use the Performance tab to record and identify long tasks (>50ms) blocking the main thread, layout thrashing, or excessive reflows.
- Finally, run a bundle analyzer (webpack-bundle-analyzer or Vite plugin) to spot heavy dependencies that can be replaced or lazy-loaded.
- Fix in order of impact: optimize the critical rendering path first, then code splitting, image optimization (WebP/AVIF), and finally caching strategy.