Categories PageSpeed Insights

Tải thích ứng (Adaptive loading): cải thiện hiệu suất, tốc độ web trên các thiết bị chậm

Vài lời của người dịch: Bài viết này chứa nhiều thông tin kỹ thuật, mà để thành thạo thì chúng ta phải thực hành đào sâu nhiều. Nhưng về ý tưởng căn bản thì rất dễ hiểu. Bạn phải nắm bắt được thông tin phần cứng của thiết bị (RAM, CPU) và tốc độ kết nối mạng của người dùng để đưa ra được phiên bản ứng dụng web phù hợp với các điều kiện đó, nhằm giúp trải nghiệm là tốt nhất trong khả năng có thể.


Trong bài viết này bạn sẽ học cách đảm bảo rằng: mọi người dùng đều nhận được trải nghiệm tốt nhất có thể bằng cách tối ưu hóa trang của bạn cho phần cứng cụ thể của thiết bị và các ràng buộc, hạn chế của mạng kết nối internet.

Khả năng của thiết bị và chất lượng kết nối mạng thay đổi rất nhiều. Các trang làm hài lòng người dùng trên thiết bị phần cứng tốt (high-end) có thể không sử dụng được trên thiết bị có phần cứng yếu (low-end). Các trang mà tải mượt mà trên mạng kết nối nhanh (cáp quang) có thể trở thành ì ạch trên mạng chậm (cáp đồng hoặc 3G). Bất cứ người dùng nào cũng có thể trải nghiệm website chậm chạp, đó là lý do tại sao việc phát triển các giải pháp “một cỡ giày phù hợp cho tất cả mọi người / one-size fits all” có thể không phải lúc nào cũng hiệu quả.

Trong hội thảo của Chrome Dev Summit, Addy Osmani từ Google và Nate Schloss từ Facebook trình bày một giải pháp cho vấn đề đó- một mẫu phân phối các trang để nó phục vụ tốt hơn các hạn chế, ràng buộc đa dạng của người dùng. Họ gọi nó là tải thích ứng (adaptive loading).

Tải thích ứng là gì?

Tải thích ứng liên quan đến việc phân phối các trải nghiệm khác nhau cho người dùng khác nhau dựa trên các ràng buộc mạng và phần cứng thiết bị duyệt web của họ, cụ thể:

  • Một trải nghiệm lõi chung cho tất cả người dùng (bao gồm cả thiết bị có phần cứng thấp / low-end devices).
  • Thêm dần các tính năng cao cấp, nếu mạng và phần cứng của người dùng có thể xử lý được nó.

Bằng cách tối ưu hóa cho các ràng buộc mạng và phần cứng cụ thể, bạn cho phé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ọ. Căn chỉnh trải nghiệm cho ràng buộc của người dùng có thể bao gồm:

  • Phục vụ video và ảnh chất lượng thấp trên các mạng có kết nối chậm.
  • Điều chỉnh tốc độ khung hình (frame-rate) của hoạt ảnh (thí dụ video) trên các thiết bị có phần cứng yếu.
  • Tránh các hoạt động tính toán tốn kém trên các thiết bị phần cứng yếu.
  • Chặn các JS của bên thứ ba trên các thiết bị chậm hơn.
  • Tải các đoạn mã JavaScript không quan trọng cho mục đích tương tác chỉ với thiết bị có CPU nhanh.

Cách triển khai tải thích ứng

Các tín hiệu bạn có thể sử dụng cho tải thích ứng bao gồm:

  • Mạng (network)- để tinh chỉnh việc truyền dữ liệu cho việc sử dụng ít băng thông (thông qua navigator.connection.effectiveType). Bạn cũng có thể tận dụng các tùy chọn Data Saver của người dùng (thông qua navigator.connection.saveData);
  • Bộ nhớ (memory)- để giảm tiêu thụ bộ nhớ trên các thiết bị có phần cứng thấp (thông qua navigator.deviceMemory);
  • Số lượng lõi CPU (CPU core count)- để hạn chế ảnh hưởng của việc thực thi JavaScript và giảm logic chuyên sâu của CPU khi thiết bị không thể xử lý được chúng tốt (thông qua navigator.hardwareConcurrency).

