Hello mọi người lại là Slao đây!

🌿 Cải Thiện Hiệu Suất Trong Next.js

Khi nói về cải thiện hiệu suất, chúng ta thường xét đến 2 khía cạnh chính:

  • Perceived Performance (Hiệu Suất Cảm Nhận):

    Cảm giác trải nghiệm ứng dụng của người dùng. Điều này bị ảnh hưởng bởi các yếu tố như thời gian tải trang, animation, và trải nghiệm tổng thể.

  • Actual Performance (Hiệu Suất Thực Tế):

    Tốc độ mà ứng dụng thực sự hoạt động. Để cải thiện phần này, chúng ta cần giảm tải công việc không cần thiết cho ứng dụng.

🚀 Hiểu Rõ Next.js Bundles Hoạt Động Như Thế Nào

Khi bạn build một ứng dụng Next.js, nó sẽ tạo ra:

  • Server Bundle: Chạy trên server để render các trang (SSR).
  • Client Bundle: Là JavaScript cần thiết để chạy trên trình duyệt của người dùng.

📦 Client Bundle

  • Chia nhỏ thành các khối (Chunks): Next.js tự động phân tách code thành các khối nhỏ để tối ưu tải trang.
  • Mỗi trang có một khối riêng: Code chỉ được tải xuống nếu cần thiết.
  • Shared Code (Code Dùng Chung): Nếu nhiều trang dùng chung code, Next.js sẽ tạo các khối riêng để tái sử dụng.
  • Third-party Libraries: Các thư viện bên thứ 3 cũng được tạo thành các khối riêng. Bundle Image

⚡ JavaScript Ảnh Hưởng Tới Hiệu Suất Như Thế Nào?

Khi JavaScript được tải về trình duyệt, nó trải qua 3 bước chính:

  1. Tải Xuống (Download):

    • JS được nén để giảm kích thước.
    • Browser sẽ giải nén trước khi sử dụng.

  2. Phân Tích Cú Pháp (Parse):

    • Trình duyệt phân tích code để hiểu và thực thi.
    • Quá trình này có thể chậm trên các thiết bị yếu.

  3. Thực Thi (Execute):

    • JS thực sự được chạy và thực hiện công việc của nó.

⛔ Vấn Đề Chính:

Toàn bộ quá trình này diễn ra trên Main Thread. Khi Main Thread bận xử lý JS, các tác vụ như cập nhật UI và xử lý tương tác người dùng có thể bị chậm hoặc giật lag.

✅ Giải Pháp:

  • Giảm lượng JavaScript tải xuống.
  • Tối ưu hóa quá trình phân tích và thực thi code.
  • Tải JS hiệu quả bằng lazy loading hoặc dynamic import.

🔎 Cách Tìm Kiếm Vấn Đề Về Hiệu Suất

1. Sử Dụng PageSpeed Insights (Lighthouse)

Lighthouse cung cấp các chỉ số quan trọng như:

  • Performance Score: Điểm hiệu suất, nên đạt trên 80.
  • Total Blocking Time (TBT): Tổng thời gian Main Thread bị chặn, nên dưới 300ms.
  • JavaScript Execution Time: Thời gian thực thi JS, nên dưới 2.5s.
  • Unused JavaScript: Loại bỏ code không sử dụng để tối ưu kích thước.

Một điều thường thấy trong Next.js apps là mọi người thường đơn giản sử dụng Image Component dựa vào Lazy Loading và Async Decoding mọi lúc. Điều quan trọng là phải xem nơi hình ảnh của bạn có đang được sử dụng và liệu nó có nằm trong Viewport hay không
👉 PageSpeed Insights

👉 PageSpeed Insights
👉 PageSpeed Insights
👉 PageSpeed Insights

2. Tối Ưu Hình Ảnh

  • Next.js Image Component: Sử dụng với Lazy Loading và Async Decoding.
  • Kiểm Tra Viewport: Chỉ tải hình ảnh nếu nó nằm trong Viewport.
  • Responsive Images: Sử dụng các kích thước ảnh phù hợp với từng thiết bị.

3. Chrome DevTools

  • Performance Tab: Giúp bạn phân tích thời gian thực thi JS. Mục tiêu là giữ thời gian thực thi dưới 500ms.

👉 Pertab

  • Coverage Tab: Xem phần trăm code không sử dụng trong các chunks. Nếu hơn 30% code không được sử dụng, xem xét tối ưu. 👉 Cotab ---

4. Sử Dụng Bundle Analyzer

Next.js cung cấp Bundle Analyzer để kiểm tra kích thước bundle.

👉 analyzer

Kích thước càng to thì càng chiếm nhiều dung lượng

Dưới đây là những mục mà bạn có thể phát hiện ra nếu code mình bị chậm, hãy cùng đón xem phần 2 nhé

Cài Đặt 

bash
npm install @next/bundle-analyzer