Chuẩn bị

Trước khi thu thập các chỉ số hiệu suất cho quy trình kiểm tra trang web, bạn có thể thực hiện một số bước kiểm tra để xác định các bản sửa lỗi dễ thực hiện và những khía cạnh cần tập trung.

Kiểm tra tính hợp lệ: cấu trúc và mã

Trả hết nợ kỹ thuật!

Bất cứ khi nào có thể, hãy khắc phục các lỗi đơn giản và xoá các thành phần cũng như mã không cần thiết trước khi đo lường hiệu suất, nhưng hãy nhớ ghi lại vấn đề và khắc phục trước và sau khi khắc phục. Những cải tiến này vẫn có thể là một phần trong công việc kiểm tra của bạn.

Cấu trúc và thành phần trang web
Có thể dễ dàng xoá nội dung nào khỏi kho lưu trữ mã và khỏi trang web (chẳng hạn như các trang cũ, nội dung hoặc thành phần khác không dùng đến) hay không? Kiểm tra để tìm các trang đã mất nguồn gốc, mẫu thừa, hình ảnh không dùng đến cũng như mã và thư viện không sử dụng.

Lỗi thời gian chạy
Kiểm tra các lỗi được báo cáo trong bảng điều khiển của trình duyệt. Không được có bất kỳ :).

Tìm lỗi mã nguồn
Có lỗi nào trong mã HTML, CSS hoặc JavaScript của bạn không? Việc đưa công cụ tìm lỗi mã nguồn vào quy trình làm việc có thể giúp duy trì chất lượng mã và tránh sự hồi quy. Bạn nên sử dụng HTMLHint, StyleLintESLint làm trình bổ trợ trình chỉnh sửa mã hoặc chạy qua dòng lệnh trong các quy trình công việc và công cụ tích hợp liên tục như Travis.

Đường liên kết và hình ảnh bị hỏng
Có nhiều công cụ để kiểm tra các đường liên kết bị hỏng tại thời điểm xây dựng và trong thời gian chạy, trong đó có Tiện ích của Chrome (công cụ này tốt) và các công cụ Nút như Trình kiểm tra đường liên kết bị hỏng.

Trình bổ trợ
Các trình bổ trợ như Flash và Silverlight có thể gây rủi ro bảo mật, tính năng hỗ trợ cho các trình bổ trợ này đã không được dùng nữa và không hoạt động trên thiết bị di động. Sử dụng Lighthouse để kiểm tra các trình bổ trợ.

Kiểm thử với nhiều thiết bị và bối cảnh

Không gì bằng việc thu hút người dùng thực thử nghiệm trang web của bạn trên các thiết bị thực, nhiều trình duyệt và ngữ cảnh kết nối khác nhau.

Một số quy trình kiểm tra này tương đối chủ quan, nhưng có thể xác định các vấn đề ảnh hưởng đến hiệu suất cảm nhận được. Các đường liên kết bị hỏng, chẳng hạn như lãng phí thời gian và cảm thấy "không phản hồi". Văn bản không đọc được thường đọc rất chậm.

Thử nghiệm trên nhiều thiết bị
Hãy thử các kích thước cửa sổ và khung nhìn khác nhau. Sử dụng ít nhất một thiết bị di động và một thiết bị máy tính. Nếu có thể, hãy thử trang web của bạn trên một thiết bị di động thông số thấp có màn hình nhỏ. Văn bản có dễ đọc không? Có hình ảnh nào bị hỏng không? Bạn có thể thu phóng không? Đích chạm có đủ lớn không? Quảng cáo có chậm không? Có tính năng nào không phản hồi không? Chụp ảnh màn hình hoặc quay video kết quả.

Thử nghiệm trên nhiều nền tảng
Bạn nhắm đến những nền tảng nào? Bạn cần kiểm thử trên các trình duyệt và hệ điều hành mà người dùng đang sử dụng, cả ở hiện tại và trong tương lai.

Khả năng kết nối
Kiểm thử trên nhiều loại mạng mục tiêu: đã kết nối, Wi-Fi và mạng di động. Bạn có thể sử dụng các công cụ của trình duyệt để mô phỏng nhiều điều kiện mạng.

