Trong nhiều năm, các trình duyệt trên thiết bị di động đã áp dụng độ trễ từ 300 đến 350 mili giây từ touchend đến click trong khi chờ xem liệu đây có phải là thao tác nhấn đúp hay không, vì nhấn đúp là cử chỉ để phóng to văn bản.
Kể từ bản phát hành đầu tiên của Chrome dành cho Android, độ trễ này đã được gỡ bỏ nếu tính năng chụm-thu phóng cũng bị tắt. Tuy nhiên, chụm thu phóng là một tính năng hỗ trợ tiếp cận quan trọng. Kể từ Chrome 32 (trở lại năm 2014), độ trễ này đã kết thúc đối với các trang web được tối ưu hoá cho thiết bị di động mà không cần loại bỏ tính năng chụm-thu phóng! Firefox và IE/Edge cũng làm tương tự ngay sau đó, và vào tháng 3 năm 2016, một bản sửa lỗi tương tự đã xảy ra trên iOS 9.3.
Sự khác biệt về hiệu suất là rất lớn!
Nhờ có giao diện người dùng phản hồi ngay lập tức, người dùng có thể tự tin nhấn nhanh từng nút, thay vì tạm dừng và chờ phản hồi. Tìm hiểu thêm về tác động của thời gian phản ứng của con người và hiệu suất web trong phần giới thiệu về RAIL của chúng tôi.
Để loại bỏ độ trễ nhấn từ 300 đến 350 mili giây, bạn chỉ cần làm như sau trong <head> của trang:
<meta name="viewport" content="width=device-width">
Tùy chọn này đặt chiều rộng khung nhìn giống với thiết bị và thường là phương pháp hay nhất cho các trang web được tối ưu hóa cho thiết bị di động. Với thẻ này, các trình duyệt giả định rằng bạn đã làm cho văn bản có thể đọc được trên thiết bị di động, và tính năng nhấn đúp để thu phóng bị loại bỏ có lợi cho các nhấp chuột nhanh hơn.
Nếu vì lý do nào đó mà bạn không thể thực hiện thay đổi này, bạn có thể sử dụng touch-action: manipulation để đạt được hiệu quả tương tự trên trang hoặc trên các phần tử cụ thể:
html {
touch-action: manipulation;
}
Kỹ thuật này không được hỗ trợ trong Safari, vì vậy, thẻ khung nhìn được ưu tiên hơn.
Việc mất tính năng nhấn đúp để thu phóng có phải là mối lo ngại về khả năng hỗ trợ tiếp cận không?
Không. Tính năng Thu phóng bằng cử chỉ chụm vẫn hoạt động và các tính năng của hệ điều hành phục vụ cho những người dùng gặp khó khăn khi thực hiện cử chỉ này. Trên Android, cử chỉ thu phóng sẽ xử lý vấn đề này. Các công cụ như thế này thậm chí hoạt động bên ngoài trình duyệt.
Còn các trình duyệt cũ thì sao?
FastClick của FT Labs sử dụng sự kiện chạm để kích hoạt lượt nhấp nhanh hơn và loại bỏ cử chỉ nhấn đúp. Điện thoại xem khoảng thời gian ngón tay bạn đã di chuyển từ touchstart đến touchend để phân biệt các thao tác cuộn và nhấn.
Việc thêm trình nghe touchstart vào mọi thứ đều có ảnh hưởng đến hiệu suất, vì các hoạt động tương tác ở cấp thấp hơn như cuộn sẽ bị trì hoãn bằng cách gọi trình nghe để xem liệu trình nghe có event.preventDefault() hay không. Rất may, FastClick sẽ tránh cài đặt trình nghe trong trường hợp trình duyệt đã xoá độ trễ 300 mili giây, vì vậy, bạn sẽ tận dụng được cả hai!