Performance Checklist Dành Cho NextJS

Xây dựng ứng dụng React với NextJS là một lựa chọn tuyệt vời để nhanh chóng mang sản phẩm đến với người dùng. Tuy nhiên, nếu website của bạn quá chậm, người dùng sẽ bỏ đi. Dưới đây là danh sách các mẹo giúp cải thiện hiệu năng cho ứng dụng NextJS của bạn.

Bài viết này tập trung vào NextJS, nhưng các phương pháp này có thể áp dụng cho đa số dự án frontend hiện nay.

Hiệu Năng Ứng Dụng

• Frontend nên được cache toàn phần trên CDN nếu có thể (Jamstack)
• Trang nên được xây dựng sẵn tại thời điểm build hoặc sử dụng Incremental Static Regeneration (xem bài viết)
• Sử dụng chiến lược thay thế module khi chuyển trang nội bộ (Next/link)

Tối Ưu Hình Ảnh

• Lấy ảnh từ CDN tại thời điểm build hoặc khi người dùng yêu cầu
• Dùng ảnh đúng kích thước, đúng định dạng tối ưu (xem hướng dẫn)
• Ảnh quan trọng dùng preload (chi tiết)
• Ảnh không quan trọng dùng loading="lazy"
• Sử dụng component `` của NextJS (tài liệu)

Tối Ưu CSS

• Hạn chế dùng CSS-in-JS (phân tích)
• Chỉ gửi các style thực sự dùng (tree-shaking)
• Nếu dùng CSS-in-JS, giữ CSS càng tĩnh càng tốt (hướng dẫn)
• CSS được minify trước khi deploy

Tối Ưu Font Chữ

• Sử dụng font-display: swap để thay thế font (chi tiết)
• Tải font từ CDN
• Chỉ tải các font cần thiết
• Subset font để giảm dung lượng (xem thêm)

Tối Ưu JavaScript

• Hydrate chỉ các phần tử tương tác (Partial hydration)
• Tree-shake mã không dùng (xóa mã thừa)
• Xem xét thay React bằng Preact để giảm kích thước bundle (hướng dẫn)
• JS được minify và nén bằng Gzip hoặc Brotli
• Chia nhỏ bundle để tải hiệu quả hơn
• Dùng Web Workers cho các tác vụ nặng
• Sử dụng thư viện hiệu quả hoặc native JS (Ví dụ: Temporal API thay Moment.js)

Tối Ưu Dữ Liệu

• Chỉ fetch dữ liệu cần thiết (nên dùng GraphQL)
• Tránh gọi API chồng chéo (nên dùng GraphQL)
• Giảm tối đa bước normalize dữ liệu trên client

Script Bên Thứ Ba

• Script từ bên thứ ba nên là non-blocking (chi tiết)
• Dùng resource hinting như preconnect, dns-prefetch để tải song song

Cảm Nhận Hiệu Năng

• Hiển thị skeleton/loading state cho các thành phần đang tải
• Khi mất kết nối, thông báo người dùng và giữ trạng thái cũ (Apollo Client)
• Hiển thị trạng thái thành công ngay sau hành động, không cần chờ server phản hồi
• Tránh layout shift đột ngột
• Rút ngắn thời gian DNS và SSL handshake (tham khảo)

Kiểm Tra & Phân Tích

• PR làm giảm hiệu năng phải bị phát hiện sớm trong CI/CD
• Đo lường hiệu năng frontend thường xuyên (Speedcurve)
• Chuyển kết quả phân tích thành backlog cụ thể

Áp dụng những mẹo trên không chỉ giúp cải thiện trải nghiệm người dùng mà còn tiết kiệm chi phí hosting do băng thông, tài nguyên giảm.

Nếu bạn thấy thiếu gì, hãy chia sẻ thêm để cùng nhau tối ưu hóa hiệu năng NextJS nhé!