IGA: 5.256 sản phẩm đổi giao diện, tốc độ điện thoại từ 61 lên 99, giữ nguyên địa chỉ trang

Thách thức

Ngày 13/10/2026 mình đo site cũ. Trang chủ trên điện thoại được 61 điểm tốc độ, và phải chờ 8,6 giây mới hiện xong phần lớn nhất của màn hình đầu (chỉ số này tên là LCP). Có bốn nguyên nhân chính: trang được dựng lại ở máy chủ mỗi lần có người vào, ảnh đầu trang không được tải sớm, nhiều đoạn mã chặn việc hiện trang, và các đoạn theo dõi của bên thứ ba tải ngay từ đầu.

Có ba ràng buộc đi kèm.

Thứ nhất, không được mất thứ hạng trên Google. Địa chỉ trang, tên menu chính và chữ chính sách phải giữ nguyên.

Thứ hai, 5.256 sản phẩm chỉ có chữ mô tả. Không có thuộc tính nào để lọc theo loại đá, kích thước hay mệnh hợp, nên khách chỉ biết xem từng trang.

Thứ ba, mô tả sản phẩm là chữ của cửa hàng. Mình không được sửa chúng để cho dữ liệu đẹp.

Cách làm

1. Đo trước khi vẽ gì

Mình chạy Lighthouse (công cụ chấm tốc độ của Google) trên 4 loại trang: trang chủ, một danh mục lớn (1.384 sản phẩm), một trang sản phẩm và một bài viết. Mỗi trang đo 3 lần liên tiếp, lấy lần giữa. Mục tiêu đặt ra: điện thoại từ 95 điểm, máy tính từ 98, độ xô lệch bố cục (CLS) dưới 0,05.

2. Dựng bộ lọc từ chữ mô tả, không đụng vào dữ liệu

Mình viết bộ đọc chữ mô tả để rút ra loại sản phẩm, loại đá, nhóm đá, kích thước, trọng lượng, xuất xứ và mệnh hợp. Bảng quy đổi nằm trong các tệp JSON, chỉnh tay được và có test kiểm tính nhất quán.

Trước khi ghi gì, mình chạy thử trên toàn bộ 5.256 sản phẩm, chỉ đọc. Mất 3,0 giây. Sau chạy thử, 9 bảng WordPress được so mã kiểm tra trước và sau: giống hệt. Kết quả: nhận ra loại sản phẩm ở 100% và loại đá ở 99,7% sản phẩm. 372 dòng không chắc chắn được dồn vào một danh sách cho người duyệt thay vì đoán, trên 280 sản phẩm (5,3%).

Riêng mệnh hợp, bảng màu ngũ hành cho 62 loại đá nằm trong đúng một tệp. Quy tắc đơn giản: mỗi màu thuộc một hành, đá hợp mệnh cùng hành và mệnh được hành đó sinh ra. Website chỉ ghi "hợp", không ghi "kỵ". Loại đá nhiều màu mà không rõ thì để trống, không đoán. Chỗ các nguồn tham khảo nói khác nhau (ví dụ màu tím thuộc hành nào) thì chọn một cách và ghi lại lý do. Nhân viên tư vấn có một trang nội bộ để chọn mệnh hợp cho từng loại đá, bấm là lưu.

3. Giao diện mới, chữ giữ nguyên