Có hai vị trí mà bạn có thể ra quyết định về việc phục vụ cho người dùng cái gì: phía máy khách (client) và phía máy chủ (server). Trên máy khách, bạn có JavaScript API đã được lưu ý ở trên. Trên phía server, bạn có thể sử dụng client hints để hiểu sâu hơn về khả năng thiết bị của người dùng & mạng mà họ đang kết nối đến.

Tải thích ứng trong React

React Adaptive Loading Hooks & Utilities là một gói cho hệ sinh thái React làm cho việc thích ứng website của bạn cho các thiết bị có chất lượng thấp dễ dàng hơn. Nó bao gồm:

  • Hook useNetworkStatus() cho thích ứng dựa trên trạng thái mạng (slow-2g2g3g, hoặc 4g).
  • Hook useSaveData() cho việc thích ứng dựa trên tùy chọn DataSaver của người dùng.
  • Hook useHardwareConcurrency() cho việc thích ứng dựa trên số lượng lõi xử lý logic CPU trên thiết bị của người dùng.
  • Hook useMemoryStatus() cho thích ứng dựa trên bộ nhớ (RAM) thiết bị của người dùng.

Mỗi hook chấp nhận một đối số tùy chọn để đặt giá trị ban đầu. Tùy chọn này là hữu dụng trong hai kịch bản: khi trình duyệt của người dùng không hỗ trợ API liên quan và cho việc render phía máy chủ khi mà bạn có thể sử dụng dữ liệu client hint để thiết lập giá trị ban đầu trên máy chủ. Lấy ví dụ, hook useNetworkStatus() có thể sử dụng giá trị ban đầu được truyền từ client hint cho render phía máy chủ, khi thực thi trên máy khách, tự cập nhật nếu loại mạng hiệu quả thay đổi.

React Adaptive Loading Hooks & Utilities được triển khai thông qua việc sử dụng web platform APIs (Thông tin về mạng, bộ nhớ thiết bịphần cứng). Bạn có thể sử dụng cùng các APIs để áp dụng cho các ý tưởng tải thích ứng cho các framework và thư viện khác, chẳng hạn Angular, Vue, và những cái khác.

Tải thích ứng trong thực hành

Phần này khám phá các bản demo về cách sử dụng tải thích ứng và các ví dụ trong thế giới thực từ các trang như Facebook, eBay, Tinder, và những hãng khác.

Demo React Movie cho thấy cách phục vụ media dựa trên trạng thái mạng. Nó là một ứng dụng để duyệt phim- hiển thị poster, 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, nó phục vụ poster chất lượng cao trên các kết nối nhanh và poster chất lượng thấp trên kết nối chậm.

Twitter có mode Data Saver được thiết kế để giảm số lượng dữ liệu sử dụng. Trong mode này, các ảnh xem trước được tải trong độ phân giải thấp và ảnh lớn chỉ tải khi bạn nhấn vào hình xem trước. Với tùy chọn này được bật, người dùng trên iOS và Android tiết kiếm được 50% dữ liệu sử dụng từ ảnh, và người dùng trên web tiết kiệm được 80%. Dưới đây là demo React sử dụng hook Save Data để sao chép dòng thời gian Twitter. Bạn hãy thử mở panel Network DevTools và nhìn vào sự khác biệt trong lượng dữ liệu được truyền đi khi bạn cuộn chuột với chế độ Save Data được bật khác với bị tắt như thế nào.

Một screencast so sánh cuộn chuột timeline trên Twitter với chế độ Data Saver bật và tắt. Với Data Saver bật, chỉ ảnh xem trước là được tải và video không bật tự động.

