Tìm hiểu cách đảm bảo mọi người dùng có được trải nghiệm tốt nhất có thể bằng cách tối ưu hoá trang web của bạn cho những hạn chế cụ thể về phần cứng và mạng.
Khả năng của thiết bị và kết nối mạng khác nhau rất nhiều. Các trang web làm hài lòng người dùng trên thiết bị cao cấp có thể không sử dụng được trên các thiết bị cấp thấp. Các trang web tải mượt trên mạng nhanh có thể bị tạm dừng trên các trang web chậm. Bất kỳ người dùng nào cũng có thể gặp phải trang web chậm. Đó là lý do tại sao việc phát triển các giải pháp "một kích thước phù hợp với tất cả" không phải lúc nào cũng hiệu quả.
Trong bài nói chuyện của họ tại Hội nghị Nhà phát triển Chrome, Addy OSmani của Google và Nate lâum đến từ Facebook đã khám phá một giải pháp cho vấn đề đó. Đây là một mô hình để phân phối các trang phục vụ hiệu quả hơn cho nhiều quy tắc hạn chế của người dùng. Họ gọi đó là tải thích ứng.
Tải thích ứng là gì?
Tính năng Tải thích ứng liên quan đến việc mang lại nhiều trải nghiệm cho người dùng, dựa trên các hạn chế về mạng và phần cứng, cụ thể là:
Trải nghiệm cốt lõi nhanh chóng cho tất cả người dùng (bao gồm cả thiết bị cấp thấp).
Thêm dần các tính năng chỉ cao cấp nếu mạng và phần cứng của người dùng có thể xử lý được.
Bằng cách tối ưu hoá các hạn chế cụ thể về phần cứng và mạng, bạn giúp mọi người dùng có được trải nghiệm tốt nhất có thể cho thiết bị của họ. Việc điều chỉnh trải nghiệm cho phù hợp với các điều kiện ràng buộc của người dùng có thể bao gồm:
Phân phát hình ảnh và video chất lượng thấp trên mạng chậm.
Điều tiết tốc độ khung hình của ảnh động trên các thiết bị cấp thấp.
Tránh các thao tác tính toán tiêu tốn tài nguyên trên thiết bị cấp thấp.
Chặn tập lệnh của bên thứ ba trên các thiết bị chậm hơn.
Chỉ tải JavaScript không quan trọng để tương tác trên các CPU nhanh.
Hỗ trợ trình duyệt và cách triển khai tính năng tải thích ứng
Dưới đây là các tín hiệu mà bạn có thể sử dụng cho tính năng tải thích ứng. Hỗ trợ trình duyệt cũng được bao gồm cho từng tín hiệu:
Navigator.deviceMemory
Thuộc tính navigator.deviceMemory được dùng để giảm mức sử dụng bộ nhớ trên các thiết bị cấp thấp.
Navigator.hardwareConcurrency
Thuộc tính navigator.hardwareConcurrency là số lượng lõi CPU. API này dùng để hạn chế việc thực thi JavaScript tốn kém và giảm logic nặng về CPU khi một thiết bị không thể xử lý tốt.
NetworkInformation.effectiveType
Thuộc tính navigator.connection.effectiveType được dùng để tinh chỉnh quá trình truyền dữ liệu nhằm sử dụng ít băng thông hơn.
NetworkInformation.saveData
Thuộc tính navigator.connection.saveData được dùng để tận dụng các lựa chọn ưu tiên của người dùng về Trình tiết kiệm dữ liệu.
Có 2 nơi bạn có thể quyết định nội dung nào sẽ phân phát cho người dùng: ứng dụng và máy chủ. Trên ứng dụng, bạn có các API JavaScript đã nêu ở trên. Trên máy chủ, bạn có thể sử dụng gợi ý của ứng dụng để nhận thông tin chi tiết về khả năng của thiết bị của người dùng và mạng họ đang kết nối.
Tính năng Tải thích ứng trong React
React Adaptive Loading Hooks và Tiện ích là một bộ dành cho hệ sinh thái React giúp bạn dễ dàng điều chỉnh trang web của bạn cho phù hợp với các thiết bị cấp thấp hơn. Thư mục này bao gồm:
Hook
useNetworkStatus()để điều chỉnh dựa trên trạng thái mạng (slow-2g,2g,3ghoặc4g).Móc
useSaveData()để điều chỉnh dựa trên các lựa chọn ưu tiên của người dùng về Trình tiết kiệm dữ liệu.Móc
useHardwareConcurrency()để điều chỉnh dựa trên số lượng lõi xử lý CPU logic trên thiết bị của người dùng.Móc
useMemoryStatus()để điều chỉnh dựa trên bộ nhớ thiết bị (RAM) của người dùng.
Mỗi hook chấp nhận một đối số không bắt buộc để thiết lập giá trị ban đầu. Tuỳ chọn này hữu ích trong 2 trường hợp: khi trình duyệt của người dùng không hỗ trợ API liên quan và trong trường hợp hiển thị phía máy chủ, trong đó bạn có thể sử dụng dữ liệu gợi ý của ứng dụng để đặt giá trị ban đầu trên máy chủ. Ví dụ: hook useNetworkStatus() có thể sử dụng giá trị ban đầu được truyền từ gợi ý của ứng dụng khách để hiển thị phía máy chủ và khi được thực thi trên ứng dụng, tự cập nhật nếu loại hiệu quả của mạng thay đổi.
Móc tải thích ứng và tiện ích phản ứng được triển khai bằng API nền tảng web (Thông tin mạng, Bộ nhớ thiết bị và Mô hình đồng thời phần cứng). Bạn có thể sử dụng các API tương tự để áp dụng khái niệm tải thích ứng cho các khung và thư viện khác, chẳng hạn như Angular, Vue và các khung khác.
Tính năng tải thích ứng trong thực tế
Phần này khám phá các bản minh hoạ về cách bạn có thể sử dụng tính năng tải thích ứng và ví dụ thực tế từ các trang web như Facebook, eBay, Tinder và các trang web khác.
Bản minh hoạ React Phim cho biết cách điều chỉnh hoạt động phân phát nội dung nghe nhìn dựa trên trạng thái mạng. Đây là một ứng dụng để duyệt qua các bộ phim hiển thị áp phích, bản tóm tắt và danh sách diễn viên. Dựa trên loại kết nối hiệu quả của người dùng, hệ thống sẽ phân phát áp phích chất lượng cao trên kết nối nhanh và áp phích chất lượng thấp trên kết nối chậm.
Twitter có chế độ Trình tiết kiệm dữ liệu nhằm giảm lượng dữ liệu được sử dụng. Ở chế độ này, hình ảnh xem trước chỉ tải khi bạn nhấn vào bản xem trước và hình ảnh lớn có độ phân giải thấp sẽ tải. Khi bật tuỳ chọn này, người dùng trên iOS và Android tiết kiệm được 50% mức sử dụng dữ liệu từ hình ảnh và 80% người dùng trên web tiết kiệm được 80% mức sử dụng dữ liệu. Đây là bản minh hoạ React sử dụng hook Save Data (Lưu dữ liệu) để sao chép dòng thời gian trên Twitter. Hãy thử mở bảng điều khiển Mạng Công cụ cho nhà phát triển và xem sự khác biệt về lượng dữ liệu được chuyển khi bạn cuộn trong lúc tính năng Lưu dữ liệu đang tắt so với khi tính năng này được bật.
eBay bật và tắt các tính năng theo điều kiện như thu phóng khi điều kiện phần cứng hoặc mạng của người dùng không hỗ trợ tốt các tính năng đó. Bạn có thể làm được điều này thông qua tính năng phân tách mã và tải mã thích ứng – một cách để tải có điều kiện các thành phần có tính tương tác cao hơn hoặc chạy các phép tính toán nặng hơn trên thiết bị cao cấp trong khi không gửi các tập lệnh đó xuống người dùng trên các thiết bị chậm hơn. Hãy xem video ở 16 phút, trong đó Addy cho thấy mẫu này được triển khai bằng React.lazy() và Suspense trên trang minh hoạ sản phẩm của eBay.
Tinder đang sử dụng một số mẫu tải thích ứng trong web và ứng dụng Lite để mang lại trải nghiệm nhanh chóng cho mọi người. Nếu người dùng đang dùng mạng chậm hoặc đã bật Trình tiết kiệm dữ liệu, họ sẽ tắt tính năng tự động phát video, giới hạn tìm nạp trước định tuyến và giới hạn tải hình ảnh tiếp theo trong băng chuyền để tải từng hình ảnh một khi người dùng vuốt. Sau khi triển khai những hoạt động tối ưu hoá này, số lượt vuốt trung bình đã cải thiện đáng kể ở các quốc gia như Indonesia.
Tính năng Tải thích ứng trên Facebook
Một vấn đề xảy ra trong tính năng tải thích ứng là nhóm các thiết bị thành các lớp cao cấp và cấp thấp dựa trên các tín hiệu có sẵn. Trên thiết bị di động, chuỗi tác nhân người dùng (UA) cung cấp tên thiết bị cho phép Facebook sử dụng dữ liệu có sẵn công khai về các đặc điểm của thiết bị để nhóm các thiết bị di động thành các lớp. Tuy nhiên, trên các thiết bị máy tính, thông tin duy nhất liên quan mà UA cung cấp là hệ điều hành của thiết bị.
Để nhóm các thiết bị máy tính, Facebook sẽ ghi lại dữ liệu về hệ điều hành, lõi CPU (từ navigator.hardwareConcurrency) và bộ nhớ RAM (navigator.deviceMemory) để theo dõi hiệu suất. Khi xem xét mối quan hệ giữa các loại phần cứng và hiệu suất, họ đã phân loại thiết bị thành 5 danh mục. Với các lớp phần cứng được tích hợp vào việc theo dõi hiệu suất, họ sẽ hiểu rõ hơn về cách mọi người sử dụng các sản phẩm của Facebook tuỳ theo thiết bị của họ và có thể xác định lỗi hồi quy dễ dàng hơn.
Xem video tại 24 phút, trong đó Nate trình bày cách Facebook tiếp cận việc nhóm thiết bị và sử dụng tính năng tải thích ứng cho ảnh động cũng như tải JavaScript.
Tìm hiểu thêm về tính năng tải thích ứng
Tính năng Tải thích ứng đảm bảo tính toàn vẹn khi thiết kế trang web. Tạo một trải nghiệm cốt lõi phù hợp với tất cả mọi người, sau đó bật/tắt hoặc phân lớp các tính năng giúp trải nghiệm tuyệt vời hơn nữa nếu người dùng có đủ bộ nhớ, CPU hoặc mạng nhanh. Để tìm hiểu thêm về tính năng tải thích ứng, hãy xem bản minh hoạ có sẵn và xem buổi trò chuyện tại Hội nghị Nhà phát triển Chrome: