Bối cảnh
Tân Doanh là cửa hàng bán linh kiện máy tính và máy bộ lắp sẵn. Khách của họ thường không mua một món lẻ. Họ muốn ráp cả một cấu hình, nên cần biết món nào lắp được với món nào, nguồn có đủ khỏe không, và mỗi tháng góp bao nhiêu nếu trả góp.
Trang bán hàng tandoanh.vn trước đây chạy trên một theme cũ khá nặng, điểm tốc độ trên điện thoại thấp. Mình dựng lại giao diện thành một theme riêng cho WordPress và WooCommerce, rồi viết thêm một công cụ cho khách tự ráp cấu hình ngay trên trang. Việc bắt đầu từ ngày 30/06/2026.
Theme mới đang chạy trên tandoanh.vn. Các số đo gần nhất trong bài lấy ngày 08/11/2026.
Thách thức
Có ba việc phải làm cùng lúc, và chúng kéo nhau về hai hướng khác nhau.
Thứ nhất là tốc độ. Bản đầu tiên của theme mới đo ngày 03/07/2026 chỉ được 65 đến 77 điểm trên điện thoại tùy trang, trang chủ ở đầu thấp là 65. Phần chờ hiện hình ảnh chính của màn hình đầu dài từ 4,4 đến 12,4 giây tùy trang.
Thứ hai là một công cụ ráp cấu hình đủ tử tế. Chọn 11 loại linh kiện, kiểm tra tương thích, tính tiền, tính trả góp, rồi mua hoặc in báo giá. Mỗi bước sai là một khách bỏ đi, hoặc tệ hơn, một khách mua nhầm món không lắp được.
Thứ ba là nhân viên cửa hàng phải tự sửa được chữ và ảnh ngay trong trình soạn thảo của WordPress, thay vì gọi lập trình viên mỗi lần đổi một dòng.
Cách làm
1. Dựng lại bằng block theme
Theme mới là block theme (loại theme mà đầu trang, chân trang và mọi khung đều là các khối chỉnh được trong Site Editor của WordPress). Hơn 50 trang cũ được chuyển sang khối. Shortcode của theme cũ vẫn chạy để nội dung chưa chuyển không bị vỡ. Cả hai ngôn ngữ, tiếng Việt và tiếng Anh, được dựng ở máy chủ.
2. Đo, sửa một thứ, đo lại
Mình đo bằng PageSpeed Insights và làm theo vòng: tìm thứ nặng nhất nằm trước lúc trang hiện hình, sửa, đo lại. Những gì tìm ra ở vòng đầu:
- Thư viện reCAPTCHA (chống thư rác, 378 KB) bị nạp ở mọi trang. Giờ nó chỉ nạp ở trang liên hệ.
- Ảnh banner không có nhiều cỡ, nên điện thoại phải tải bản 1920 pixel nặng 179 KB. Mình cho ra ba cỡ để máy tự chọn.
- Ảnh chính của màn hình đầu chưa được báo trước cho trình duyệt tải sớm.
Ở vòng sau, mình thử nhét thẳng phần CSS cần cho màn hình đầu vào trang. Kết quả tệ hơn: điểm trang chủ rơi xuống 40, thời gian chặn của trình duyệt lên 3.730 mili giây, vì trang phình ra và trình duyệt tính CSS hai lần. Mình bỏ hướng đó.
Đòn quyết định lại rất giản dị: giảm số tệp font từ 20 xuống 8 (ngày 03/07/2026). Chuỗi tệp phải tải trước khi hiện chữ ngắn đi rõ rệt, điểm trang chủ nhảy một lần từ 79 lên 92 trong máy đo của mình.
3. PC Builder: một bảng cho 11 nhóm linh kiện
Công cụ ráp cấu hình là một plugin riêng. Mỗi nhóm linh kiện (CPU, mainboard, RAM, card đồ họa, ổ cứng, nguồn, vỏ, tản nhiệt, màn hình...) là một dòng trong bảng. Bấm một dòng để mở danh sách chọn, có bộ lọc giống trang danh mục. Danh sách chỉ hiện sản phẩm đang bán được, giá và tồn kho lấy từ kho thật.
Mình cẩn thận nhất ở phần tương thích. Khi chọn CPU và mainboard, công cụ so socket và loại chip điều khiển bo mạch. Khi chọn RAM, nó so loại RAM mà bo mạch hỗ trợ. Với nguồn, nó ước tính công suất cần (có chừa dư 25%) và báo nếu nguồn đã chọn thiếu.
Mình cũng bỏ một thứ đã làm sai. Ở trang máy bộ lắp sẵn, các thanh điểm hiệu năng lúc đầu là số nhân với một hệ số, không phải số đo. Ngày 04/11/2026, khi rà lại, mình thay bằng số lấy từ bảng benchmark có nguồn, ghi nguồn ngay dưới bảng, và để trống khi không có số.
4. Trả góp ngay trên cấu hình
Dưới tổng tiền có nút Tính trả góp. Khách chọn thẻ tín dụng hoặc công ty tài chính, chọn ngân hàng, rồi thấy số góp mỗi tháng, phí chuyển đổi, phí quẹt thẻ, tổng phải trả và chênh lệch so với trả thẳng. Bảng so nhanh có bốn kỳ hạn: 3, 6, 9 và 12 tháng. Phí theo từng ngân hàng được nhập trong trang quản trị, không viết cứng trong mã. Chỉ đơn từ 3 triệu đồng mới áp dụng.
Con số trả góp luôn ghi là ước tính, vì số tiền thực tùy đơn vị trả góp và kỳ hạn khách chọn.
Kết quả
Số đo ở đây là số đo trong phòng thí nghiệm của Google PageSpeed Insights, giả lập điện thoại và mạng chậm. Chúng khác dữ liệu người dùng thật và dao động vài điểm giữa các lần đo.
Đo bằng Google PageSpeed Insights, giả lập điện thoại. Trước: bản đầu của theme mới, ngày 03/07/2026 (các trang khác 65 đến 77). Sau: cũng ngày 03/07/2026, cuối vòng chỉnh thứ 25. Đo lại ngày 08/11/2026: trang chủ 93 (ba lần cùng số), trang ráp cấu hình 97, máy tính cả hai đều 100.
Đếm theo thiết lập font của theme, ngày 03/07/2026, vòng chỉnh thứ 25. Cùng lần chỉnh này, điểm trang chủ trong máy đo cục bộ nhảy từ 79 lên 92.
Đo ngày 03/07/2026 lúc làm, chưa đo lại sau đó. Là dung lượng HTML chưa nén. Số phần tử trên trang cùng lúc giảm từ 3.576 xuống 2.663.
Ngày 08/11/2026 mình đo lại: trang cấu hình PC đạt 97 trên điện thoại và 100 trên máy tính, trang chủ đạt 93 trên điện thoại và 100 trên máy tính. Độ xô lệch bố cục (CLS) giữ ở 0 hoặc gần 0.
Có một điều mình chưa làm được. Trang chủ trên điện thoại hôm nay là 93, thấp hơn 96 ngày 03/07 và thấp hơn mức 95 mình đặt. Mình chưa tìm ra nguyên nhân, và chưa dám kết luận gì từ ba lần đo cho cùng một con số.
Bài học
Đo nhiều lần rồi mới tin. Điểm PageSpeed của cùng một trang lệch được 5 điểm giữa hai lần đo, nên mình nhìn trung vị chứ không nhìn một số.
Việc nhét CSS vào trang nghe có vẻ là mẹo tốc độ chuẩn, nhưng với trang nặng nó làm tệ hơn. Mỗi mẹo phải đo trên chính trang của mình.
Con số không có nguồn thì bỏ, kể cả khi nó làm trang đẹp hơn. Thanh benchmark nhân hệ số trông rất thuyết phục, và đó chính là lý do phải gỡ nó.
Với khách mua nhiều món, công cụ nên làm hộ phần khó nhất: biết món nào lắp được với món nào. Cái đẹp của giao diện đứng sau việc đó.
Cần việc tương tự?
Nếu cửa hàng của bạn bán sản phẩm phải ghép với nhau, hoặc trang đang chậm trên điện thoại, gửi mình vài dòng về trang đó. Mình sẽ đo trước, rồi nói rõ cái nào đáng sửa và cái nào không.
