--- title: "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" url: https://phatdev.net/vi/case-studies/iga-website lang: vi updated: 2026-11-08 alternate: en: https://phatdev.net/en/case-studies/iga-website markdown: https://phatdev.net/vi/case-studies/iga-website.md --- # 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 > Cửa hàng đá quý có hơn 5.000 sản phẩm chạy trên một giao diện nặng và chậm trên điện thoại. Mình dựng lại bằng theme và plugin riêng, giữ nguyên địa chỉ từng trang, và đo lại ở bản thử trước khi mở cho khách. - Khách hàng: IGA (Infinity Gems An Thịnh), cửa hàng đá quý - Lĩnh vực: Đá quý, đá điêu khắc và vật phẩm phong thuỷ - Năm: 2026 - Vai trò: Kế hoạch, kiến trúc và vận hành (code viết cùng Claude Code) - Thời gian: Từ 13/10/2026, đang hoàn thiện ở bản thử - Công nghệ: WordPress, WooCommerce, Block theme, PHP, WP-CLI, Lighthouse ## Kết quả chính - 61 → 99: điểm tốc độ điện thoại, site cũ so với bản mới - 5.256: sản phẩm giữ nguyên địa chỉ, sang giao diện mới - 0: địa chỉ lệch chưa giải thích, trong 216 địa chỉ đối chiếu - 62: loại đá có bảng mệnh hợp ## Bối cảnh IGA (Infinity Gems An Thịnh) bán đá quý, đá điêu khắc, trang sức và vật phẩm phong thuỷ, với hơn 5.000 sản phẩm. Khách chủ yếu mua để làm quà biếu. Ảnh sản phẩm đều là ảnh chụp thật ở cửa hàng, nên giao diện phải đẹp ngay cả với ảnh chụp tay. Site cũ chạy theme Flatsome. Trang chủ có hơn 100 ảnh. Mình dựng lại bằng một theme riêng (tên `iga`) và một plugin riêng (`iga-core`), giữ nguyên địa chỉ các trang. Bản mới đang chạy ở bản thử, còn site thật vẫn dùng giao diện cũ. Mọi con số "sau" trong bài này vì thế là số đo ở bản thử. ![Trang chủ site cũ, giao diện Flatsome, đã che logo](https://phatdev.net/uploads/case/iga-website/old-home-1440.webp) ## 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%). ![Trang danh mục vòng tay có bộ lọc theo loại đá ở cột trái](https://phatdev.net/uploads/case/iga-website/cat-filter-1440.webp) 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. ![Khối chọn đá theo mệnh trên trang chủ bản mới: năm thẻ mệnh, mỗi thẻ có các loại đá hợp và số sản phẩm](https://phatdev.net/uploads/case/iga-website/menh-block-1440.webp) ### 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%. ![Trang chủ bản mới: ảnh lớn, menu, ba cam kết, đã che logo](https://phatdev.net/uploads/case/iga-website/new-home-1440.webp) ### 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. ![Sơ đồ ba việc chạy song song: dữ liệu, giao diện và SEO, mỗi việc có đầu vào, việc đã làm và cách kiểm](https://phatdev.net/uploads/case/iga-website/pipeline-vi-1920.webp) 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 độ trên điện thoại** | Chỉ số | Trước | Sau | | --- | --- | --- | | Trang chủ | 61 | 99 | | Danh mục lớn (1.384 sản phẩm) | 68 | 100 | | Trang sản phẩm | 74 | 97 | | Bài viết | 80 | 100 | **Thời gian hiện phần lớn nhất của màn hình đầu (LCP)** | Chỉ số | Trước | Sau | | --- | --- | --- | | Trang chủ | 8.58 giây | 1.65 giây | | Danh mục lớn | 5.59 giây | 1.74 giây | | Trang sản phẩm | 4.37 giây | 2.48 giây | | Bài viết | 3.69 giây | 1.5 giây | **Dung lượng phải tải** | Chỉ số | Trước | Sau | | --- | --- | --- | | Trang chủ | 1304 KB | 612 KB | | Danh mục lớn | 846 KB | 862 KB | | Trang sản phẩm | 643 KB | 480 KB | | Bài viết | 575 KB | 120 KB | Đ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. ![Trang chủ bản mới](https://phatdev.net/uploads/case/iga-website/m-home-780.webp) ![Danh mục Hốc đá thạch anh tím](https://phatdev.net/uploads/case/iga-website/m-cat-780.webp) ![Trang sản phẩm có video](https://phatdev.net/uploads/case/iga-website/m-pdp-780.webp) 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](https://phatdev.net/vi/blog/page-speed-and-sales). Đừ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](https://phatdev.net/vi/blog/seo-basics-online-shop). 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. - Xem trang dự án: https://phatdev.net/vi/projects/iga.md ## Case study khác - [Tân Doanh: theme riêng, công cụ ráp cấu hình PC và tính trả góp, PageSpeed điện thoại từ 65 lên 96](https://phatdev.net/vi/case-studies/tandoanh-theme-buildpc.md) - [phatdev.net: tốc độ điện thoại từ 95 lên 99 điểm và nội dung mở cho cả người lẫn AI đọc](https://phatdev.net/vi/case-studies/phatdev-net-speed-and-ai.md) - [PixGamma: phóng ảnh AI trên Mac, sai lệch kết cấu 0,084 thay vì 0,152, chữ đọc đúng 91%](https://phatdev.net/vi/case-studies/pixgamma-macos-upscale.md)