Hero section Three.js mà không phá vỡ Core Web Vitals

Sai lầm thường gặp

Import @react-three/fiber ngay đầu một page component sẽ kéo Three.js vào bundle khởi tạo. Trình duyệt phải phân tích hàng trăm kilobyte JavaScript trước khi vẽ được dòng tiêu đề của bạn. Phần tử LCP của bạn là chữ, mà bạn lại chặn nó phía sau một thư viện đồ họa.

Tải scene sau phần chữ

Hãy render tiêu đề, mô tả và nút kêu gọi hành động dưới dạng HTML render từ server. Đặt canvas phía sau chúng, được mount bởi một client component chỉ import scene một cách động sau lần vẽ đầu tiên. Trong lúc chờ, hãy hiển thị một gradient CSS cùng dải màu — người dùng mạng chậm sẽ thấy một hero trông hoàn chỉnh, không phải một khoảng trống.

Tôn trọng thiết bị

Giới hạn device pixel ratio ở mức 1.5. Cao hơn nữa nghĩa là bạn render gấp bốn lần số điểm ảnh cho một khác biệt mà không ai nhận ra trên ảnh nền hero. Hãy kiểm tra prefers-reduced-motion và bỏ hẳn vòng lặp animation khi thiết lập này được bật — giữ lại gradient tĩnh. Với navigator.hardwareConcurrency từ 4 trở xuống, đừng mount canvas.

Ngừng render khi không ai xem

Hãy tạm dừng vòng lặp render khi canvas cuộn ra khỏi khung nhìn hoặc tab mất tiêu điểm. Một vòng lặp WebGL chạy không tải sẽ tiêu tốn pin mà không mang lại gì, và sẽ xuất hiện trong dữ liệu hiệu năng người dùng thật dưới dạng giật lag ở những trang không liên quan.

Giữ hình học đơn giản

Một hero không cần model 50.000 tam giác. Các khối đơn giản được instancing, một gradient dựng bằng shader hay một trường hạt vẫn được cảm nhận là "3D cao cấp" với chi phí chỉ bằng một phần nhỏ. Hãy dùng chung một material cho các instance và đừng bao giờ cấp phát bộ nhớ bên trong vòng lặp khung hình.

Làm theo cách này, hero 3D không tốn gì trước lần vẽ đầu tiên và chỉ thêm vài chục kilobyte sau đó — trang vẫn đạt điểm hiệu năng ở mức cao chín mươi.