eBay tùy từng điều kiện sẽ tắt bật các tính năng như zoom (phóng to ảnh) khi phần cứng hoặc điều kiện mạng không hỗ trợ chúng tốt. Bạn có thể làm được điều này thông qua việc chia tách mã thích ứng (code-splitting) và tải mã-một cách để tải có điều kiện các thành phần tương tác cao hơn hoặc chạy các hàm tính toán nặng hơn trên các thiết bị có phần cứng tốt, trong khi không gửi các đoạn mã này cho người dùng trên thiết bị chất lượng thấp. Bạn có thể xem video này tại phút thứ 16 khi Addy cho thấy mô hình này được triển khai với React.lazy() và Suspense trên trang sản phẩm demo của eBay.

Thích ứng chia mã và tải mã

P/S: Bạn có thể muốn tham khảo thêm các biện pháp tối ưu hóa toàn diện của eBay trong bài này.

Tinder sử dụng một số mẫu tải thích ứng trong trang web của nó và phiên bản rút gọn của ứng dụng để giữ trải nghiệm tốc độ cao cho tất cả mọi người. Nếu người dùng đang ở trên mạng kết nối chậm hoặc Data Saver được bật, họ sẽ vô hiệu hóa tính năng tự động bật video, giới hạn route prefetch và giới hạn tải ảnh kế tiếp trong carousel (băng chuyền) để tải các ảnh một lần vào thời điểm mà người dùng vuốt sang ảnh kế tiếp. Sau khi triển khai các tối ưu hóa này, họ đã nhận thấy cải thiện đáng kể trong số lần vuốt trung bình trong các quốc gia như Indonesia.

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

Tải thích ứng trong Facebook

Một vấn đề nảy sinh trong tải thích ứng là nhóm các thiết bị từ cao cấp đến thấp cấp dựa trên các tín hiệu có sẵn. Trên các thiết bị di động chuỗi user-agent (UA) cung cấp tên thiết bị- cái cho phép Facebook sử dụng dữ liệu công khai hiện có về các đặc tính của thiết bị để nhóm các thiết bị di động vào các phân nhóm. Tuy vậy, trên các thiết bị desktop (máy bàn) chỉ có thông tin liên quan đến UA cung cấp là hệ điều hành của thiết bị.

Đối với việc nhóm các thiết bị máy bàn, Facebook log dữ liệu từ hệ điều hành, lõi CPU (từ navigator.hardwareConcurrency) và bộ nhớ RAM (navigator.deviceMemory) trong khi theo dõi hiệu suất của chúng. Tìm kiếm mối quan hệ giữa các kiểu phần cứng khác nhau và hiệu suất, họ phân chia thiết bị thành năm nhóm. Với việc phân nhóm phần cứng tích hợp với theo dõi hiệu suất, họ có được bức tranh đầy đủ hơn về cách mọi người sử dụng các sản phẩm Facebook tùy thuộc vào thiết bị của người dùng và có thể xác định sự suy giảm dễ dàng hơn.

Xem video này tại phút thứ 24, khi Nate nói về cách Facebook tiếp cận kiểu thiết kế nhóm thiết bị cũng như sử dụng tải thích ứng cho hình ảnh động và tải JavaScript.

Học thêm về tải thích ứng

Tải thích ứng tập trung vào chuyện thiết kế website của bạn với sự cẩn trọng về chất lượng khi tính toán. Xây dựng trải nghiệm lõi hoạt động hiệu quả cho tất cả mọi người, sau đó chuyển đổi hoặc xây thêm các tính năng làm cho nó tốt hơn nếu người dùng đủ bộ nhớ, CPU, hoặc mạng có kết nối nhanh. Để học hỏi nhiều hơn về tải thích ứng, hãy xem các bản demo và xem buổi nói chuyện chuyện tại Chrome Dev Summit:

(Dịch từ bài viết: Adaptive loading: improving web performance on slow devices, tác giả: Milica Mihajlija, website: web[.]dev)

Back to Top