Trang này được dịch bởi Cloud Translation API.

Cung cấp các ứng dụng nhanh và nhẹ nhờ tính năng tiết kiệm dữ liệu

Dave Gash

Ilya Grigorik

Jeremy Wagner

Tiêu đề yêu cầu gợi ý ứng dụng khách Save-Data có trong các trình duyệt Chrome, Opera và Yandex cho phép nhà phát triển phân phối các ứng dụng nhẹ hơn, nhanh hơn cho những người dùng chọn tham gia chế độ tiết kiệm dữ liệu trong trình duyệt của họ.

Nhu cầu cho các trang gọn nhẹ

Số liệu thống kê về Weblight

Mọi người đều đồng ý rằng trang web nhanh và nhẹ hơn mang lại trải nghiệm người dùng thoả mãn hơn, giúp nội dung hiểu rõ hơn và giữ chân người dùng tốt hơn, đồng thời tăng số lượt chuyển đổi và doanh thu. Nghiên cứu của Google cho thấy rằng "...các trang được tối ưu hoá tải nhanh hơn gấp 4 lần so với trang gốc và sử dụng ít số byte hơn 80%. Vì những trang này tải nhanh hơn rất nhiều, nên chúng tôi cũng nhận thấy lưu lượng truy cập vào các trang này tăng 50%."

Mặc dù số lượng kết nối 2G cuối cùng đã bị từ chối, nhưng trong năm 2015, 2G vẫn là công nghệ mạng nổi bật nhất. Mức độ thâm nhập và khả năng sử dụng mạng 3G và 4G đang phát triển nhanh chóng, nhưng chi phí sở hữu liên quan và những hạn chế về mạng vẫn là một yếu tố quan trọng đối với hàng trăm triệu người dùng.

Đây là những đối số mạnh mẽ cho việc tối ưu hoá trang.

Có nhiều phương pháp thay thế để cải thiện tốc độ trang web mà không cần sự tham gia trực tiếp của nhà phát triển, chẳng hạn như trình duyệt proxy và dịch vụ chuyển mã. Tuy khá phổ biến, nhưng các dịch vụ như vậy vẫn có những hạn chế đáng kể – nén văn bản và hình ảnh đơn giản (và đôi khi không được chấp nhận), không thể xử lý các trang bảo mật (HTTPS), chỉ tối ưu hoá các trang được truy cập qua kết quả tìm kiếm, v.v. Chính mức độ phổ biến của các dịch vụ này tự nó là một chỉ báo cho thấy nhà phát triển web chưa đáp ứng đúng nhu cầu cao của người dùng về các ứng dụng cũng như trang nhanh và nhẹ. Tuy nhiên, để đạt được mục tiêu đó là một con đường phức tạp và đôi khi khó khăn.

Tiêu đề của yêu cầu `Save-Data`

Một kỹ thuật khá đơn giản là để trình duyệt trợ giúp bằng cách sử dụng tiêu đề của yêu cầu Save-Data. Bằng cách xác định tiêu đề này, một trang web có thể tuỳ chỉnh và cung cấp trải nghiệm người dùng được tối ưu hoá cho những người dùng bị ràng buộc về chi phí và hiệu suất.

Các trình duyệt được hỗ trợ (bên dưới) cho phép người dùng bật *chế độ tiết kiệm dữ liệu – chế độ này cho phép trình duyệt áp dụng một tập hợp các biện pháp tối ưu hoá nhằm giảm lượng dữ liệu cần thiết để hiển thị trang. Khi tính năng này hiển thị hoặc được quảng cáo, trình duyệt có thể yêu cầu hình ảnh có độ phân giải thấp hơn, trì hoãn việc tải một số tài nguyên hoặc định tuyến các yêu cầu thông qua một dịch vụ áp dụng các phương thức tối ưu hoá khác dành riêng cho nội dung, chẳng hạn như nén tài nguyên hình ảnh và văn bản.

Hỗ trợ trình duyệt

