# ✅ Checklist Production: Bento Grid Layout --- ## 📋 Tổng quan Checklist kiểm tra chất lượng trước khi deploy Bento Grid lên môi trường production. Thực hiện đầy đủ tất cả các mục để đảm bảo sản phẩm đạt chuẩn. --- ## 🎨 Visual ### Kiểm tra giao diện và hình ảnh - [ ] **Kiểm tra khoảng cách (gap) đồng đều giữa các ô** > Khoảng cách không đều gây mất cân đối thị giác, khiến layout trông lộn xộn và thiếu chuyên nghiệp. - [ ] **Xác nhận bo góc (border-radius) nhất quán trên toàn bộ grid** > Bo góc không đồng nhất phá vỡ tính thống nhất của thiết kế, ảnh hưởng trực tiếp đến cảm giác thương hiệu. - [ ] **Kiểm tra màu nền và độ tương phản văn bản đạt tỷ lệ tối thiểu 4.5:1** > Tỷ lệ tương phản thấp khiến nội dung khó đọc, đặc biệt trong điều kiện ánh sáng yếu hoặc màn hình chất lượng thấp. - [ ] **Đảm bảo hình ảnh không bị méo hoặc bị cắt sai tỷ lệ trong mọi ô** > Hình ảnh méo làm giảm uy tín thương hiệu và phá vỡ trải nghiệm người dùng ngay lần nhìn đầu tiên. - [ ] **Kiểm tra hiệu ứng hover/transition mượt mà, không bị giật lag** > Transition không mượt hoặc delay quá lâu gây cảm giác sản phẩm kém chất lượng và thiếu đầu tư kỹ thuật. --- ## 📱 Responsive ### Kiểm tra hiển thị đa thiết bị - [ ] **Kiểm tra layout tự động điều chỉnh đúng trên màn hình di động (< 768px)** > Grid nhiều cột trên desktop nếu không responsive sẽ tràn nội dung hoặc hiển thị quá nhỏ trên điện thoại. - [ ] **Xác nhận thứ tự các ô (order) hợp lý khi xuống layout 1 cột** > Nội dung ưu tiên cần hiển thị trước trên mobile; thứ tự sai logic làm người dùng bỏ lỡ thông tin quan trọng. - [ ] **Kiểm tra font-size tự scale phù hợp, không quá nhỏ hoặc quá lớn trên tablet** > Font cố định gây ra trải nghiệm đọc kém trên thiết bị trung gian, nơi breakpoint thường bị bỏ qua khi test. - [ ] **Đảm bảo các ô span đúng số cột/hàng theo từng breakpoint đã định nghĩa** > Sai span ở breakpoint cụ thể khiến ô bị vỡ layout hoặc chiếm quá nhiều/ít không gian so với thiết kế. - [ ] **Kiểm tra grid hoạt động đúng trên cả landscape và portrait của thiết bị di động** > Người dùng thường xoay màn hình; layout không xử lý landscape sẽ bị vỡ hoặc có quá nhiều khoảng trắng thừa. --- ## ♿ Accessibility ### Kiểm tra khả năng tiếp cận - [ ] **Thêm thuộc tính `alt` mô tả đầy đủ và có nghĩa cho tất cả hình ảnh trong grid** > Screen reader đọc `alt` để mô tả hình ảnh cho người dùng khiếm thị; `alt` trống hoặc chung chung làm mất ngữ cảnh hoàn toàn. - [ ] **Đảm bảo toàn bộ ô có thể điều hướng bằng phím Tab theo thứ tự logic** > Người dùng không dùng chuột phụ thuộc vào Tab navigation; thứ tự sai gây mất phương hướng và khó sử dụng. - [ ] **Kiểm tra các ô tương tác (clickable) có `role` và `aria-label` phù hợp** > Thiếu ARIA label khiến screen reader không thể thông báo mục đích của phần tử, vi phạm tiêu chuẩn WCAG 2.1. - [ ] **Xác nhận focus indicator (viền focus) hiển thị rõ ràng và không bị ẩn bởi CSS** > Ẩn outline focus là lỗi phổ biến gây khó khăn nghiêm trọng cho người dùng điều hướng bằng bàn phím. - [ ] **Kiểm tra tỷ lệ tương phản của text overlay trên hình ảnh đạt chuẩn WCAG AA** > Text trên ảnh thường thiếu tương phản do nền biến đổi; cần overlay hoặc text-shadow để đảm bảo khả năng đọc. --- ## ⚡ Performance ### Kiểm tra hiệu năng tải và render - [ ] **Tối ưu và nén tất cả hình ảnh, ưu tiên định dạng WebP hoặc AVIF** > Hình ảnh chiếm 60–80% dung lượng trang; không tối ưu sẽ làm tăng thời gian tải đáng kể, ảnh hưởng Core Web Vitals. - [ ] **Áp dụng `loading="lazy"` cho hình ảnh nằm dưới màn hình đầu tiên (below the fold)** > Lazy loading giảm số lượng request ban đầu, cải thiện LCP và tiết kiệm băng thông cho người dùng mạng chậm. - [ ] **Kiểm tra không có Cumulative Layout Shift (CLS) khi hình ảnh hoặc nội dung tải xong** > CLS cao làm trang bị nhảy lung tung trong khi tải, gây trải nghiệm tệ và bị Google giảm điểm SEO. - [ ] **Đảm bảo CSS Grid không tạo ra các layout recalculation không cần thiết khi scroll** > Recalculation liên tục trên scroll gây jank (giật hình), đặc biệt nghiêm trọng trên thiết bị cấu hình thấp. - [ ] **Kiểm tra Lighthouse Performance Score đạt tối thiểu 90 điểm trên mobile** > Điểm Lighthouse dưới 90 trên mobile cho thấy còn tồn tại bottleneck hiệu năng ảnh hưởng đến SEO và UX thực tế. --- ## 📝 Lưu ý khi deploy > **Quan trọng:** Luôn test trên thiết bị thật (không chỉ DevTools) vì browser emulation không phản ánh đầy đủ hiệu năng GPU và network thực tế của điện thoại. > Chạy lại toàn bộ checklist sau mỗi lần thay đổi lớn về layout hoặc nội dung, không chỉ check một lần duy nhất trước deploy đầu tiên. > Sử dụng môi trường staging với dữ liệu thật (hình ảnh, văn bản thực tế) thay vì placeholder để phát hiện lỗi hiển thị sát với production nhất. > Lưu lại kết quả Lighthouse và screenshot của từng breakpoint sau mỗi lần deploy để có baseline so sánh cho các lần cập nhật tiếp theo.