Tải thích ứng: cải thiện hiệu suất web trên các thiết bị chậm

Tìm hiểu cách đảm bảo mọi người dùng đều 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 các 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 rất khác nhau. Những 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 thiết bị cấp thấp. Các trang web tải mượt mà trên mạng nhanh có thể bị dừng trên mạng chậm. Bất kỳ người dùng nào cũng có thể gặp phải một trang web chậm. Đó là lý do tại sao việc phát triển các giải pháp "phù hợp với mọi trường hợp" không phải lúc nào cũng hiệu quả.

Trong bài phát biểu tại Hội nghị Nhà phát triển Chrome, Addy Osmani làm việc tại Google và Nate Miguel của Facebook đã khám phá một giải pháp cho vấn đề đó – một hình mẫu để phân phối các trang phù hợp hơn với nhiều quy tắc hạn chế của người dùng. Họ gọi đó là tải thích ứng.

Tính năng tải thích ứng là gì?

Tính năng tải thích ứng bao gồm việc phân phối nhiều trải nghiệm cho nhiều người dùng dựa trên các hạn chế về mạng và phần cứng của họ, cụ thể:

• 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ỉ dành cho thiết bị 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á cho những hạn chế cụ thể về phần cứng và mạng, bạn tạo điều kiện cho mọi người dùng đều 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 quy tắc 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 thiết bị cấp thấp.

• Tránh các phép toán tốn kém 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ị có tốc độ chậm hơn.

• Chỉ tải JavaScript không quan trọng cho tính tương tác trên 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 để tải thích ứng. Hỗ trợ trình duyệt cũng được cung cấp 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õi CPU. Phương thức này được dùng để giới hạn việc thực thi JavaScript tốn kém và giảm logic sử dụng nhiều CPU khi 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 chuyể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 lựa chọn ưu tiên của người dùng về Trình tiết kiệm dữ liệu.

Có hai nơi bạn có thể đưa ra quyết định về nội dung 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 được ghi chú ở trên. Trên máy chủ, bạn có thể sử dụng gợi ý cho máy khách để biết thông tin chi tiết về chức năng của thiết bị của người dùng và mạng mà họ đang kết nối.

Tải thích ứng trong React

React Adaptive Loading Hooks &Tiện ích là một bộ công cụ cho hệ sinh thái React giúp dễ dàng điều chỉnh trang web của mình cho phù hợp với các thiết bị cấp thấp. Thư mục này bao gồm:

• Lệnh gọi useNetworkStatus() để điều chỉnh dựa trên trạng thái mạng (slow-2g, 2g, 3g hoặc 4g).

• Lệnh gọi useSaveData() để điều chỉnh dựa trên các tuỳ chọn của người dùng về tính năng Trình tiết kiệm dữ liệu.

• Lệnh gọi useHardwareConcurrency() để điều chỉnh dựa trên số lượng nhân 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 lệnh gọi lại chấp nhận một đối số không bắt buộc để đặt giá trị ban đầu. Tuỳ chọn này sẽ hữu ích trong hai trường hợp: khi trình duyệt của người dùng không hỗ trợ API liên quan và để kết xuất phía máy chủ, trong đó bạn có thể sử dụng dữ liệu gợi ý ứng dụng để đặt giá trị ban đầu trên máy chủ. Ví dụ: trình bổ trợ useNetworkStatus() có thể sử dụng giá trị ban đầu được truyền từ gợi ý của ứng dụng để hiển thị phía máy chủ và khi được thực thi trên ứng dụng, trình bổ trợ này sẽ tự cập nhật nếu loại hiệu quả mạng thay đổi.

Các tiện ích và trình bổ trợ tải thích ứng của React được triển khai bằng các API nền tảng web (Thông tin mạng, Bộ nhớ thiết bị và Đồng thời phần cứng). Bạn có thể sử dụng cùng một API để áp dụng các 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ả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à các 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 Movie cho biết cách điều chỉnh việc 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 phim hiển thị áp phích, bản tóm tắt và danh sách truyền. Dựa trên loại kết nối hiệu quả của người dùng, công cụ này sẽ phân phát áp phích chất lượng cao trên các kết nối nhanh và áp phích chất lượng thấp trên các kết nối chậm.

Twitter có chế độ Trình tiết kiệm dữ liệu được thiết kế để giảm lượng dữ liệu được sử dụng. Ở chế độ này, hình ảnh xem trước sẽ tải ở độ phân giải thấp và hình ảnh lớn chỉ tải khi bạn nhấn vào bản xem trước. 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à người dùng trên web đã tiết kiệm được 80%. Đây là bản minh hoạ React sử dụng hook Save Data để sao chép dòng thời gian của Twitter. Hãy thử mở bảng điều khiển Mạng trong 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 khi tính năng Lưu dữ liệu bị 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 như thu phóng theo điều kiện khi phần cứng hoặc điều kiện 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 code-splitting 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 nặng hơn trên thiết bị cao cấp, đồng thời 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 tại 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 sản phẩm minh hoạ của eBay.

Tinder đang sử dụng một số mẫu tải thích ứng trong trang web và ứng dụng Lite để mang đến 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ải trước tuyến và giới hạn việc tải hình ảnh tiếp theo trong băng chuyền thành tải từng hình ảnh khi người dùng vuốt. Sau khi triển khai những phương pháp tối ưu hoá này, số lần vuốt trung bình của họ đã cải thiện đáng kể ở các quốc gia như Indonesia.

Tải thích ứng trên Facebook

Một vấn đề xảy ra trong quá trình tải thích ứng là việc 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 user-agent (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 có 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 ghi lại dữ liệu về hệ điều hành, lõi CPU (từ navigator.hardwareConcurrency) và bộ nhớ RAM (navigator.deviceMemory) vào phần 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. Khi các lớp phần cứng được tích hợp vào tính năng giám sát hiệu suất, họ sẽ có được thông tin đầy đủ hơn về cách mọi người sử dụng các sản phẩm của Facebook tuỳ thuộc vào thiết bị của họ và có thể dễ dàng xác định các trường hợp hồi quy hơn.

Hãy xem video ở 24 phút, trong đó Nate sẽ hướng dẫn 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

Mục đích của tính năng Tải thích ứng là khi thiết kế trang web có tính đến sự hoà nhập. Xây dựng một trải nghiệm cốt lõi phù hợp với mọi người, sau đó bật hoặc xếp chồng các tính năng giúp trải nghiệm trở nên tuyệt vời hơn 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 bài nói chuyện trong Hội nghị dành cho nhà phát triển Chrome: