Trước khi thu thập các chỉ số hiệu suất để 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 điểm cần khắc phục dễ dàng và các khía cạnh cần tập trung.
Kiểm tra tính hợp lệ: Kiến trúc và mã
Bất cứ khi nào có thể, hãy sửa 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ớ lưu lại bản ghi trước và sau khi xảy ra vấn đề cũng như cách khắc phục. Những điểm 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 của 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 không, chẳng hạn như các trang, nội dung hoặc thành phần cũ không dùng đến? Kiểm tra các trang mồ côi, mẫu thừa, hình ảnh không dùng đến, cũng như mã và thư viện không dùng đến.
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 nên có bất kỳ :).
Tìm lỗi mã nguồn
Có lỗi trong mã HTML, CSS hoặc JavaScript của bạn không? Việc tích hợp quy trình 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 hồi quy. Bạn nên dùng HTMLHint, StyleLint và ESLint. Bạn có thể dùng các công cụ này làm trình bổ trợ cho trình soạn thảo mã hoặc chạy từ dòng lệnh trong quy trình làm việc và các 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 đường liên kết bị hỏng tại thời điểm xây dựng và thời gian chạy, bao gồm cả tiện ích Chrome (tiện ích này rất tốt) và các công cụ Node như Broken Link Checker (Công cụ 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 ra rủi ro bảo mật, việc hỗ trợ các trình bổ trợ này đã ngừng hoạt động và chúng không hoạt động trên thiết bị di động. Sử dụng Lighthouse để kiểm tra trình bổ trợ.
Kiểm thử trên nhiều loại thiết bị và bối cảnh
Không gì bằng việc để người dùng thực tế thử nghiệm trang web của bạn bằng thiết bị thực, nhiều trình duyệt và nhiều bối cảnh kết nối.
Một số bước 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. Ví dụ: các đường liên kết bị hỏng gây lãng phí thời gian và tạo cảm giác "không phản hồi". Văn bản khó đọc sẽ khiến người dùng mất nhiều thời gian hơn để đọc.
Kiểm thử trên nhiều thiết bị
Thử nhiều kích thước khung nhìn và cửa sổ. Sử dụng ít nhất một thiết bị di động và
một 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 có thông số kỹ thuật thấp và 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? 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 thử nghiệm trên các trình duyệt và hệ điều hành mà người dùng sử dụng 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à 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 thiết bị mà người dùng sử dụng. Ảnh sau đây cho thấy cùng một trang trên hai điện thoại khác nhau.
Trên màn hình lớn hơn, văn bản nhỏ nhưng vẫn đọ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 không đọc được, ngay cả khi phóng to. Màn hình bị mờ và có "phủ màu" (màu trắng không giống 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 khó hiểu!
Dùng thử giao diện người dùng và trải nghiệm người dùng
Hỗ trợ tiếp cận, khả năng hữu dụng và khả năng đọc
Để đảm bảo rằng mọi người đều có thể truy cập vào nội dung và chức năng của trang web, 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ề khả năng hỗ trợ tiếp cận, nhưng không có gì tốt hơn việc kiểm thử trong thực tế. Hãy 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 mặt trời hoặc trên tàu hoả. Hãy nhờ 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 thông qua trình đọc màn hình như VoiceOver trên máy 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 Udacity về Khả năng hỗ trợ tiếp cận và bài viết Cách xem xét khả năng hỗ trợ tiếp cận trong Kiến thức cơ bản về web.
Lưu lại bản ghi về quy trình kiểm tra khả năng hỗ trợ tiếp cận. Rất có thể bạn sẽ thực hiện được những điểm cải tiến đơn giản, mang lại lợi ích cho tất cả người dùng.
Các vấn đề cơ bản về giao diện 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, các phần tử bị tràn trên cửa sổ và khung nhìn nhỏ hơn, mục tiêu nhấn quá nhỏ, nội dung không đọc được, thao tác cuộn bị giật… Hãy mở nhiều trang trên trang web, thử thao tác điều hướng và tất cả chức năng cốt lõi. Lưu giữ
hồ sơ.
Hình ảnh, âm thanh và video
Kiểm tra nội dung bị tràn, tỷ lệ khung hình không chính xác,
cắt không đúng cách và các vấn đề về chất lượng.
Kiểm thử giao diện người dùng chủ quan
Những thay đổi này có thể không liên quan, nhưng những thay đổi đơn giản có thể giúp việc tái cấu trúc trở nên dễ dàng hơn:
- Bạn có hiểu ngay "Tôi có thể làm gì ở đây?" khi mở trang web không?
- Bạn có bị thu hút để xem nội dung và nhấp vào các đường liên kết không?
- Có hệ thống phân cấp hoặc đường dẫn trực quan không, hay mọi thứ đều có cùng trọng lượng thị giác?
- 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 thiết bị di động và máy tính không? Có thể loại bỏ điều gì không? Viết nội dung cho thiết bị di động.