Chrome 49+ quảng cáo Save-Data khi người dùng bật lựa chọn "Trình tiết kiệm dữ liệu" trên thiết bị di động hoặc tiện ích "Trình tiết kiệm dữ liệu" trên trình duyệt dành cho máy tính.
Opera 35+ sẽ quảng cáo Save-Data khi người dùng bật chế độ "OperaTurbo" trên máy tính hoặc tuỳ chọn "Tiết kiệm dữ liệu" trên trình duyệt Android.
Yandex 16.2+ sẽ quảng cáo Save-Data khi chế độ Turbo được bật trên máy tính hoặc trình duyệt dành cho thiết bị di động.

Đang phát hiện chế độ cài đặt `Save-Data`

Để xác định thời điểm mang lại trải nghiệm "nhẹ" cho người dùng, ứng dụng của bạn có thể kiểm tra tiêu đề yêu cầu gợi ý của ứng dụng Save-Data. Tiêu đề yêu cầu này cho biết ứng dụng muốn giảm mức sử dụng dữ liệu do chi phí truyền cao, tốc độ kết nối chậm hoặc vì lý do khác.

Khi người dùng bật chế độ tiết kiệm dữ liệu trong trình duyệt, trình duyệt sẽ thêm tiêu đề của yêu cầu Save-Data vào tất cả các yêu cầu gửi đi (cả HTTP và HTTPS). Tại thời điểm viết bài này, trình duyệt chỉ quảng cáo một mã thông báo *on- trong tiêu đề (Save-Data: on), nhưng trong tương lai, mã thông báo này có thể được mở rộng để cho biết các lựa chọn ưu tiên khác của người dùng.

Ngoài ra, bạn có thể phát hiện xem Save-Data có được bật trong JavaScript hay không:

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

Việc kiểm tra sự hiện diện của đối tượng connection trong đối tượng navigator là rất quan trọng, vì đối tượng này đại diện cho API thông tin mạng (chỉ được triển khai trong các trình duyệt Chrome, Chrome dành cho Android và Internet của Samsung). Từ đó, bạn chỉ cần kiểm tra xem navigator.connection.saveData có bằng true hay không là bạn có thể triển khai mọi thao tác tiết kiệm dữ liệu trong điều kiện đó.

Tiêu đề Save-Data hiển thị trong Công cụ cho nhà phát triển của Chrome được hình ảnh cùng với tiện ích Trình tiết kiệm dữ liệu. — Bật tiện ích Trình tiết kiệm dữ liệu trong trình duyệt Chrome trên máy tính.

Nếu sử dụng một trình chạy dịch vụ, ứng dụng của bạn có thể kiểm tra các tiêu đề của yêu cầu và áp dụng logic có liên quan để tối ưu hoá trải nghiệm. Ngoài ra, máy chủ có thể tìm kiếm các lựa chọn ưu tiên được quảng cáo trong tiêu đề của yêu cầu Save-Data và trả về một phản hồi thay thế – mã đánh dấu khác, hình ảnh và video nhỏ hơn, v.v.

Các mẹo và phương pháp triển khai hay nhất