Mình thử ba hướng thiết kế rồi chọn hướng nền đen trung tính và nhấn vàng, vì giữ được màu của logo và ảnh đá nổi hơn trên nền tối. Trang chủ và các trang giới thiệu được dựng bằng một bộ khối riêng (iga/*) để nhân viên tự sửa trong trình soạn thảo, không cần nhờ lập trình.

40 trang vốn dựng bằng UX Builder của Flatsome được chuyển sang các khối mới bằng một lệnh. Lệnh so chữ trước và sau từng trang, và chỉ ghi khi khớp 100%.

4. So từng địa chỉ với site cũ

Mình lập danh sách 216 địa chỉ cố định: trang chủ, 57 danh mục, 77 sản phẩm, 25 bài viết, 20 trang, giỏ hàng, thanh toán, tìm kiếm, địa chỉ có bộ lọc, trang 404, robots và sơ đồ trang. Công cụ so từng thẻ của mỗi địa chỉ giữa site cũ và bản mới: mã trả về, tiêu đề, mô tả, thẻ canonical, thẻ robots, Open Graph, tiêu đề H1 và dữ liệu có cấu trúc.

Lần đầu công cụ báo rất nhiều chỗ lệch. Phần lớn là lệch giả do công cụ chưa đủ tinh, nhưng cũng bắt được 10 lỗi thật. Ví dụ, địa chỉ không tồn tại bị một plugin đẩy về trang chủ thay vì trả 404 thật, và mô tả ngắn của sản phẩm biến mất khỏi trang ở nhiều sản phẩm. Cả hai đều đã sửa trong theme.

Kết quả

Số đo ở đây là số đo trong phòng thí nghiệm, bằng Lighthouse 13.5.0 giả lập điện thoại và mạng chậm, lấy lần chạy ở giữa trong 3 lần. Site cũ đo ngày 13/10/2026 qua Cloudflare thật, HTML không có bộ nhớ đệm. Bản mới đo ngày 08/11/2026 ngay trên máy chủ của bản thử, có bộ nhớ đệm trang, chưa qua Cloudflare. Hai cách đo khác nhau, nên một phần chênh lệch đến từ bộ nhớ đệm và đường truyền, không phải chỉ do giao diện.

Điểm tốc độ điện thoại ở 4 loại trang đi từ 61 đến 80 lên 97 đến 100, đạt mục tiêu 95. Điểm Accessibility (dễ truy cập) đi từ 88 đến 92 lên 98 đến 100, Best Practices (làm đúng chuẩn) từ 96 lên 100. Độ xô lệch bố cục (CLS) từ 0 đến 0,02, dưới mức đặt ra. Trang danh mục lớn vẫn nặng ngang bản cũ (862 so với 846 KB) vì mỗi trang vẫn hiện 24 sản phẩm có ảnh.

Về SEO, trong 216 địa chỉ đối chiếu ngày 13/10/2026 có 4 địa chỉ khớp từng ký tự, 212 địa chỉ chỉ lệch ở chỗ có chủ đích hoặc tốt hơn site cũ, và 0 địa chỉ lệch chưa giải thích. Ví dụ "tốt hơn": site cũ in hai thẻ canonical mâu thuẫn ở các trang số 2, bản mới chỉ in một. 2.231 liên kết nội bộ được kiểm, 3 trả 404, đều nằm trong mô tả của 3 sản phẩm.

Có một việc chưa làm được. Bản mới chưa mở cho khách. Mọi số "sau" ở trên là số ở bản thử, nên khi lên site thật mình phải đo lại qua đường truyền thật, bằng cả công cụ PageSpeed công khai.

Bài học

Đo site cũ trước, rồi mới đặt mục tiêu. Nhờ có con số 61 điểm và 8,6 giây, mình biết phải giải quyết bộ nhớ đệm và ảnh đầu trang trước, thay vì chỉnh màu hay font. Cách tự kiểm tốc độ trong 5 phút mình đã viết ở bài Web chậm làm mất khách thế nào, và cách tự kiểm tốc độ trong 5 phút.

Đừng sửa dữ liệu để chiều giao diện. Bộ lọc được dựng bên cạnh mô tả, các chỗ không chắc chắn thành một danh sách cho người duyệt, và việc chạy thử chỉ đọc kèm so mã kiểm tra các bảng giúp mình yên tâm khi bấm ghi thật.

Giữ địa chỉ quan trọng hơn giao diện đẹp. Công cụ so từng thẻ của 216 địa chỉ bắt được những lỗi mà mắt người khó thấy, như canonical đôi hay H1 trùng. Phần việc chủ shop tự làm được nằm ở bài SEO cơ bản cho web bán hàng: việc chủ shop tự làm và việc cần nhờ dev.

Với chữ về cam kết và uy tín, chỉ dùng chữ đã có ở site gốc. Mình rà từng câu trong giao diện mới với trang cũ, câu nào không có thì bỏ.

Cần việc tương tự?

Nếu bạn có một cửa hàng WordPress hoặc WooCommerce đang chậm trên điện thoại, hoặc cần đổi giao diện mà không muốn mất thứ hạng, gửi mình vài dòng về site đó. Mình sẽ đo trước, lập danh sách địa chỉ cần giữ, rồi nói rõ cái nào nên đổi và cái nào nên để nguyên.