Tiêu chuẩn thiết kế website: 6 nhóm kỹ thuật cần kiểm khi nghiệm thu

Tiêu chuẩn thiết kế website là các yêu cầu kỹ thuật một website cần đạt trước khi đưa vào sử dụng, gồm sáu nhóm: bảo mật và hạ tầng, tốc độ tải trang (Core Web Vitals), hiển thị trên mọi thiết bị, SEO kỹ thuật, khả năng tiếp cận và chất lượng mã nguồn. Đây cũng là danh sách doanh nghiệp nên dùng để kiểm tra khi nghiệm thu website.

Mỗi tiêu chuẩn dưới đây có kèm cách tự kiểm tra bằng công cụ miễn phí, để bạn không phải chỉ dựa vào lời đơn vị làm web.

Vì sao cần tiêu chuẩn rõ ràng khi làm website?

Giao diện đẹp là thứ ai cũng thấy ngay, còn lỗi kỹ thuật thường chỉ lộ ra sau vài tháng: website chậm dần, không lên Google, bị chèn mã độc, form không gửi được mà không ai biết. Ghi các tiêu chuẩn dưới đây vào hợp đồng hoặc biên bản nghiệm thu giúp hai bên có cùng thước đo, và sửa ngay trong thời gian dự án luôn rẻ hơn sửa sau khi đã bàn giao.

Bài này tập trung vào tiêu chuẩn kỹ thuật. Nếu bạn muốn chấm điểm website hiện có theo góc nhìn kinh doanh (thông điệp, độ tin cậy, khả năng ra khách), hãy dùng bộ tiêu chí tự đánh giá website.

1. Bảo mật và hạ tầng

• HTTPS trên toàn bộ website: có chứng chỉ SSL hợp lệ, mọi địa chỉ http tự chuyển (301) sang https, không còn ảnh hay tệp tải qua http gây cảnh báo trên trình duyệt.
• Phần mềm được cập nhật: phiên bản ngôn ngữ máy chủ, CMS, plugin, thư viện còn được nhà phát triển hỗ trợ bản vá bảo mật.
• Trang quản trị an toàn: mật khẩu mạnh, mỗi người một tài khoản với quyền phù hợp, không dùng chung tài khoản quản trị cao nhất.
• Form chống spam: có cơ chế chặn gửi tự động (captcha hoặc tương đương) và kiểm tra dữ liệu nhập vào.
• Sao lưu định kỳ: biết rõ sao lưu bao lâu một lần, lưu ở đâu và đã thử khôi phục được chưa.

2. Tốc độ tải trang và Core Web Vitals

Core Web Vitals là bộ chỉ số Google dùng để đo trải nghiệm tải trang thực tế. Từ năm 2024, INP (Interaction to Next Paint) đã thay FID trong bộ chỉ số này. Ngưỡng "tốt" do Google công bố, đo ở 75% lượt tải trang trên cả điện thoại và máy tính:

Những việc kỹ thuật giúp đạt ngưỡng: ảnh nén và dùng định dạng hiện đại như WebP, khai báo kích thước ảnh, ảnh bên dưới màn hình đầu tải chậm (lazy-load), hạn chế mã JavaScript và plugin không cần thiết, dùng bộ nhớ đệm và hosting đủ tài nguyên. Không nên đặt một điểm số PageSpeed cố định làm điều kiện duy nhất, vì điểm thử nghiệm dao động theo mạng và thời điểm; hãy xem cả ba chỉ số trên.

3. Hiển thị tốt trên mọi thiết bị

• Bố cục responsive: tự sắp xếp lại trên điện thoại, máy tính bảng, máy tính, không phải kéo ngang.
• Chữ đọc được mà không cần phóng to; nút và liên kết đủ lớn, đủ cách nhau để bấm bằng ngón tay.
• Menu, form, bảng, giỏ hàng dùng được trên màn hình nhỏ.
• Hiển thị đúng trên các trình duyệt phổ biến: Chrome, Safari (đặc biệt trên iPhone), Edge, Firefox, Cốc Cốc.

Công cụ Mobile-Friendly Test của Google đã ngừng hoạt động từ tháng 12/2023. Hiện có thể kiểm tra bằng Lighthouse trong Chrome DevTools (chế độ thiết bị di động) và quan trọng nhất là mở thử trên vài chiếc điện thoại thật.

