Tìm hiểu về băng thông thấp và độ trễ cao

Điều quan trọng là bạn phải hiểu được người dùng sẽ cảm thấy như thế nào khi sử dụng ứng dụng hoặc trang web khi kết nối kém hoặc không ổn định và xây dựng ứng dụng sao cho phù hợp. Có một loạt công cụ có thể giúp bạn.

Kiểm thử với băng thông thấp và độ trễ cao

Tỷ lệ người dùng sử dụng web trên thiết bị di động ngày càng tăng. Ngay cả ở nhà, nhiều người đang từ bỏ băng thông cố định để chuyển sang băng thông di động.

Trong bối cảnh này, điều quan trọng là bạn phải hiểu rõ trải nghiệm sử dụng ứng dụng hoặc trang web của mình khi kết nối kém hoặc không đáng tin cậy. Một loạt công cụ phần mềm có thể giúp bạn mô phỏng và 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 trang web, bạn phải đảm bảo hiệu suất đầy đủ trong nhiều điều kiện kết nối. Có một số công cụ có thể giúp bạn khắc phục vấn đề này.

Công cụ của trình duyệt

Công cụ của Chrome cho nhà phát triển cho phép bạn kiểm thử trang web bằng nhiều tốc độ tải lên/tải xuống và thời gian truyền dữ liệu qua lại, bằng cách sử dụng các chế độ cài đặt trước hoặc chế độ cài đặt tuỳ chỉnh trong bảng điều khiển Mạng. Hãy xem Bắt đầu sử dụng tính năng Phân tích hiệu suất mạng để tìm hiểu những kiến thức cơ bản.

Chế độ điều tiết trong Công cụ của Chrome cho nhà phát triển

Công cụ hệ thống

Network Link Conditioner là 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 (Công cụ IO phần cứng) cho Xcode:

Bảng điều khiển Trình điều chỉnh đường liên kết mạng của Mac

Chế độ cài đặt Trình điều chỉnh đường liên kết mạng của máy Mac

Chế độ cài đặt tuỳ chỉnh của Trình điều chỉnh đường liên kết mạng trên máy Mac

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:

Trình mô phỏng Android

Cài đặt Trình mô phỏng Android

Đối với iPhone, bạn có thể dùng Network Link Conditioner để mô phỏng các điều kiện mạng yếu (xem ở trên).

Kiểm thử ở 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 bộ 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ể 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ế độ cài đặt WebPagetest

Hãy chọn một vị trí, rồi chọn loại kết nối trong phần cài đặt nâng cao. Bạn thậm chí có thể tự động kiểm thử bằng cách sử dụng tập lệnh (ví dụ: để đăng nhập vào một trang web) hoặc sử dụng API RESTful. Đ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ợ tính năng proxy toàn cầu thông qua GeoEdge và bạn có thể sử dụng các quy tắc tuỳ chỉnh của công cụ này để mô phỏng tốc độ modem:

Proxy Fiddler

Kiểm thử trên mạng bị suy yếu

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à tình trạng mất gói dữ liệu ngẫu nhiên. Proxy dùng chung hoặc mạng có vấn đề có thể cho phép một nhóm các nhà phát triển kết hợp quy trình kiểm thử mạng thực tế vào quy trình làm việc của họ.

Hệ thống kiểm soát lưu lượng truy cập gia tăng (ATC) của Facebook là một bộ ứ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 yếu:

Tính năng Kiểm soát lưu lượng truy cập nâng cao của Facebook

Facebook thậm chí còn thiết lập 2G Tuesdays (Thứ ba về 2G) để tìm hiểu cách người dùng mạng 2G sử dụng sản phẩm của họ. Vào thứ Ba, nhân viên sẽ nhận được 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ể sử 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í.

Chế độ cài đặt băng thông và độ trễ của proxy Charles

Bạn có thể xem thêm thông tin về Charles tại codewithchris.com.

Xử lý khả năng kết nối không đáng tin cậy và "wifi ảo"

Lie-fi là gì?

Thuật ngữ lie-fi (wifi ảo) có từ ít nhất là năm 2008 (khi điện thoại có hình dáng như đây) và đề cập đến khả năng kết nối không như vẻ ngoài. Trình duyệt của bạn hoạt động như thể trình duyệt có kết nối, nhưng vì bất kỳ lý do gì mà trình duyệt không hoạt động.

Việc diễn giải 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 tiếp tục cố gắng truy xuất tài nguyên thay vì bỏ cuộc và chọn một phương án dự phòng hợp lý. Lie-fi thực sự còn tệ hơn chế độ ngoại tuyến; ít nhất là nếu một thiết bị chắc chắn không kết nối mạng, JavaScript của bạn có thể thực hiện hành động né tránh thích hợp.

Lie-fi có thể trở thành 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 sử dụng Internet băng thông cố định. Dữ liệu gần đây của Cục Thống kê Dân số Hoa Kỳ cho thấy việc ngừng sử dụng băng thông rộng cố định. Biểu đồ sau đây cho thấy tình hình sử dụng Internet di động tại nhà trong năm 2015 so với năm 2013:

Biểu đồ từ dữ liệu điều tra dân số của Hoa Kỳ cho thấy việc chuyển sang sử dụng băng thông rộng di động thay vì băng thông rộng cố định, đặc biệt là ở các hộ gia đình có thu nhập thấp hơn

Sử dụng thời gian chờ để xử lý tình trạng kết nối không ổn định

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 worker 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ị 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 APIStreams API sẽ giúp ích bằng cách 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 giải quyết tình trạng mạng giả mạo trong bài viết Tăng tốc tải trang.

Phản hồi