Khi sử dụng Save-Data, hãy cung cấp một số thiết bị giao diện người dùng hỗ trợ giao diện người dùng và cho phép người dùng dễ dàng chuyển đổi giữa các trải nghiệm. Ví dụ:
- Thông báo cho người dùng rằng Save-Data được hỗ trợ và khuyến khích họ sử dụng ứng dụng này.
- Cho phép người dùng xác định và chọn chế độ bằng các lời nhắc thích hợp cũng như các nút hoặc hộp đánh dấu bật/tắt trực quan.
- Khi bạn chọn chế độ tiết kiệm dữ liệu, hãy thông báo và đưa ra cách tắt dễ dàng và rõ ràng để tắt chế độ này và quay lại trải nghiệm đầy đủ nếu muốn.
Hãy nhớ rằng ứng dụng gọn nhẹ không phải là ứng dụng ít quan trọng hơn. Họ không bỏ qua chức năng hoặc dữ liệu quan trọng mà chỉ hiểu rõ hơn về các chi phí liên quan và trải nghiệm người dùng. Ví dụ:
- Ứng dụng thư viện ảnh có thể cung cấp bản xem trước có độ phân giải thấp hơn hoặc sử dụng cơ chế băng chuyền ít tốn nhiều mã hơn.
- Ứng dụng tìm kiếm có thể mỗi lần trả về ít kết quả hơn, giới hạn số lượng kết quả chứa nhiều nội dung nghe nhìn hoặc giảm số lượng phần phụ thuộc cần thiết để hiển thị trang.
- Trang web dành cho tin tức có thể hiển thị ít tin bài hơn, bỏ qua các danh mục ít phổ biến hoặc cung cấp bản xem trước nội dung nghe nhìn nhỏ hơn.
Cung cấp logic máy chủ để kiểm tra tiêu đề của yêu cầu Save-Data và cân nhắc cung cấp một phản hồi thay thế, nhẹ hơn khi trang này được bật – ví dụ: giảm số lượng tài nguyên và phần phụ thuộc cần thiết, áp dụng việc nén tài nguyên linh hoạt hơn, v.v.
- Nếu bạn đang phân phát một phản hồi thay thế dựa trên tiêu đề Save-Data, hãy nhớ thêm tiêu đề đó vào danh sách Vary – Vary: Save-Data – để cho bộ nhớ đệm cấp nguồn biết rằng chúng nên lưu vào bộ nhớ đệm và chỉ phân phát phiên bản này khi có tiêu đề yêu cầu Save-Data. Để biết thêm thông tin chi tiết, hãy xem các phương pháp hay nhất để tương tác với bộ nhớ đệm.
Nếu bạn sử dụng trình chạy dịch vụ, thì ứng dụng của bạn có thể phát hiện thời điểm bật tuỳ chọn tiết kiệm dữ liệu bằng cách kiểm tra sự hiện diện của tiêu đề yêu cầu Save-Data hoặc bằng cách kiểm tra giá trị của thuộc tính navigator.connection.saveData. Nếu bật, hãy cân nhắc xem bạn có thể viết lại yêu cầu để tìm nạp ít byte hơn hoặc sử dụng một phản hồi đã tìm nạp hay không.
Hãy cân nhắc tăng cường Save-Data bằng các tín hiệu khác, chẳng hạn như thông tin về loại kết nối và công nghệ của người dùng (xem API NetInfo). Ví dụ: có thể bạn muốn cung cấp trải nghiệm gọn nhẹ cho bất kỳ người dùng nào sử dụng kết nối 2G ngay cả khi Save-Data chưa được bật. Ngược lại, việc người dùng đang sử dụng kết nối 4G "nhanh" không có nghĩa là họ không muốn tiết kiệm dữ liệu, chẳng hạn như khi chuyển vùng. Ngoài ra, bạn có thể tăng cường sự hiện diện của Save-Data bằng gợi ý của ứng dụng Device-Memory để điều chỉnh thêm cho phù hợp với người dùng trên các thiết bị có bộ nhớ hạn chế. Bộ nhớ thiết bị của người dùng cũng được quảng cáo trong gợi ý ứng dụng navigator.deviceMemory.

Recipe

Những gì bạn có thể đạt được thông qua Save-Data chỉ bị giới hạn ở những điều bạn có thể nghĩ ra. Để giúp bạn hình dung được những điều có thể thực hiện, hãy xem qua một số trường hợp sử dụng. Bạn có thể nghĩ ra các trường hợp sử dụng khác của mình khi đọc tài liệu này, vì vậy, hãy cứ thoải mái thử nghiệm và xem khả năng của mình!

Đang kiểm tra `Save-Data` trong mã phía máy chủ

Mặc dù trạng thái Save-Data là thứ bạn có thể phát hiện trong JavaScript thông qua thuộc tính navigator.connection.saveData, nhưng đôi khi bạn nên phát hiện trạng thái này ở phía máy chủ. JavaScript có thể không thực thi trong một số trường hợp. Ngoài ra, tính năng phát hiện phía máy chủ là cách duy nhất để sửa đổi mã đánh dấu trước khi gửi đến ứng dụng. Việc này có liên quan đến một số trường hợp sử dụng có lợi nhất cho Save-Data.