Thiết bị
Hãy nhớ dùng thử trang web của bạn trên cùng một thiết bị với người dùng. Ảnh sau đây cho thấy cùng một trang trên hai điện thoại khác nhau.

Trang bài đăng trên blog chạy trên điện thoại có thông số kỹ thuật cao

Trên màn hình lớn, văn bản nhỏ nhưng có thể đọc được. Trên màn hình nhỏ hơn, trình duyệt hiển thị bố cục chính xác, nhưng văn bản thì không đọc được, ngay cả khi đã phóng to. Màn hình bị mờ và có "đàn màu" — màu trắng chứ không phải màu trắng — khiến nội dung khó đọc hơn.

Những phát hiện đơn giản như thế này có thể quan trọng hơn nhiều so với dữ liệu hiệu suất tối nghĩa!

Dùng thử giao diện người dùng và trải nghiệm người dùng

Khả năng hỗ trợ tiếp cận, khả năng hữu dụng và tính dễ đọc
Để đảm bảo rằng mọi người đều có thể truy cập nội dung và chức năng trên trang web của mình, bạn cần hiểu rõ sự đa dạng của người dùng. Lighthouse và các công cụ khác kiểm tra các vấn đề cụ thể về hỗ trợ tiếp cận, nhưng không có gì tốt hơn thử nghiệm trong thực tế. Thử đọc, điều hướng và nhập dữ liệu trong nhiều tình huống: ví dụ: ngoài trời dưới ánh nắng hoặc trên tàu. Đề nghị nhiều bạn bè, gia đình và đồng nghiệp dùng thử trang web của bạn. Hãy thử sử dụng nội dung qua trình đọc màn hình, chẳng hạn như VoiceOver trên Mac hoặc NVDA trên Windows.

Bạn có thể tìm hiểu thêm về cách triển khai và xem xét khả năng hỗ trợ tiếp cận trong khoá học của Udacity về Hỗ trợ tiếp cận và trong bài viết Cách ôn tập về khả năng hỗ trợ tiếp cận trong bài viết Các nguyên tắc cơ bản về web.

Lưu giữ bản ghi về quá trình kiểm tra khả năng hỗ trợ tiếp cận. Có khả năng là bạn sẽ có thể thực hiện các cải tiến đơn giản tốt cho tất cả người dùng của mình.

Các vấn đề cơ bản về trải nghiệm người dùng và trải nghiệm người dùng
Các hoạt động tương tác không hoạt động như mong đợi, tràn phần tử trên cửa sổ và khung nhìn nhỏ hơn, đích nhấn quá nhỏ, nội dung không đọc được, cuộn bị giật... Mở nhiều trang trên trang web, dùng thử chức năng điều hướng và tất cả chức năng cốt lõi. Lưu giữ một bản ghi.

Hình ảnh, âm thanh và video
Kiểm thử nội dung tràn, tỷ lệ khung hình không chính xác, cắt không đúng cách và vấn đề về chất lượng.

Các bài kiểm thử mang tính chủ quan về giao diện người dùng
Một số bài kiểm thử có thể không phù hợp, nhưng bạn có thể tái cấu trúc dễ dàng hơn: những thay đổi đơn giản:

  • Câu hỏi "Tôi có thể làm gì ở đây?" ngay lập tức hiển thị rõ ràng khi bạn mở trang web?
  • Bạn có bị cuốn hút để xem nội dung và truy cập các liên kết không?
  • Có hệ phân cấp hoặc lộ trình về hình ảnh nào không hay mọi thứ đều có cùng trọng số hình ảnh?
  • Bố cục có lộn xộn không?
  • Có quá nhiều phông chữ không?
  • Có hình ảnh hoặc nội dung nào khác có thể bị xoá không?
  • Thiết kế nội dung cũng quan trọng như thiết kế giao diện. Nội dung văn bản và hình ảnh trên trang web của bạn có phù hợp với bối cảnh trên thiết bị di động và máy tính để bàn không? Có thể loại bỏ bất cứ yếu tố nào không? Viết cho thiết bị di động.