4. SEO kỹ thuật

SEO kỹ thuật không đảm bảo thứ hạng, nhưng thiếu nó thì nội dung tốt cũng khó được Google hiểu đúng. Các mục cần đạt:

• Mỗi trang có thẻ title và meta description riêng, đúng một thẻ H1, các thẻ H2, H3 đúng thứ bậc.
• Đường dẫn (URL) ngắn, không dấu, dễ đọc; có sitemap.xml; tệp robots.txt không chặn nhầm trang cần lên Google.
• Thẻ canonical trỏ về một phiên bản duy nhất của mỗi trang. Website chỉ nên truy cập được ở một dạng (ví dụ https và có hoặc không có www), các dạng còn lại chuyển hướng 301 về dạng chính.
• Trang 404 đúng chuẩn: địa chỉ không tồn tại phải trả mã trạng thái 404 (không trả 200), kèm trang báo lỗi thân thiện có ô tìm kiếm hoặc liên kết về trang chính.
• Khi đổi đường dẫn, đặt chuyển hướng 301 từ địa chỉ cũ sang mới.
• Dữ liệu có cấu trúc (schema) phù hợp loại trang: tổ chức, bài viết, sản phẩm, câu hỏi thường gặp; thẻ Open Graph để chia sẻ lên mạng xã hội có ảnh và tiêu đề đúng.

Danh sách đầy đủ hơn và cách Hozitech áp dụng cho từng dự án có ở trang thiết kế website chuẩn SEO.

5. Khả năng tiếp cận

Khả năng tiếp cận giúp người lớn tuổi, người dùng trình đọc màn hình hay người dùng trong điều kiện ánh sáng kém vẫn sử dụng được website. Theo hướng dẫn WCAG của W3C, chữ thường cần độ tương phản với nền tối thiểu 4,5:1. Ngoài ra:

• Ảnh mang nội dung có thuộc tính alt mô tả đúng ảnh.
• Ô nhập trong form có nhãn rõ ràng, thông báo lỗi nói cụ thể cần sửa gì.
• Có thể dùng phím Tab để đi qua menu, nút và form.
• Không truyền đạt thông tin chỉ bằng màu sắc.

6. Mã nguồn, quản trị và bàn giao

• Không có lỗi hiển thị hay lỗi JavaScript khi mở các trang chính; không còn trang mẫu, chữ mẫu, liên kết hỏng.
• Trang quản trị cho phép tự sửa nội dung, ảnh, sản phẩm mà không cần sửa mã.
• Mã nguồn được tổ chức rõ ràng, dùng nền tảng hoặc framework phổ biến để đơn vị khác có thể tiếp quản khi cần.
• Bàn giao đủ: mã nguồn, tài khoản quản trị, tài khoản tên miền và hosting, tài liệu hướng dẫn.

Nếu các khái niệm như SSL, CDN, canonical còn lạ, xem phần giải thích trong bài thuật ngữ thiết kế website.

Cách tự kiểm tra các tiêu chuẩn bằng công cụ miễn phí

Kinh nghiệm từ Hozitech

Ở Hozitech, các tiêu chuẩn trên là phần kiểm thử bắt buộc trong quy trình thiết kế website, áp dụng cho cả gói theo mẫu từ 5 triệu: hiển thị tốt trên điện thoại, heading, đường dẫn và sitemap đúng chuẩn, bàn giao mã nguồn. Website được xây dựng trên nền tảng phổ biến như Laravel hoặc WordPress để doanh nghiệp không bị phụ thuộc vào một đơn vị duy nhất.

Một điều nên nhớ: đạt chuẩn lúc bàn giao không có nghĩa là đạt chuẩn mãi. Plugin cũ đi, ảnh tải lên không nén, nội dung thêm vội có thể kéo tốc độ và bảo mật xuống dần. Nếu không có người phụ trách kỹ thuật, dịch vụ chăm sóc website giúp duy trì các tiêu chuẩn này sau bàn giao.

Bạn cần một website đạt đủ sáu nhóm tiêu chuẩn ngay từ đầu? Xem các gói và dự án tại trang dịch vụ thiết kế website trọn gói để được tư vấn phù hợp.