Hồi Sinh Tốc Độ Trang Sản Phẩm: Từ Rùa Bò Đến Tên Lửa Chỉ Sau Vài Thao Tác!

Lê Lân

15/07/2025

Tối Ưu Hiệu Suất Trang Sản Phẩm Bằng Kỹ Thuật Asynchronous Và Giảm Số Lượng Truy Vấn SQL

Mở Đầu

Bạn có từng cảm thấy khó chịu khi mở một trang web và nó cứ như thể đang tải lại từ thập niên trước? Điều đó chính xác là trải nghiệm mà chúng tôi gặp phải trên trang sản phẩm của mình.

Trong thời đại công nghệ phát triển nhanh chóng, tốc độ tải trang là yếu tố quyết định trải nghiệm người dùng và hiệu quả kinh doanh. Đặc biệt với các trang thương mại điện tử, việc hiển thị thông tin hàng tồn kho đối với từng biến thể sản phẩm là vô cùng quan trọng nhưng cũng rất dễ gây ra tắc nghẽn hiệu suất nếu không được tối ưu đúng cách. Bài viết này sẽ chia sẻ cách chúng tôi đã cải thiện hiệu năng trang sản phẩm qua việc sử dụng tải bất đồng bộ (asynchronous) và giảm thiểu số lượng truy vấn SQL đáng kể, giúp giảm thời gian phản hồi gần 85% và cải thiện trải nghiệm người dùng.

Vấn Đề Ban Đầu Với Việc Xác Thực Tồn Kho

Đồng Bộ Hóa Kiểm Tra Tồn Kho

Trước khi tối ưu, việc xác thực tồn kho cho từng biến thể sản phẩm được thực hiện theo kiểu đồng bộ (synchronous), tức là trình duyệt phải đợi lần lượt kiểm tra tồn kho của từng biến thể mới có thể hiện thị toàn bộ trang. Với những sản phẩm có nhiều biến thể (15-25), điều này khiến trang tải chậm và người dùng cảm nhận rằng trang web có hiệu năng kém.

Giới Thiệu Vấn Đề

Kiểm tra tồn kho đồng thời cho từng biến thể.

Mỗi lần tải trang kéo dài do phải chờ đợi các truy vấn tồn kho.

Trải nghiệm người dùng bị ảnh hưởng tiêu cực, dễ khiến họ bỏ trang.

Cải Thiện Đầu Tiên: Tách Biệt Asynchronous Với turbo_frame_tag

Áp Dụng Kỹ Thuật Tải Bất Đồng Bộ

Chúng tôi sử dụng turbo_frame_tag với thuộc tính src và loading: :lazy để tải phần kiểm tra tồn kho và form chọn sản phẩm bất đồng bộ so với phần nội dung chính của trang. Do đó:

Phần nội dung chính được render nhanh chóng.

Phần tải tồn kho chạy riêng, không trì hoãn việc hiển thị trang.

Cải thiện rõ rệt cảm giác tốc độ page load cho người dùng.

Lợi ích:

Tách biệt rõ ràng phần tải dữ liệu nặng

Cải thiện perception speed

Giảm tỷ lệ bounce page

Important: Việc chỉ chuyển sang tải bất đồng bộ chưa đủ để cải thiện hiệu năng tổng thể nếu truy vấn dữ liệu còn nặng nề.

Thứ Hai: Xóa Bỏ Abstractions Gây Hiệu Năng Kém

Phát Hiện Những Truy Vấn Thừa

Qua tìm hiểu, chúng tôi phát hiện rằng câu truyện “vô hại” dưới dạng:

product_variant.total_available_quantity

phía sau là:

def total_available_quantity
  Factory.total_available_quantity(finished_sku: sku)
end

và bên trong lớp Factory :

def self.total_available_quantity(finished_sku:)
  stock_skus = SkuMapper.where(finished_sku: finished_sku, enabled: true).pluck(:stock_sku)
  FactoryStock.where(stock_sku: stock_skus, enabled: true).sum(:available_quantity)
end

Vấn đề:

Mỗi biến thể chạy ít nhất 2 truy vấn.

Nếu sản phẩm có 20 biến thể, chúng ta có tới 40 truy vấn cho việc kiểm tra tồn kho.

Truy vấn lặp lại nhiều lần không hiệu quả.

Insight quan trọng: Abstraction tiện lợi nhưng nếu ẩn nhiều truy vấn thì sẽ ảnh hưởng nghiêm trọng đến hiệu suất.

Tối Ưu Truy Vấn: Tận Dụng Hash Map Để Giảm Truy Vấn SQL

Chiến Lược "Anticipate and Map"

Thay vì lặp lại truy vấn cho từng biến thể, chúng tôi:

Lấy hết tất cả finished_sku của các biến thể trên trang.

Tạo ra 2 hash map lưu trữ dữ liệu đã truy vấn:

Hash Map	Nội Dung
`{ finished_sku: stock_sku }`	Liên kết mỗi finished_sku với stock_sku trong bảng `SkuMapper`
`{ stock_sku: available_quantity }`	Liên kết stock_sku với số lượng tồn kho từ `FactoryStock`

Khi cần lấy tồn kho, chỉ cần gọi trực tiếp vào hash map thay vì thực hiện truy vấn dữ liệu.

Lợi ích:

Chuyển đổi từ truy vấn SQL sang lookup trong bộ nhớ, rất nhanh.

Giảm đáng kể số lượng truy vấn lặp lại.

Tối ưu tốc độ tận gốc.

Kết Quả Ấn Tượng Sau Khi Tối Ưu

Chỉ Số Hiệu Suất Trước Và Sau Tối Ưu

Chỉ số	Trước tối ưu	Sau tối ưu
Thời gian phản hồi (ms)	983.7	141.7
Số lượng truy vấn SQL	206	37

Hiệu Năng Trên Trang Người Dùng

Trang tải lượng thông tin chọn biến thể hiện chỉ mất khoảng 149.2 ms với chỉ 9 truy vấn SQL — con số rất ấn tượng so với trước đó.

Lời khuyên: Kết hợp giữa tải bất đồng bộ và tối ưu truy vấn là cách hiệu quả nhất để cải thiện tốc độ lớn cho các trang phức tạp.

Kết Luận

Việc cải thiện hiệu suất trang sản phẩm là một quá trình cần nhiều bước:

Tách phần tải dữ liệu phức tạp sang dạng bất đồng bộ để tăng tốc độ render.

Phát hiện và loại bỏ các abstraction gây ra nhiều truy vấn thừa thãi.

Tận dụng kiến trúc dự đoán (anticipate) và ánh xạ (map) dữ liệu để giảm thiểu truy vấn lần lượt cho từng biến thể.

Nhờ các cải tiến này, chúng tôi đã giảm thời gian tải trang xuống còn chưa tới 15% so với trước, giúp nâng cao trải nghiệm người dùng và khả năng giữ chân khách hàng. Nếu bạn đang đối mặt với tình trạng tải trang chậm do truy vấn dữ liệu phức tạp, hãy bắt đầu từ những bước đơn giản như trên.

Hãy áp dụng kỹ thuật tải dữ liệu bất đồng bộ và tối ưu truy vấn bằng mapping dữ liệu để cải thiện hiệu năng trang một cách hiệu quả nhất.

Tham Khảo

Rails Guides - Turbo Frames

New Relic Documentation - Optimizing Web Performance

Dev.to Article - Optimizing SQL Queries in Rails

Sedgewick, R. (2011). Algorithms, 4th Edition.

June 20, 2024