Bối cảnh
Store tandoanh.vn chạy theme cũ nặng, PSI thấp. Dự án dựng lại thành block theme FSE, ưu tiên tốc độ và trải nghiệm mua PC.
Phân tích các hạng mục
Block theme FSE
Header, footer, template đều là block chỉnh trong Site Editor; i18n VI/EN render tại server.
Hiệu năng (PSI-first)
Critical CSS tách đúng, subset font khớp metrics chống CLS, WebP + lazy, gỡ script thừa; tối ưu PSI-first (số đo thực tế bên dưới).
WooCommerce
Card sản phẩm, PDP, tab hiệu năng/gaming, trả góp native, checkout tùy biến.
Mirror real-time
Đồng bộ sản phẩm/giá/tồn từ production về staging tức thì (push-on-save + reconcile fingerprint).
Giao diện — Dark mode
Dark/light bám thiết bị, chuyển mượt, giữ nhận diện thương hiệu.
Tính năng nổi bật
Tab Hiệu năng AI (PDP)
Biểu đồ so sánh sức mạnh AI / render (OctaneBench, V-Ray) của sản phẩm với các card cùng dòng — dữ liệu benchmark thật.
Live search
Gõ tới đâu gợi ý sản phẩm tới đó (tên · giá · ảnh), tổng hợp kết quả tức thì.
Bộ lọc AJAX
Lọc theo thương hiệu, khoảng giá, khuyến mãi… cập nhật lưới sản phẩm không tải lại trang.
Xuất hoá đơn VAT công ty
Ngay tại checkout: nhập mã số thuế → tra cứu tự động tên & địa chỉ công ty, gửi hoá đơn điện tử qua email.
Hiệu năng đo thực tế (PSI)
Google PageSpeed — đo 12/07/2026:
- Mobile 91 · LCP 3.0s · CLS 0.001
- Desktop 97 · LCP 0.7s · CLS 0.002
Số lab dao động do PSI đo từ máy chủ nước ngoài + throttle mạng.
So sánh với theme thương mại phổ biến
| Tính năng | Tân Doanh | Flatsome | WoodMart |
|---|---|---|---|
| Kiến trúc | FSE block theme (WP chuẩn mới) | UX Builder | Elementor / WPBakery |
| Cấu hình PC (PC Builder) tích hợp | ✓ | ✗ | ✗ |
| Đồng bộ sản phẩm real-time từ production | ✓ | ✗ | ✗ |
| Tab hiệu năng AI / game trong trang SP | ✓ | ✗ | ✗ |
| Checkout xuất VAT công ty (tra MST) | ✓ | ✗ | ✗ |
| PSI mobile / desktop | 93-99 / 100 | ~70-85 | ~70-85 |
| Redis object cache + tinh chỉnh Nginx | ✓ | ~ | ~ |
Không dùng page-builder nặng — tối ưu tay theo Core Web Vitals, thêm các tính năng thương mại riêng.