Điều quan trọng là bạn phải hiểu được cảm giác khi sử dụng ứng dụng hoặc trang web của bạn khi kết nối kém hoặc không ổn định, từ đó xây dựng cho phù hợp. Có nhiều công cụ có thể giúp bạn.
Thử nghiệm với băng thông thấp và độ trễ cao
Tỷ lệ người dùng trải nghiệm web trên thiết bị di động ngày càng tăng. Ngay cả khi ở nhà, nhiều người cũng đang chuyển từ băng thông rộng cố định sang băng thông rộng di động.
Trong bối cảnh này, bạn cần hiểu rõ cảm giác khi sử dụng ứng dụng hoặc trang web của bạn khi kết nối kém hoặc không ổn định. Một loạt công cụ phần mềm có thể giúp bạn mô phỏng băng thông thấp và độ trễ cao.
Mô phỏng tính năng hạn chế băng thông mạng
Khi xây dựng hoặc cập nhật một trang web, bạn phải đảm bảo hiệu suất phù hợp trong nhiều điều kiện kết nối. Một số công cụ có thể giúp ích cho bạn.
Công cụ trình duyệt
Chrome DevTools cho phép bạn kiểm thử trang web của mình với nhiều tốc độ tải lên/tải xuống và thời gian khứ hồi, sử dụng các chế độ đặt sẵn hoặc tuỳ chỉnh trong Bảng điều khiển mạng. Hãy xem bài viết Bắt đầu phân tích hiệu suất mạng để tìm hiểu thông tin cơ bản.
Công cụ hệ thống
Network Link Conditioner là một bảng điều khiển lựa chọn ưu tiên có trên máy Mac nếu bạn cài đặt Hardware IO Tools cho Xcode:
Mô phỏng thiết bị
Trình mô phỏng Android cho phép bạn mô phỏng nhiều điều kiện mạng trong khi chạy ứng dụng (bao gồm cả trình duyệt web và ứng dụng web kết hợp) trên Android:
Đối với iPhone, bạn có thể sử dụng Network Link Conditioner để mô phỏng các điều kiện mạng bị suy giảm (xem ở trên).
Kiểm thử từ nhiều vị trí và mạng
Hiệu suất kết nối phụ thuộc vào vị trí máy chủ cũng như loại mạng.
WebPagetest là một dịch vụ trực tuyến cho phép chạy một loạt kiểm thử hiệu suất cho trang web của bạn bằng nhiều mạng và vị trí lưu trữ. Ví dụ: bạn có thể dùng thử trang web của mình từ một máy chủ ở Ấn Độ trên mạng 2G hoặc qua cáp từ một thành phố ở Hoa Kỳ.
Chọn một vị trí và trong phần cài đặt nâng cao, hãy chọn một loại kết nối. Bạn thậm chí có thể tự động hoá quy trình kiểm thử bằng tập lệnh (ví dụ: để đăng nhập vào một trang web) hoặc bằng API RESTful của các công cụ này. Điều này giúp bạn đưa hoạt động kiểm thử khả năng kết nối vào quy trình xây dựng hoặc ghi nhật ký hiệu suất.
Fiddler hỗ trợ Proxy chung thông qua GeoEdge và bạn có thể sử dụng các quy tắc tuỳ chỉnh của Fiddler để mô phỏng tốc độ modem:
Kiểm thử trên mạng bị suy giảm
Proxy phần mềm và phần cứng cho phép bạn mô phỏng các điều kiện mạng di động có vấn đề, chẳng hạn như điều tiết băng thông, độ trễ gói và mất gói ngẫu nhiên. Proxy dùng chung hoặc mạng bị suy giảm có thể giúp một nhóm nhà phát triển kết hợp thử nghiệm mạng thực tế vào quy trình làm việc của họ.
Augmented Traffic Control (ATC) của Facebook là một tập hợp các ứng dụng được cấp phép BSD, có thể dùng để định hình lưu lượng truy cập và mô phỏng các điều kiện mạng bị suy giảm:
Facebook thậm chí còn tổ chức Thứ Ba 2G để giúp hiểu cách mọi người trên 2G sử dụng sản phẩm của họ. Vào thứ Ba, nhân viên sẽ thấy một cửa sổ bật lên cho phép họ mô phỏng kết nối 2G.
Bạn có thể dùng proxy HTTP/HTTPS Charles để điều chỉnh băng thông và độ trễ. Charles là phần mềm thương mại, nhưng có bản dùng thử miễn phí.
Bạn có thể xem thêm thông tin về Charles trên codewithchris.com.
Xử lý kết nối không ổn định và "lie-fi"
Lie-fi là gì?
Thuật ngữ lie-fi xuất hiện ít nhất là từ năm 2008 (khi điện thoại trông như thế này) và dùng để chỉ khả năng kết nối không như mong đợi. Trình duyệt của bạn hoạt động như thể có kết nối, nhưng vì lý do nào đó, trình duyệt lại không có kết nối.
Việc hiểu sai khả năng kết nối có thể dẫn đến trải nghiệm kém vì trình duyệt (hoặc JavaScript) vẫn cố gắng truy xuất tài nguyên thay vì từ bỏ và chọn một phương án dự phòng hợp lý. Lie-fi thực sự có thể tệ hơn khi không có mạng; ít nhất là nếu một thiết bị chắc chắn không có mạng, thì JavaScript của bạn có thể thực hiện hành động né tránh thích hợp.
Lie-fi có khả năng trở thành một vấn đề lớn hơn khi ngày càng có nhiều người chuyển sang sử dụng thiết bị di động và không dùng băng thông rộng cố định nữa. Dữ liệu điều tra dân số gần đây của Hoa Kỳ cho thấy xu hướng chuyển dịch khỏi băng thông rộng cố định. Biểu đồ sau đây cho thấy mức sử dụng Internet di động tại nhà vào năm 2015 so với năm 2013:
Sử dụng thời gian chờ để xử lý tình trạng kết nối không liên tục
Trước đây, các phương thức hacky sử dụng XHR đã được dùng để kiểm tra khả năng kết nối không liên tục, nhưng trình chạy dịch vụ cho phép các phương thức đáng tin cậy hơn để đặt thời gian chờ mạng. Bạn có thể thực hiện việc này bằng cách sử dụng Workbox chỉ với một vài dòng mã:
workboxSW.router.registerRoute(
'/path/to/image',
workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);
Bạn có thể tìm hiểu thêm về Workbox trong bài nói chuyện của Jeff Posnick tại Hội nghị thượng đỉnh nhà phát triển Chrome, Workbox: Thư viện PWA linh hoạt.
Chức năng hết thời gian chờ cũng đang được phát triển cho Fetch API và Streams API sẽ giúp tối ưu hoá việc phân phối nội dung và tránh các yêu cầu nguyên khối. Jake Archibald cung cấp thêm thông tin chi tiết về cách xử lý lie-fi trong bài viết Tăng tốc độ tải trang.