Cú pháp cụ thể để phát hiện tiêu đề Save-Data trong mã phía máy chủ phụ thuộc vào ngôn ngữ sử dụng, nhưng ý tưởng cơ bản phải giống nhau đối với mọi phần phụ trợ của ứng dụng. Ví dụ: trong PHP, tiêu đề của yêu cầu được lưu trữ trong mảng siêu toàn cầu $_SERVER tại các chỉ mục bắt đầu bằng HTTP_. Điều này có nghĩa là bạn có thể phát hiện tiêu đề Save-Data bằng cách kiểm tra sự tồn tại và giá trị của biến $_SERVER["HTTP_SAVE_DATA"] như sau:

// false by default.
$saveData = false;

// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` detected!
  $saveData = true;
}

Nếu bạn thực hiện bước kiểm tra này trước khi gửi bất kỳ mã đánh dấu nào đến ứng dụng, thì biến $saveData sẽ chứa trạng thái Save-Data và có thể sử dụng ở mọi nơi trên trang. Với cơ chế được minh hoạ này, hãy xem một vài ví dụ về cách chúng ta có thể sử dụng cơ chế này để giới hạn lượng dữ liệu chúng ta gửi cho người dùng.

Phân phát hình ảnh có độ phân giải thấp cho màn hình có độ phân giải cao

Có một trường hợp sử dụng phổ biến cho hình ảnh trên web: phân phát hình ảnh theo nhóm hai: Một hình ảnh cho màn hình "tiêu chuẩn" (1x) và một hình ảnh khác lớn gấp đôi (2x) cho màn hình có độ phân giải cao (ví dụ: Màn hình retina). Loại màn hình có độ phân giải cao này không nhất thiết chỉ giới hạn ở các thiết bị cao cấp và đang ngày càng trở nên phổ biến. Trong trường hợp ưu tiên trải nghiệm ứng dụng nhẹ hơn, bạn nên gửi hình ảnh có độ phân giải thấp hơn (1x) tới các màn hình này, thay vì các biến thể lớn hơn (2x). Để đạt được điều này khi có tiêu đề Save-Data, chúng ta chỉ cần sửa đổi mã đánh dấu mà chúng tôi gửi tới ứng dụng:

if ($saveData === true) {
  // Send a low-resolution version of the image for clients specifying `Save-Data`.
  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
  // Send the usual assets for everyone else.
  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}

Trường hợp sử dụng này là một ví dụ hoàn hảo về việc tốn ít công sức để thích ứng với một người cụ thể yêu cầu bạn gửi cho họ ít dữ liệu hơn. Nếu không thích sửa đổi mã đánh dấu trên phần phụ trợ, bạn cũng có thể đạt được kết quả tương tự bằng cách sử dụng mô-đun ghi lại URL, chẳng hạn như Apache'smod_rewrite. Có ví dụ về cách đạt được điều này với cấu hình tương đối ít.

Bạn cũng có thể mở rộng khái niệm này cho các thuộc tính background-image của CSS bằng cách chỉ cần thêm một lớp vào phần tử <html>:

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

Từ đây, bạn có thể nhắm đến lớp save-data trên phần tử <html> trong CSS để thay đổi cách phân phối hình ảnh. Bạn có thể gửi hình nền có độ phân giải thấp đến màn hình có độ phân giải cao như minh hoạ trong ví dụ HTML ở trên hoặc bỏ qua hoàn toàn một số tài nguyên.

Bỏ qua hình ảnh không cần thiết

Một số nội dung hình ảnh trên web đơn giản là không cần thiết. Mặc dù những hình ảnh như vậy có thể phù hợp với nội dung, nhưng những người cố gắng tận dụng hết các gói dữ liệu có đo lượng dữ liệu có thể không mong muốn. Trong trường hợp sử dụng đơn giản nhất của Save-Data, chúng ta có thể sử dụng mã phát hiện PHP ở phần trước và loại bỏ hoàn toàn các mã đánh dấu hình ảnh không cần thiết:

<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
  // Only send this image if `Save-Data` hasn't been detected.
  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
}

Kỹ thuật này chắc chắn có thể có hiệu quả rõ rệt, như bạn có thể thấy trong hình dưới đây:

So sánh hình ảnh không quan trọng đang được tải khi không có Save-Data, so với cùng một hình ảnh bị bỏ qua khi Save-Data xuất hiện. — So sánh hình ảnh không quan trọng được tải khi Save-Data không xuất hiện, so với hình ảnh tương tự bị bỏ qua khi Save-Data xuất hiện.

