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 vấn đề dễ khắc phục 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ã
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 và mã không cần thiết trước khi đo lường hiệu suất — nhưng nhớ lưu giữ bản ghi trước và sau khi khắc phục vấn đề. 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
Bạn có thể dễ dàng xoá bất kỳ 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 không? Kiểm tra các trang không liên kết, mẫu thừa, hình ảnh không dùng đến và 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 được có lỗi nào :).
Tìm lỗi mã nguồn
Mã HTML, CSS hoặc JavaScript của bạn có lỗi không? Việc tích hợp tính năng 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 tình trạng hồi quy. Bạn nên sử 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ợ 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.
Hình ảnh và đường liên kết 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 tạo bản 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 (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òn được dùng nữa và các trình bổ trợ này 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ử trên nhiều thiết bị và ngữ cảnh
Không gì bằng việc để người dùng thực kiểm thử 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 nhận thấy. Ví dụ: đường liên kết bị hỏng sẽ làm lãng phí thời gian và khiến người dùng cảm thấy "không phản hồi". Văn bản không rõ ràng sẽ khiến người dùng đọc chậm.
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 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 có thông số kỹ thuật thấp với màn hình nhỏ. Bạn có đọc được văn bản không? Có hình ảnh nào bị hỏng không? Bạn có thể phóng to 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ả.
Kiểm thử 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 sử dụng hiện tại và trong tương lai.
Kết nối
Kiểm thử trên nhiều loại mạng mục tiêu: đã kết nối, wifi và di động. Bạn có thể sử dụng các công cụ 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ị 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.
Trên màn hình lớn hơn, văn bản có kích thước 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 không đọc được văn bản, ngay cả khi phóng to. Màn hình bị mờ và có "màu sắc" – màu trắng không trông như màu trắng – khiến nội dung khó đọc hơn.
Những phát hiện đơn giản như vậ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
Khả năng hỗ trợ tiếp cận, khả năng hữu dụng và dễ đọc
Để đảm bảo 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 gì có thể đánh bại 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 sáng mặt trời hoặc trên tàu. Yêu cầu một số bạn bè, gia đình và đồng nghiệp dùng thử trang web của bạn. Hãy thử xem nội dung thông qua trình đọc màn hình, chẳng hạn 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à đánh giá khả năng hỗ trợ tiếp cận trong khoá học của Udacity về Hỗ trợ tiếp cận và bài viết Cách đánh giá khả năng hỗ trợ tiếp cận trong phần Kiến thức cơ bản về web.
Lưu giữ hồ sơ kiểm tra khả năng hỗ trợ tiếp cận. Rất có thể bạn sẽ có thể cải thiện một cách đơ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 lượt tương tác không hoạt động như mong đợi, các thành phần tràn trên các 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… Mở nhiều trang trên trang web, thử điều hướng và tất cả chức năng cốt lõi. Ghi lại.
Hình ảnh, âm thanh và video
Kiểm tra nội dung tràn, tỷ lệ khung hình không chính xác, cắt không tốt và các vấn đề về chất lượng.
Kiểm thử giao diện người dùng chủ quan
Không phải tất cả các thay đổi này đều có liên quan, nhưng những thay đổi đơn giản có thể giúp bạn dễ dàng tái cấu trúc hơn:
- Liệu nội dung "Tôi có thể làm gì ở đây?" có rõ ràng ngay khi bạn mở trang web không?
- Bạn có muốn xem nội dung và nhấp vào đường liên kết không?
- Có hệ thống phân cấp hoặc lộ trình 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 không? Có thể loại bỏ nội dung nào không? Viết nội dung cho thiết bị di động.