Kỹ thuật tối ưu chỉ số tốc độ tải trang (LCP, INP, CLS) cho website thương mại điện tử có trên 10.000 mã hàng SKU

Tối ưu chỉ số INP (Interaction to Next Paint): Chống đơ giao diện khi lọc sản phẩm và chọn biến thể

Từ khi Google chính thức thay thế FID bằng chỉ số INP để đo độ nhạy tương tác trong suốt vòng đời phiên truy cập, rất nhiều website thương mại điện tử lớn bị rớt hạng hiệu năng trên thiết bị di động tầm trung. Điểm nghẽn INP thường bộc lộ rõ khi khách hàng bấm vào các ô lọc thuộc tính (chọn thương hiệu, khoảng giá, kích cỡ, dung lượng) trên trang danh mục hoặc khi chuyển đổi qua lại giữa các biến thể SKU trên trang chi tiết sản phẩm.

Trên các hệ thống truyền thống hoặc SPA viết chưa tối ưu, mỗi lần người dùng bấm chọn một thuộc tính lọc, trình duyệt phải tính toán lại toàn bộ cây giao diện chứa hàng chục thẻ sản phẩm (Product Card), mỗi thẻ lại gắn kèm bộ lắng nghe sự kiện yêu thích, so sánh, xem nhanh và danh sách ảnh thu nhỏ. Khối lượng tính toán đồng bộ này tạo ra các tác vụ dài (Long Tasks trên 200ms) khóa cứng luồng chính của trình duyệt, khiến người dùng bấm vào màn hình nhưng thấy giao diện đứng im một nhịp rồi mới đổi màu.

Giải pháp kiến trúc tại Uptech là cắt giảm tối đa lượng mã JavaScript gửi xuống trình duyệt bằng cách chuyển các thẻ sản phẩm tĩnh sang React Server Components. Khi người dùng bấm vào bộ lọc hoặc chuyển biến thể, giao diện lập tức phản hồi thị giác ngay trong khung hình tiếp theo (Optimistic UI feedback dưới 30ms), trong khi quá trình tải dữ liệu danh sách mới được bọc trong cơ chế chuyển trạng thái không chặn (Non-blocking Transition). Đồng thời, các tập lệnh bên thứ ba như công cụ chat trực tuyến, bản đồ nhiệt và pixel theo dõi chuyển đổi được đẩy sang luồng Web Worker thông qua kỹ thuật cô lập luồng để không tranh chấp CPU với thao tác mua hàng.

• Giới hạn kích thước cây DOM (DOM Size): Giữ tổng số nút DOM trên một trang danh mục dưới 1.500 phần tử bằng cách hiển thị từ 20 đến 24 sản phẩm mỗi trang thay vì nhồi nhét 60 đến 100 sản phẩm.
• Trì hoãn khởi tạo thành phần ẩn (Lazy Hydration): Các hộp thoại chọn địa chỉ phường, xã, bảng hướng dẫn chọn kích cỡ (Size Chart) hay khung viết đánh giá chỉ được nạp mã thực thi khi người dùng thực sự cuộn tới hoặc nhấp mở.
• Tối ưu hóa thao tác thêm vào giỏ hàng: Cập nhật ngay số lượng trên biểu tượng giỏ hàng tại trình duyệt trong khi yêu cầu kiểm tra tồn kho chạy ngầm bất đồng bộ.

Kiến trúc phân trang và truy vấn cơ sở dữ liệu giúp giữ vững tốc độ khi quy mô SKU tăng gấp mười

Tối ưu giao diện Frontend chỉ giải quyết được một nửa bài toán Core Web Vitals; nửa còn lại nằm ở kiến trúc truy vấn dữ liệu khi khách hàng đi sâu vào các trang danh mục thứ 20, thứ 50 hoặc kết hợp đồng thời 4 đến 5 điều kiện lọc thuộc tính. Trong cơ sở dữ liệu SQL truyền thống, câu lệnh phân trang dùng từ khóa OFFSET càng lùi về các trang sau càng buộc máy chủ phải quét qua hàng chục nghìn bản ghi phía trước rồi mới bỏ đi, làm thời gian phản hồi tăng tuyến tính theo độ sâu phân trang.

Để giữ thời gian phản hồi truy vấn ổn định dưới 30ms bất kể kho hàng có 10.000 hay 200.000 SKU, hệ thống cần kết hợp phân trang dựa trên khóa chỉ mục (Keyset/Cursor Pagination) với việc đồng bộ chỉ mục tìm kiếm chuyên dụng. Các thuộc tính lọc được đánh chỉ mục đảo (Inverted Index), giúp việc lọc đồng thời theo thương hiệu, mức giá và thông số kỹ thuật trả về kết quả tức thì mà không làm tăng tải máy chủ cơ sở dữ liệu giao dịch chính.