Tất nhiên, bỏ qua hình ảnh không phải là khả năng duy nhất. Bạn cũng có thể hành động trên Save-Data để bỏ qua việc gửi các tài nguyên không quan trọng khác, chẳng hạn như một số kiểu chữ.

Bỏ qua các phông chữ không cần thiết trên web

Mặc dù phông chữ trên web thường không chiếm gần như tổng trọng tải của một trang nhất định như hình ảnh thường chiếm, nhưng phông chữ này vẫn khá phổ biến. Chúng cũng không tiêu thụ một lượng dữ liệu không đáng kể. Hơn nữa, cách các trình duyệt tìm nạp và kết xuất phông chữ phức tạp hơn bạn nghĩ, với các khái niệm như FOIT, FOUT và thông tin phỏng đoán của trình duyệt khiến việc kết xuất một thao tác phức tạp.

Có lẽ bạn nên loại bỏ các phông chữ web không thiết yếu cho những người dùng muốn có trải nghiệm người dùng gọn gàng hơn. Save-Data khiến việc này trở nên vô cùng dễ dàng.

Ví dụ: giả sử bạn đã đưa Fira Sans từ Google Fonts vào trang web của mình. Fira Sans là phông chữ sao chép nội dung rất hiệu quả, nhưng có lẽ phông chữ này không quá quan trọng đối với những người dùng đang cố gắng lưu dữ liệu. Bằng cách thêm một lớp save-data vào phần tử <html> khi có tiêu đề Save-Data, trước tiên, chúng ta có thể viết những kiểu gọi ra kiểu chữ không thiết yếu, nhưng sau đó chọn không sử dụng kiểu chữ này khi có tiêu đề Save-Data:

/* Opt into web fonts by default. */
p,
li {
  font-family: 'Fira Sans', 'Arial', sans-serif;
}

/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
  font-family: 'Arial', sans-serif;
}

Khi sử dụng phương pháp này, bạn có thể giữ nguyên đoạn mã <link> từ Google Fonts, vì trình duyệt sẽ tải tài nguyên CSS (bao gồm cả phông chữ web) theo suy đoán bằng cách áp dụng kiểu cho DOM trước, sau đó kiểm tra xem có phần tử HTML nào gọi ra bất kỳ tài nguyên nào trong biểu định kiểu hay không. Nếu ai đó xảy ra khi bật Save-Data, Fira Sans sẽ không bao giờ tải vì DOM được tạo kiểu không bao giờ gọi nó. Thay vào đó, hãy sử dụng phần tử của bạn. Dịch vụ này không tốt như Fira Sans, nhưng có thể phù hợp hơn với những người dùng đang cố gắng kéo dài gói dữ liệu.

Tóm tắt

Tiêu đề Save-Data không có nhiều sắc thái; có thể bật hoặc tắt và ứng dụng phải chịu trách nhiệm cung cấp trải nghiệm phù hợp dựa trên chế độ cài đặt của tiêu đề đó, bất kể lý do là gì.

Ví dụ: một số người dùng có thể không cho phép chế độ tiết kiệm dữ liệu nếu họ nghi ngờ sẽ mất nội dung hoặc chức năng của ứng dụng, ngay cả trong tình huống kết nối kém. Ngược lại, một số người dùng có thể bật tính năng này để giữ cho các trang nhỏ và đơn giản nhất có thể, ngay cả trong tình huống kết nối tốt. Tốt nhất là ứng dụng của bạn giả định rằng người dùng muốn có trải nghiệm đầy đủ và không giới hạn cho đến khi bạn có chỉ báo rõ ràng thông qua một hành động rõ ràng của người dùng.

Là chủ sở hữu trang web và nhà phát triển web, chúng ta hãy chịu trách nhiệm quản lý nội dung để cải thiện trải nghiệm người dùng cho những người dùng bị ràng buộc về dữ liệu và chi phí.

Để biết thêm thông tin về Save-Data và các ví dụ thực tế xuất sắc, hãy xem bài viết Trợ giúp người dùng Save Data.